HTML5核心标签详解-优快云博客

html5常用标签

1. 基础标签

标签	解释
html	定义html文档
head	定义文档头部，可以包含title、meta、link、、script、style标签
body	定义页面主体内容
h	标题标签，从h1-h6字号依次减小
p	定义段落
span	文本容器
div	容器，块元素
br	强制换行
hr	水平线

2. 格式标签

标签	解释
address	定义地址、联系信息等内容，具有语义化
b	粗体
del	删除字
em	斜体，用来强调
strong	正常加粗，强调语气大于em标签
i	斜体，无强调
pre	与格式化文本，包裹在pre标签中的文本会保留空格和换行符
small/big	字体小/大号
sup/sub	上标、下标
u	下划线

3. 图像标签
img：
必须包含属性：src（图像存储路径）、alt（图像无法显示时的替代文本）。
其他属性：title（鼠标悬停时显示的文字）、width、height、border、align（有五个值：top,bottom,center,left,right）

4.超链接
a标签：
属性：href（链接的URL地址）、target（规定在何处打开链接文档）。
当herf属性中只写#时，点击会回到页面顶部。

5.列表
无序列表

<ul>
    <li></li>
        ……
    <li></li>
</ul>

有序列表

<ol>
    <li></li>
        ……
    <li></li>
</ol>

自定义列表

<dl>
    <dt></dt>
    <dd></dd>
</dl>

6.表单
form标签定义表单，最常用的是input输入框，以下列出了input的常见type属性：

<form action="">
    <input type="text" name="namme"/><br/>
    <input type="password" name="psd"/><br/>
    <input type="radio" name="radio"/><br/>
    <input type="checkbox" name="radio"/><br/>
    <input type="email" name="email"/><br/>
    <input type="url" name="url"/><br/>
    <input type="number" name="num" min="100" max="1000"/><br/>
    <input type="range" name="ran" min="100" max="1000" value="123"/><br/>
    <input type="date" name="date"/><br/>
    <input type="search" name="search"/><br/>
    <input type="color" name="color"/><br/>
    <input type="hidden" name="hidden"/><br/>
    <input type="image" value="提交" src=""/>
    <input type="button" value="提交"/>
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
</form>

下拉框也是常用表单：

<select name="city" size="2">
     <option value="1">北京</option>
      <option value="2">天津</option>
      <option value="3">上海</option>
      <option value="4">广州</option>
      <option value="5">深圳</option>
      <option value="6">太原</option>
</select>

元素集亦是常用表单：

<fieldset>
    <legend>你的爱好</legend>
    打篮球<input type="checkbox" name="hobby"/>
    阅读<input type="checkbox" name="hobby"/>
    上网<input type="checkbox" name="hobby"/>
    跑步<input type="checkbox" name="hobby"/>
</fieldset>

除此以外，还有多行文本textarea标签。

7.表格
table标签：
表格标题caption；行tr，单元格td，表头th。

<table border="1" cellpadding="0" cellspacing="0" align="center">
    <caption>湖南省义务教育合格学校建设条件建设项目汇总表</caption>
    <tr>
        <th rowspan="3">学校名称</td>
        <th colspan="6">项目类别</td>
        <th rowspan="3">经费小计</td>
    </tr>
    <tr>
        <td colspan="2">建筑类</td>
        <td colspan="2">设备类</td>
        <td colspan="2">其他类</td>
    </tr>
    <tr>
        <td>数量（平方米）</td>
        <td>经费（万元）</td>
        <td>数量（件）</td>
        <td>经费（万元）</td>
        <td>数量</td>
        <td>经费（万元）</td>
    </tr>
    <tr>
        <td>学校一</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>学校二</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>学校三</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>总计</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
</table>

8.其它
html5除了上述常用标签外，还有一些其它标签，video定义视频、audio定义音频、canvas定义画布、以及一些语义化标签（header、nav、footer、article、aside、time、ruby、details、summary、mark、progress、section、datalist、embed）。