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="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放什么标签，不是看什么样子，要看语义！

posted @ 2017-05-08 11:52 zhoujian43 阅读(801) 评论(0) 编辑收藏举报

刷新页面返回顶部

zhoujian43