一、基础标签:
<html> | 定义 HTML 文档。 |
<title> | 定义文档的标题。 |
<body> | 定义文档的主体。 |
<h1> to <h6> | 定义 HTML 标题。 |
<p> | 定义段落。 |
<br> | 定义简单的折行。 |
<hr> | 定义水平线。 |
<!--...--> | 定义注释。 |
例:
代码:
<html>
<head>
<span style="white-space:pre"> </span><title>HTML页面</title>
</head>
<body>
<span style="white-space:pre"> </span><h1>标题一</h1>
<span style="white-space:pre"> </span><h2>标题二</h2>
<span style="white-space:pre"> </span><h3>标题三</h3>
<span style="white-space:pre"> </span><p> body元素的内容会显示在浏览器中。</p>
<span style="white-space:pre"> </span><p> title元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
结果:
二、表单:
<form> | 定义供用户输入的 HTML 表单。 |
<input> | 定义输入控件。 |
<textarea> | 定义多行的文本输入控件。 |
<button> | 定义按钮。 |
<select> | 定义选择列表(下拉列表)。 |
<optgroup> | 定义选择列表中相关选项的组合。 |
<option> | 定义选择列表中的选项。 |
<label> | 定义 input 元素的标注。 |
<fieldset> | 定义围绕表单中元素的边框。 |
<legend> | 定义 fieldset 元素的标题。 |
例:
代码:
<html>
<head>
<title>HTML页面</title>
</head>
<body>
<form name="form1" action="#" method="post">
<fieldset>
<legend>个人信息</legend>
姓名:<input type="text" name="username"><br /><br />
密码:<input type="password" name="password"><br /><br />
性别:<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女 <br /><br />
爱好:<input type="checkbox" name="basketball">篮球
<input type="checkbox" name="singing">唱歌
<input type="checkbox" name="running">跑步
<input type="checkbox" name="play_games">打游戏<br /><br />
车:<select name="cars">
<option>Ferrari</option>
<option>Lamborghini</option>
<option>Aston Martin</option>
<option>Bentley</option>
</select><br /><br />
简介:<textarea rows="10" cols="30">个人简介</textarea><br /><br />
<input type="button" name="submit" value="提交"><br />
</fieldset>
</form>
</body>
</html>
注释:
action :规定当提交表单时向何处发送表单数据,#代表发送的url地址。method:规定用于发送 form-data 的 HTTP 方法。有get和 post两种方法。
<br /> 表示换行。 表示一个空格。
结果:
三、表格:
<table> | 定义表格 |
<caption> | 定义表格标题。 |
<th> | 定义表格中的表头单元格。 |
<tr> | 定义表格中的行。 |
<td> | 定义表格中的单元。 |
<thead> | 定义表格中的表头内容。 |
<tbody> | 定义表格中的主体内容。 |
<tfoot> | 定义表格中的表注内容(脚注)。 |
<col> | 定义表格中一个或多个列的属性值。 |
<colgroup> | 定义表格中供格式化的列组。 |
例:
代码:
<html>
<head>
<title>HTML页面</title>
</head>
<body>
<form name="form1" action="#" method="post">
<table border="1">
<caption>成绩列表</caption>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td>小明</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td>小刚</td>
<td>90</td>
<td>95</td>
</tr>
<tr>
<td>小陈</td>
<td>90</td>
<td>90</td>
</tr>
</table>
<table border="1" cellspacing="0">
<caption>
标题
</caption>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td>小明总分</td>
<td colspan="2" align="center">175</td>
</tr>
<tr>
<td>小刚</td>
<td rowspan="2">180</td>
<td>90</td>
</tr>
<tr>
<td>小陈</td>
<td>90</td>
</tr>
</table>
</form>
</body>
</html>
注释:cellspacing:规定空格间的空白。rowspan=“2”表示行占两行。colspan=“2”表示列占两列。
结果:
四、列表:
<ul> | 定义无序列表。 |
<ol> | 定义有序列表。 |
<li> | 定义列表的项目。 |
<dl> | 定义定义列表。 |
<dt> | 定义定义列表中的项目。 |
<dd> | 定义定义列表中项目的描述。 |
<menu> | 定义命令的菜单/列表。 |
<menuitem> | 定义用户可以从弹出菜单调用的命令/菜单项目。 |
例:
代码:
<html>
<body>
<h4>无序列表:</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<ul type="circle">
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<h4>有序列表</h4>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="10">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>
结果:
五、框架:
<frame> | 定义框架集的窗口或框架。 |
<frameset> | 定义框架集。 |
<noframes> | 定义针对不支持框架的用户的替代内容。 |
<iframe> | 定义内联框架。 |
六、链接:
<a> | 定义锚。 |
<link> | 定义文档与外部资源的关系。 |
例:
<a href="http://www.w3school.com.cn">W3School</a>
七、图像:
<img> | 定义图像。 |
<map> | 定义图像映射。 |
<area> | 定义图像地图内部的区域。 |
例:
<img src="img/1.jpg" alt="图片" />