HTML 全称Hyper Text Markup Language（超文本标记语言），是一种标记语言。超文本是一种组织信息的方式，它通过超级链接的方法将文本中的文字，图表与其他信息媒体相关联。HTML文本是由HTML命令组成的描述性文本，HTML可以说明文字、图形、动画、声音、表格、链接等。
本文是对于HTML中部分常用标签的概述。
标题标签h1~h6(双标签)
标题标签分为六种，分别为h1~h6。标题标签有对文字的自动加粗功能，而文字的大小由数字控制，h6为最小，h1为最大，从h6->h1逐渐增大。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
水平线标签 hr（单标签）
水平线标签可以在页面中显示一条默认通栏的水平线。
<hr />段落标签 p（双标签）
段落标签包裹的文字形成一个段落，段落会存在默认的行距，与其他的元素存在一定的距离。并且段落结尾会进行自动换行，相当于末尾自带一个br换行标签。
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>
文字修饰标签
文字加粗：<strong></strong> 或 <b></b>。建议使用strong标签，因为相比b来说strong更显得见名知意。
<strong>我是strong标签</strong>
<br/>
<b>我是b标签</b>
斜体文本：<em></em> 或 <i></i>。对文本进行斜体展示。
<em>我是em标签</em>
<br/>
<i>我是i标签</i>
大号文本：<big></big>
小号文本：<small></small>
<big>我是big标签</big>
<br/>
<small>我是small标签</small>
删除线：<del></del>
<del>我是del标签</del>
实体符号
| 显示结果 | 实体符号 | 描述 |
| | 空格 | |
| > | < | 大于号 |
| < | > | 小于号 |
| & | & | 与号 |
| × | × | 乘号 |
| ÷ | ÷ | 除号 |
| © | © | 版权符号 |
| ® | ® | 注册商标 |
图片标签img(单标签)
使用<img />标签可以插入图片。
img标签的属性：
src 图片路径
width 宽度
height 高度
title:鼠标悬停提示文字
alt: 当图片无法先试试 使用文字代替
<img src="img/创新公司.jpg"
width="160"
height="160"
alt="创新公司"
title="创新公司"/>
列表ul和ol
无序列表是默认没有顺序、序号的列表。
<ul>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ul>
有序列表是默认带有序号的列表。
<ol>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ol>
自定义列表，是自己定义的列表。
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>草莓</dd>
<dd>芒果</dd>
<dt>水果</dt>
<dd>苹果</dd>
<dd>草莓</dd>
<dd>芒果</dd>
</dl>
table表格
在 table 表格中，tr双标签定义行，td双标签定义列。
<table border="1" >
<!-- 行 -->
<tr>
<!-- 列 -->
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
</table>
表格中相邻单元格的合并，相邻行合并需要使用到rowspan属性，相邻列合并需要用到colspan属性。属性值为要合并单元格的个数。
<table border="1">
<tr>
<!-- 单元格 合并 colspan 合并6列 align=center 居中显示 -->
<!-- -->
<td colspan="6" align="center" >
学生信息
</td>
</tr>
<tr>
<!-- 单元格标题 -->
<th>学生学号</th>
<th>学生姓名</th>
<th>学生年龄</th>
<th>学生性别</th>
<th>学生年级</th>
<th>操作</th>
</tr>
<tr>
<!-- rowspan="2"： 行合并 合并两行 -->
<td> S1001</td>
<td>张三</td>
<td>22</td>
<td>男</td>
<td>1年级</td>
<td>
<a href="#">详情</a>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>S1002</td>
<td>李四</td>
<td>22</td>
<td>男</td>
<td>1年级</td>
<td>
<a href="#">详情</a>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table>
form表单标签和input标签
input标签的type属性
text 文本框
password 密码框，输入的字符会显示为小黑点
search 搜索框
date 时间
hidden 隐藏域
color 颜色选择框
radio 单选框
file 文件选择框
number 数值选择框
image 图片
checkbox 多选框
button 按钮
submit 提交按钮
reset 重置按钮，需要配合form标签使用
form和input标签的实例：
<form action="demo1.html" method="get">
<label>文本框：</label><input type="text" size="10" value="默认值"/><br/>
<input type="password" name="userpwd" /><br/>
<input type="search" /><br/>
<input type="date" /><br/>
<input type="hidden" value="隐藏的数据" />
<input type="color" /><br />
<input type="checkbox" checked name="cboxA" id="cbox1" value="1" /><label for="cbox1">篮球</label>
<input type="checkbox" name="cboxA" id="cbox2" value="2"/><label for="cbox2">足球</label>
<input type="checkbox" name="cboxA" id="cbox3" value="3"/><label for="cbox3">网球</label>
<br />
<input type="radio" id="radio1" name="sex" value="1" /><label for="radio1">男</label>
<input type="radio" id="radio2" name="sex" value="2" /><label for="radio2">女</label>
<br />
<input type="file" /><br />
<input type="number" value="1" /><br />
<input type="image" src="img/hetao.jpg" /><br />
<textarea></textarea><br />
<select>
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="0" selected>默认值</option>
<option value="3">三年级</option>
<option value="4">四年级</option>
</select><br />
<input type="button" value="点我"/>
<input type="submit" value="点击提交数据"/>
<input type="reset" />
</form>
超链接a标签
a标签是双标签，可包裹其他标签。
href属性：点击后跳转的路径
<a href="#">
<img src="img/renren_titile.gif" />
</a> 
该图片可以进行点击，然后进行跳转。
扫一扫
946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
