HTML
HTML(Hyper Text Markup Language),即超文本标记语言。
超文本(文字+图片+音频+视频+……)
标记语言(浏览器看到什么样的标记就会做出什么样的反应)
HTML直接用浏览器来执行。
HTML经常用于编写web动态页面
这里介绍一个HTML的网站,这里的HTML还是比较全面的,对于入门学习很不错:HTML教程
HTML标记语言的特点
标记(标签或元素)的形式
双标签
<元素名>内容</元素名>
如:<font>文字</font>
单标签
<元素名/>
如:<img src=“a.jpg”/>
<元素名>
如:<br/>
HTML页面的基本结构
<html> //HTML起始标签
<head> //页面头部起始标签
<title>网页标题</title> //页面标题
</head> //页面头部结尾标签
<body> //页面正文起始标签
网页正文
</body> //页面正文结束标签
</html>
回车键和空格键在HTML中显示时不起作用,为使代码清晰,建议不同的标记之间回车编写,以便于代码的阅读
HTML编辑时不是所见即所得
HTML不区分大小写
缩进用tab,不要使用空格
HTML中注释格式为
<!--需要注释的内容-->
空格标签
标题标签
<hn></hn>
n从1到6, 标题从大到小,超过6的按照6级标题显示
水平线标签,即出现一根横划整个页面的横线
<hr/>
段落标签,开启一个段落
<p></p>
字体标签
<font></font>
例如:<font size="7" color="#00FFFF" face="楷体">HTML</font>
- 属性size表示字体的大小,有1至7逐渐递增
- 属性color表示颜色,除了能使用颜色的英文表示,通常使用RGB三原色表示法,例#FF0000
- 属性face表示字体
图片标签
<img />
例如:<img src="img/shitu_b01.jpg" height="1200px" width="1920px" alt="抱歉,图片无法显示!">
- src:指的是显示的图片的路径
- width:指定图片的宽度,取值可以是像素值,也可以是占页面的百分比
- height:指定图片的高度,取值可以是像素值,也可以是占页面的百分比
- alt:当图片无法正常显示的时候给出的提示信息
表格标签
<table>
<tr>
<td>
</td>
</tr>
</table>
tr标签标示行
td标示单元格
table属性border表示边框
table属性bordercolor表示边框颜色,除了能使用颜色的英文表示,还通常使用RGB三原色表示法,例#FF0000
table属性width 表示表格宽度,可以使用像素表示(px),也可以使用百分比(~%)
table属性height表示表格高度,可以使用像素表示(px),也可以使用百分比(~%)
table属性cellpadding表示表格边与内容的距离
table属性cellspacing表示表格边与边的距离,也就是单元格之间的距离
td属性colspan表示单元格跨列数目
td属性rowspan表示单元格跨行数目
td属性align定义内容在水平方向的排布:left center right
td属性valign定义内容在竖直方向的排布:bottom middle top
form表单
form表单是用户可以填写信息提交服务器的控件。form表单包含如下控件:
<input type=“text”/> <!– 可编辑文本域 -->
<input type=“password”/> <!– 密码框 -->
<input type=“checkbox”/> <!– 多选框 -->
<input type=“radio”/> <!– 单选框 -->
<input type=“button”/> <!– 按钮 -->
<input type=“file”/> <!– 文件浏览 -->
<textarea cols=“50” rows=“4”> </textarea> <!– 文本域-->
<select> <option></option></select> <!– 下拉控件-->
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <BODY> <!--此部分为注释,并不会出现 1、html编辑时不是所见即所得; 2、HTML不区分大小写 3、段落标签<p />开启下一段,或者使用<p></p> 4、换行标签<br /> 5、标题标签 H1——H6 依次递减 6、缩进用TAB,不要使用空格 6、字体标签 <font></font> 属性size表示字体的大小,由1至7逐渐递增, 属性color表示颜色,除了能使用颜色的英文表示,通常使用RGB三原色表示法,例#FF0000 属性face表示字体 eg:<font color="red" size="5" face="楷体">HTML</font> 7、水平线标签<hr/> --> <h1>HTML语言经常用于编写Web静态页面</h1> <h2>HTML语言经常用于编写Web静态页面</h2> <h3>HTML语言经常用于编写Web静态页面</h3> <h4>HTML语言经常用于编写Web静态页面</h4> <h5>HTML语言经常用于编写Web静态页面</h5> <h6>HTML语言经常用于编写Web静态页面</h6> <hr/> <font size="7" color="#00FFFF" face="楷体">HTML</font> <br/> Java程序设计教程 <!--段落标签--> <p> Textbook for Programming in Java </p> <br/> <!--表格标签<table><tr><td></td> </tr></table> <tr>标签标示行 <td>标签标示单元格 table属性border表示边框 table属性bordercolor表示边框颜色 table属性width 表示表格宽度,可以使用像素表示(px),也可以使用百分比(~%) table属性height表示表格高度,可以使用像素表示(px),也可以使用百分比(~%) table属性cellpadding表示表格边与内容的距离 table属性cellspacing表示表格边与边的距离,也就是单元格之间的距离 td属性colspan表示单元格跨列数目 td属性rowspan表示单元格跨行数目 td属性align定义内容在水平方向的排布:left center right td属性valign定义内容在竖直方向的排布:bottom middle top 表示空格 --> <table border="1" bordercolor="#00FFFF" cellspacing="1px" cellpadding="0px" height="250" width="100%"> <tr> <td>时间\星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td> </tr> <tr> <td rowspan="2" align="center">上午</td><td>数据结构</td><td>编译原理</td><td>java</td><td>数据库原理</td><td>编译原理</td> </tr> <tr> <td>休息</td><td>休息</td><td>操作系统</td><td>计算方法</td><td>休息</td> </tr> <tr> <td colspan="6"> </td> <!--空格跨6列--> </tr> <tr> <td rowspan="2" align="center">下午</td><td>休息</td><td>汇编语言</td><td>数据结构</td><td>休息</td><td>休息</td> </tr> <tr> <td>数据库原理</td><td>休息</td><td>计算方法</td><td>休息</td><td>操作系统</td> </tr> </table> <br/> <br/> <!--表单标签 Form表单是用户可以填写信息提交服务器的控件。Form表单包含如下控件: <input type="text"/> 可编辑文本域 <input type="password"/> 密码框 <input type="checkbox"/> 多选框 <input type="radio"/> 单选框 <input type="button"/> 按钮 <input type="file"/> 文件浏览 <textarea cols="50" rows="4"></textarea> <select> <option></option></select> --> <table border="1" bordercolor="blue" cellspacing="0px" cellpadding="0px" width="100%"> <tr> <td align="right">用户名:</td> <td><input type="text" name="userName" /> </td> </tr> <tr> <td align="right">密 码:</td> <td><input type="password" name="passwd"/> </td> </tr> <tr> <td align="right">专 业:</td> <td> <select> <option>--请选择--</option> <option>软件工程</option> <option>计算机科学与技术</option> <option>通信工程</option> <option>电子信息</option> </select> </td> </tr> <tr> <td align="right">性 别:</td> <td><input type="radio" name="gender" />男 <input type="radio" name="gender" />女</td> </tr> <tr> <td align="right">兴 趣</td> <td><input type="checkbox" name="favorate" />羽毛球 <input type="checkbox" name="favorate" />篮球<input type="checkbox" name="favorate" />乒乓球</td> </tr> <tr> <td align="right"> 介 绍: </td> <td> <textarea rows="3" cols="30"></textarea> </td> </tr> <tr> <td align="center"> <input type="submit" value="提交" /> </td> <td align="center"> <input type="reset" value="重置"/> </td> </tr> </table> <br/> <br/> <!--图片标签 <img /> src:指的是图片显示的路径 width:指定图片的宽度,取值可以是像素值,也可以是百分比 height:指定图片的高度,取值可以是像素值(px),也可以是百分比 alt:当图片无法正常显示的时候给出的提示信息 --> <img src="img/shitu_b01.jpg" height="1200px" width="1920px" alt="抱歉,图片无法显示!"> <br/> </BODY> </html>