一、简单标签
0、注释
<!--注释文字 -->
1、p 段落
- 说明：段前段后都有空白
- 举例：
<body>
------------
<p>我的第一个段落。</p>
<p>我的第二个段落。</p>
<p>我的第三个段落。</p>
------------
</body>- 【运行结果】
2、hx 标题
-
说明：标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。h1是最高的等级。
-
举例
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>- 运行结果
3、strong 、em 强调
-
说明：em 表示强调，默认用 斜体 表示。strong 表示更强烈的强调， 用 粗体 表示。
（目前国内前端程序员更喜欢使用 strong 表示强调。) -
举例
<p>有一个名叫<strong>尼克•卡拉威</strong>
（<em>托比•马奎尔</em>Tobey Maguire饰）的作家。</p>- 运行结果
4、span 设置单独样式
-
说明：span没有语义，就是为了设置单独的样式用的
-
举例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
为了实现他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
</body>- 运行结果：
5、q 短文本引用
-
说明：注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。用 q 标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。
-
举例：
<p>周瑜是历史上的英雄人物！配的上那句<q>聪明秀出为之英，胆略过人为之雄。</q></p>- 运行结果
6、blackqoute 长文本引用
-
说明：浏览器对 blockquote 标签的解析是缩进样式
-
举例：
<body>
<p>大家都在忙于自认为最重要的事情，却没能享受到人生的乐趣，反而要吞下苦果？</p>
<blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。</blockquote>
<p>这是李清照《咏桂》中的词句，在李清照看来，桂花暗淡青黄，性情温柔，淡泊自适。</p>
</body>- 运行结果
7、br 换行
-
说明：
xhtml1.0写法：<br />
html4.01写法：<br>
现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。
br标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有 br 、hr 和 img 。
在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入br。 -
举例：
<body>
<p>暗淡轻黄体性柔，<br/>情疏迹远只香留。</p>
</body>- 运行结果
8、 nbsp 空格
- 说明：若代码中单纯输入空格符，无论输入n个，都只会显示一个空格。
- 举例：
（1）输入n个空格符
<body>
<p>今天 星期五。</p>
</body>- 运行结果
- （2）输入4个
<body>
<p>今天 星期五。</p>
</body>- 运行结果
9、hr 水平横线
- 说明：
html4.01版本：<hr>
xhtml1.0版本：<hr />一般使用 xhtml1.0 的版本。
<hr />标签和<br />一样也是一个空标签，只有一个开始标签，没有结束标签。 - 举例：
<body>
<p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p>
<hr/>
<p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。</p>
</body>- 运行结果：线是无限延长的。
10、address 地址
- 说明：可以定义地址（比如电子邮件地址）、签名或者文档的作者身份。在浏览器上显示的样式为斜体，会自动另起一行。
- 举例：
<body>
<p>我家住在<address>北京市白云区同德5号</address></p>
<address>
本文的作者：<a href="mailto:[email protected]">月半</a>
</address>
</body>- 运行结果：
11、code 插入一行代码
- 说明：当代码为一行代码时方可使用。
- 举例：
<body>
<p>我们可能知道水平渐变的实现，类似这样：<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p>
</body>- 运行结果：
12、pre 插入多行代码
- 说明：可插入大段代码
- 举例：
<body>
<pre>
var message="欢迎";
for(var i=1;i<=10;i++)
{
alert(message);
}
</pre>
</body>- 运行结果：
二、多个标签
1、ul-li 无序列表
-
说明：ul-li 标签是无前后顺序的，默认样式为每个 li 项前有一个原点。一般多用于列举新闻信息。
-
语法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>- 举例：
<body>
<ul>
<li>香港将向18随以上永久居民发放1万港币</li>
<li>美国口罩出现2亿7千万缺口</li>
<li>日本回应东京奥运可能取消</li>
</ul>
</body>- 运行结果：
2、ol-li 有序列表
-
说明：ul-li 标签是有前后顺序的，默认样式为1.2.3.……
-
语法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>- 举例：
<body>
<ol>
<li>香港将向18随以上永久居民发放1万港币</li>
<li>美国口罩出现2亿7千万缺口</li>
<li>日本回应东京奥运可能取消</li>
</ol>
</body>- 运行结果：
3、div 容器
-
说明：
· div 相当于一个容器，可以把一些独立的逻辑部分划分出来。
·可以为这一个独立的逻辑部分设置一个名称，用 id 属性来为 div 提供唯一的名称。 -
举例：
<body>
<div id="hotList">
<h2>热门新闻</h2>
<ol>
<li>美国口罩出现2亿7千万缺口</li>
<li>日本回应东京奥运可能取消</li>
</ol>
</div>
<div id="sportNews">
<h2>体育新闻</h2>
<ul>
<li>湖人118-109鹈鹕 </li>
<li>詹姆斯赛季首个40+湖人三杀鹈鹕取6连胜</li>
</ul>
</div>
</body>- 运行结果：
4、table 表格
- 说明：包含五个元素：table、tbody、tr、th、td
· <table>…</table>：整个表格以<table>标记开始、</table>标记结束。
· <tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
· <tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
· <td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
· <th>…</th>：表格的头部的一个单元格，表格表头。
[ 1 ] . table表格在没有添加css样式之前，在浏览器中显示是没有表格线的。
[ 2 ] . 表头，也就是th标签中的文本默认为粗体并且居中显示。
- 举例：
<body>
<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
</body>- 运行结果：
5、caption、summary 为表格添加标题和摘要
-
说明：摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
-
语法：
摘要：<table summary="表格简介文本">
标题：<caption>标题文本</caption> -
举例：
<body>
<table summary="本表格记录2012年到2013年库存记录，包括U盘和耳机库存量">
<caption>2012年到2013年库存记录</caption>
<tr>
<th>产品名称 </th>
<th>品牌 </th>
<th>库存量（个） </th>
<th>入库时间 </th>
</tr>
<tr>
<td>耳机 </td>
<td>联想 </td>
<td>500</td>
<td>2013-1-2</td>
</tr>
<tr>
<td>U盘 </td>
<td>金士顿 </td>
<td>120</td>
<td>2013-8-10</td>
</tr>
<tr>
<td>U盘 </td>
<td>爱国者 </td>
<td>133</td>
<td>2013-3-25</td>
</tr>
</table>
</body>- 运行结果：
三、超链接、图片
1、a 超链接
-
说明：title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色，可通过css更改。
-
语法：
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> -
举例：
<body>
<p>我最近看的一本很好看的书叫<a href="#">漫长的告别</a>。</p>
</body>- 运行结果： 点击前：
点击后：
[1.1] 在新建浏览器窗口打开链接：加入target="_blank"
语法：<a href="目标网址" target="_blank">click here!</a>
[1.2] 在网页中链接Email地址： mailto
-
说明：如果mailto后面同时有多个参数的话，第一个参数必须以 ? 开头，后面的参数每一个都以 & 分隔。（下列参数注意观察参数最后的符号）
邮箱地址：mailto：
抄送地址：cc=
密件抄送地址：bcc=
多个收件人、（密件）抄送人：用分号；分开
邮件主题：subject=
邮件内容：body= -
举例：
<body>
<a href="mailto:[email protected][email protected];[email protected]&subject=html笔记&body=标签">发送</a>
</body>- 运行结果：点击发送后，浏览器自动调用默认客户端的电子邮件程序，并填上相应信息。
2、img 图片
-
语法：
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> -
说明：
src：标识图像的位置；
alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
图像可以是GIF，PNG，JPEG格式的图像文件。 -
举例：
<img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg"
title="电影介绍"> - 运行结果：鼠标移动到该图片上时，会显示相应的提示文本。
四、from 表单标签
1、与用户交互
-
语法：
<form method="传送方式" action="服务器文件"> -
说明：
<form>标签是成对出现的，以<form>开始，以</form>结束。所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间，否则用户输入的信息可提交不到服务器上！
action：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
method： 数据传送的方式（get/post） -
举例：
<form method="post" action="save.php">
2、输入框 input - text / password
- 语法：
<form>
<input type="text/password" name="名称" value="文本" />
</form>-
说明：
type：type=“text”，文本输入框；
type=“password”, 密码输入框。
name：为文本框命名，以备后台程序ASP 、PHP使用。
value：为文本输入框设置默认值。(一般起到提示作用) password类型的输入框，默认值将显示为黑色圆点。 -
举例：
<body>
<from>
账号：<input type="text" name="账号" value="请输入账号"><br/>
密码：<input type="password" name="密码" value="请输入密码">
</from>
</body>- 运行结果：
3、文本域-多行 textarea
-
语法：
<textarea rows="行数" cols="列数">文本</textarea>
-
说明：
<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
cols：列数
rows：行数 -
举例：
<body>
<from>
<textarea cols="50" rows="10">请输入你的简介</textarea>
</from>
</body>- 运行结果：
4、单选框、复选框 input - radio / checkbox
-
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/> -
说明：
type：type=“radio时，为单选框；type="checkbox"时，为复选框。
value：提交数据到服务器的值（后台程序PHP使用）。
name：为控件命名，以备后台程序 ASP、PHP 使用。
checked：当设置 checked=“checked” 时，该选项被默认选中。
同一组的单选按钮，name 取值一定要一致。 -
举例：
<body>
<from>
请选择性别：<br/>
<input type="radio" name="sex" value="女" checked="checked">女
<input type="radio" name="sex" value="男">男
<br/><br/>请选择你学过的科目：<br/>
<input type="checkbox" value="数学">数学
<input type="checkbox" value="英语">英语
<input type="checkbox" value="语文">语文
<input type="checkbox" value="物理">物理
</from>
</body>- 运行结果：
5、下拉列表框 select - option
[1] 单选
- 语法：
<from>
提示文字
<select>
<option value="1" >选项1</option>
<option value="2" selected="selected">选项2</option>
……
</select>
</from>-
说明：
value：要向服务器提交的值。
selected: 当selected="selected"时，该选项被默认选中。 -
举例：
<body>
<from>
性别：
<select>
<option value="1" >男</option>
<option value="2" selected="selected">女</option>
</select>
</from>
</body>- 运行结果：
[2] 多选 select - multiple=“multiple”
- 语法：
<from>
提示文字
<select multiple="multipe">
<option value="1" >选项1</option>
<option value="2" selected="selected">选项2</option>
……
</select>
</from>-
说明：在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
-
举例：
<body>
<from>
书：
<select multiple="multiple">
<option value="1" selected="selected">安妮的日记</option>
<option value="2" selected="selected">漫长的告别</option>
<option value="3" >摆渡人</option>
<option value="4" >我喜欢你</option>
</select>
</from>
</body>- 运行结果：
6、按钮 input - submit / reset
[1] 提交 submit
-
语法：
<input type="submit" value="提交"> -
说明：
· 只有当type="submit"时，按钮才有提交的作用
·value：按钮上显示的值 -
举例：
<body>
<from>
<input type="submit" value="提交" name="sumbit">
</from>
</body>- 运行结果：
[2] 重置 reset
-
语法：
<input type="reset" value="重置"> -
说明：
· 只有当type="reset"时，按钮才有重置的作用
·value：按钮上显示的值 -
举例：
<body>
<from>
<input type="reset" value="重置" name="reset">
</from>
</body>- 运行结果：
7、label 控件
-
语法：
<label for="控件id名称">
※ 标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。 -
说明：label 标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（即自动选中和该label标签相关连的表单控件上）。
-
举例：
<body>
<form>
性别：
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
</form>
</body>- 运行结果：
