html标签小结
这几天学习了html，才发现各种标签真是多的不行，所以打算把一些个常用的标签拿出来稍微说一下。
常用基础标签
大体上分了三类：
- 带有语义的标签
- 带有一定样式的标签（此类标签页同时带有语义）
- 输出标签
带有一定样式的标签
-
em:强调
-
strong:强调，但比em强调级别更高
-
abbr：定义缩写，与title属性相互搭配使用
-
address：定义地址元素
-
blockquote：定义块引用，通常情况下会产生缩进
-
cite：通常情况下，某段话引自某本书，用cite进行说明
-
ins：定义被插入文本
-
del：定义被删除文本
<em>我是em，表示强调</em> <strong>我是strong强调，比em强调级别更高</strong> <abbr title="万维网">w3c</abbr> <address> Email:123456789@qq.com <br> Phone:12345678909 <br> WeChat:123456789 <br> Address:xx省xx市xx区 </address> <blockquote> 美猴王领一群猿猴、猕猴、马猴等，分派了君臣佐使，朝游花果山，暮宿水帘洞，合契同情，不入飞鸟之丛，不从走兽之类，独自为王，不胜欢乐。是以春采百花为饮食，夏寻诸果作生涯。秋收芋栗延时节，冬觅黄精度岁华。 ----《西游记》 </blockquote> <cite>希望本是无所谓有,无所谓无的.这正如地上的路,其实地上本没有路,走的人多了,也变成了路。</cite> <ins>我是被插入的文字</ins> <del>我是被删除的文字</del>
带有一定样式的标签（此类标签页同时带有语义）
-
b：定义粗体文字
-
i：定义斜体文字
-
big：定义大号文字
-
small：定义小号文字
-
sup:上标文字
-
sub：下标文字
-
bdo：定义文本显示方向（属性：dir， 属性值:ltr,rtl）
<b>我是b标签，变粗体</b> <i>我是i标签，变斜体</i> <big>我是big标签，变大号</big> <small>我是small标签，变小号</small> <sup>我是sup，变上标文字</sup> <sub>我是sub，变下标文字</sub> <bdo dir=ltr>我是bdo标签，从左往右显示</bdo> <bdo dir=rtl>我是也bdo标签，从右往左显示</bdo>
输出标签
-
pre:代码中样式原样输出
-
code:定义计算机代码文本
-
kbd：定义键盘文本
-
var：定义变量
<pre>我是pre标签，表示代码中样式原样输出</pre> <code> function show () { alert('hello,world') } show() </code> <kbd>键盘输入</kbd> <var> var <var>a</var> = 10; var b = 20; </var>
功能类标签
a标签：定义超链接实现页面跳转；定义锚点实现书签功能
<--超链接-->
<a href="http://www.baidu.com">百度一下，你就知道</a>
<!-- 锚点 -->
<a href="#bottom">点击跳转到网页的底部</a>
<!-- div标签，这个标签没有语义，就是一个简单的标签 -->
<div style="height: 2000px;"></div>
<a href="" name="bottom">这里是底部</a>
列表：ul：无序列表；ol：有序列表
<!-- 无序列表 -->
<ul>
<li>a标签</li>
<li>b标签</li>
<li>i标签</li>
</ul>
<!-- 有序列表 -->
广场舞音乐排行榜
<ol>
<li>最炫民族风</li>
<li>小苹果</li>
<li>自由飞翔</li>
</ol>
<hr>
iframe标签：页面嵌套
<iframe src="http://www.baidu.com" scrolling="auto" width="600px" height="400px">
</iframe>
<iframe src="http://www.sina.com" scrolling="auto" width="600px" height="400px">
</iframe>
项目列表描述：dl，dt，dd
<dl>
<dt>四大名著</dt>
<dd>《西游记》</dd>
<dd>《水浒传》</dd>
<dd>《三国演义》</dd>
<dd>《红楼梦》</dd>
</dl>
img：图片
<!-- alt 当图片加载失败的时候，会出现alt属性值 -->
<img src="Koala.jpg" alt="考拉" width="300" height="300" usemap="#test-demo">
<--图片映射-->
<map name="test-demo" id="test-demo">
<!-- shape 形状 coords 坐标 href 链接 -->
<area shape="rect" coords="0,0,100,100" href="http://www.baidu.com" alt="">
<area shape="circle" coords="200,200,100" href="http://www.baidu.com" alt="">
</map>
table标签：表格
<--border值为表格边框大小，frame为表格外边框-->
<table border="1" frame="void">
<!-- tr标签：行
td：表格的单元格
th：表格页眉
thead：表格头部
tbody：表格主干
tfoot：表格尾部
-->
<thead>
<tr>
<th>Name:</th>
<th>Age:</th>
<th>Sex:</th>
<th>Hobby:</th>
</tr>
</thead>
<tbody>
<tr>
<td>小红</td>
<td>20</td>
<td>男</td>
<td>玩</td>
</tr>
<tr>
<td>小兰</td>
<td>20</td>
<td>女</td>
<td>玩</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>小白</td>
<td>20</td>
<td>男</td>
<td>玩</td>
</tr>
</tfoot>
</table>
base标签：页面所有连接的基连接，位于head标签内部
<head>
<meta charset="UTF-8">
<title>base</title>
<!-- 基础链接，页面跳转失败则跳转到base标签所指向的网页-->
<base href="http://www.sina.com">
</head>
form标签：表单
输入域
- type属性：定义文本类型
- button：按钮
- file：文件
- hidden：隐藏类型
- text：文本
- password：密码
- radio：单选类型
- checkbox：
- image：图片
- reset：重置
- submit：提交
- alt：定义当按钮为图片时，图片的代替文字
- src：定义当按钮为图片时，图片的链接地址
- checked：定义默认选项
- maxlength：可输入文本的最大长度
- readonly：对当前输入域只读
- value：定义当前输入域的默认值
- disabled：禁用当前输入域
- name：定义当前输入域的名字
textarea：文本输入区
- cols：规定可见列数
- rows：规定可见行数
- disabled
- readonly
- name
button
<button type="button" disabled>点击</button>
<button type="reset">重置</button>
select标签：下拉菜单
-
disabled：禁用该菜单
-
multipe：规定可同时选中多项
-
name：下拉列表的名字
-
size：菜单中可见项目的列数
-
optgroup：定义下拉列表选项分组，其中label属性定义选项组的标记
-
option：定义下拉列表中的选项
<form action=""> <select size="2"> <optgroup label="汽车" > <option value="001">宝马</option> <option value="002">奥迪</option> <option value="003">桑塔纳</option> <option value="004">奇瑞qq</option> </optgroup> <optgroup label="城市"> <option value="001">上海</option> <option value="002">北京</option> <option value="003">广州</option> <option value="004">深圳</option> </optgroup> </form>
label：表单中的标记
<form action="">
<!-- id这个全局属性尽量少用 -->
<label for="testUser">userName:</label>
<input type="text" id="testUser"> <br>
<label>
Password: <input type="password">
</label>
<br>
<input type="submit">
</form>
fieldset：表单中相关元素分组
-
legend：定义分组标题
<form> <fieldset> <legend>个人信息:</legend> 姓名: <input type="text"><br> 邮箱: <input type="text"><br> 生日: <input type="text"> </fieldset> </form>
测试：
<form action="01.php">
<!-- id 全局属性 所有的标签都可以使用 所有的id值必须唯一 -->
<textarea name="" id="aa" cols="30" rows="10"></textarea>
最大长度：<input type="text" maxlength="10"> <br>
只读文本：<input type="text" value="默认值" readonly><br>
UserName: <input type="text" name="user" disabled> <br>
Password: <input type="password" name="pwd"> <br>
文件: <input type="file"> <br>
此处隐藏： <input type="hidden" > <br>
请选择你的性别: <br>
男: <input type="radio" name="sex" disabled>
女: <input type="radio" name="sex" checked> <br>
请选择你的爱好：<br>
吃: <input type="checkbox" name="hobby">
喝: <input type="checkbox" name="hobby">
玩: <input type="checkbox" name="hobby">
乐: <input type="checkbox" name="hobby"> <br>
重置: <input type="reset"><br>
<input type="image" src="Penguins.jpg" alt="企鹅" width="200" height="200"><br>
<!-- value属性此时表示当前input的默认值 -->
<input type="submit" value="提交">
</form>
以上就是一些常用的html标签的定义及用法，有兴趣的话可以自己试一试。