HTML：描述语义

一、HTML

　　HTML：Hypertext Markup Launguage，超文本标记语言，是网页的就文件格式，用于描述网页语义。

二、HTML骨架

　　DTD手册：http://www.w3school.com.cn/tags/tag_doctype.asp

<!DTD>

<html>

    <head>

　　　　<!-- 字符集 -->

　　　　<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

       <!-- 关键字 -->

　　　　<meta name="keywords" content="手机，电脑，冰箱，彩电">

　　　　<!-- 描述 -->

　　　　<meta name="description" content="爱前端-全国最适合0基础学员的前端开发工程师培训....">

　　　　

    </head>

    <body>

    </body>

</html>

三、HTML标签

　　文本级：

　　容器级：容器级标签，只有div li dd dt td，其余都是文本级标签

1. 常用标签

　　h：标题

　　p：段落

　　img：图片　　　

<img src="data:images/m.jpg" alt="这是一副美景图片"/>

　　a：超链接

　　　　锚点：<a name="top"></a>

　　　　跳到锚点：<a href="#top">返回顶部</a>

<a href="temp.html" title="点击我" target="_blank">超链接</a>

2. 列表

　　1. 无序列表 ul li

　　　　li是一个非常经典的容器级标签，里面可以放任何东西，甚至，再放置一个ul（二级列表），甚至三级列表。

　　　　注意：ul的儿子标签，只能是li，不能是其他任何标签

　　2. 有序列表 ol li

　　3. 定义列表 dl dt dd

　　　　定义列表：表示定义某事的列表

　　　　dt dd 是非常经典的容器级标签

3. 表单

　　form，是功能型标签，不是一个结构型标签，from是给后台哥哥用的，rorm有两个属性：method、action。

　　input：输入控件

　　　　text、password、radio、checkbox

　　　　button、submit、reset

　　select>option

　　textarea

<!-- 用户更好的体验 -->

<input type="radio" name="sex" id="nan"/>

<label for="nan">男</label>

4. 表格

<!-- 表格 -->

<table>

    <!-- 表格标题 -->

    <caption>table title and/or explanatory text</caption>

    <thead>

        <tr>

            <th>header</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <!-- rowspan="跨行" colspan="跨列"-->

            <td>data</td>

        </tr>

    </tbody>

</table>

<table border="1">

    <tr>

        <th rowspan="3">地区</th>

        <th rowspan="2" colspan="2">2005年耕地面积</th>

        <th colspan="4">耕地保有量</th>

        <th rowspan="2" colspan="2">基本农田保护面积</th>

    </tr>

    <tr>

        <th colspan="2">2010年</th>

        <th colspan="2">2020年</th>

    </tr>

    <tr>

        <th>万公顷</th>

        <th>万亩</th>

        <th>万公顷</th>

        <th>万亩</th>

        <th>万公顷</th>

        <th>万亩</th>

        <th>万公顷</th>

        <th>万亩</th>

    </tr>

    <tr>

        <td>北京</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

    </tr>

    <tr>

        <td>北京</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

    </tr>

    <tr>

        <td>北京</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

    </tr>

    <tr>

        <td>北京</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

        <td>123</td>

    </tr>

</table>

5. div、span

　　div是典型的容器级标签，没有默认的样式

　　span是行内标签

四、废弃的标签

　　现在的HTML标签只负责语义、结构、不负责样式，但是在2008之前，HTML也是负责样式的。

　　b、u、i、del，这些标签没有丝毫语义，只当作钩子用

　　strong、em 带有一点语义，但也有样式色彩

五、总结

HTML在现在的社会，就是负责页面语义和结构的，所以标签极大的简化。页面上常用的标签实际上就几个：

　　容器： div、ul（li）、ol、dl、table

　　放文字的： h系列、p、span、a

　　文本流： img、input

　　当做css钩子： b、u、i

最后最后强调一下，HTML放什么标签，不是看什么样子，要看语义！

巴特西