html语义(一)

1.无序列表ul>li

从字面意思去理解,既然是“无序”的,就说明列表项中的信息重要性是一致的。

比较常见的是门户站点的新闻列表。

2.与无序列表对应的列表是有序列表,ol>li

有序列表排名分先后顺序的。常见的是各种排行榜,比如music排行榜。

3.定义列表dl>dt+dd

定义列表看着好理解,但是容易被滥用。一个标题dt,然后dd对此进行展开描述。

详见链接:http://bbs.blueidea.com/forum.php?mod=viewthread&tid=3030640

4.表格 table,caption,thead,tbody,tfoot,tr,td

表格标签没什么好说的,参照:http://www.w3school.com.cn/html/html_tables.asp

对于表格和列表,需要说明下两者之间的差异。因为css的强大无所不在,所以,使用列表也可以模拟表格效果。

但模拟终归模拟,从语义的角度来看,提供一个良构才是正确的开端。

那么,表格和列表的差异在哪里?

很简单:表格是用来产生数据列,而列表只是用来产生数据级。

都两列以上了,你还使用列表,脑门儿让门夹了么?

来看看一些比较二的页面,脑子绝对让门儿夹了:

http://www.9sky.com/top/,歌曲排行都是无序列表啊,都三列了。

5.h标题的使用

这绝对是个有意思的话题。因为有一个普遍的观点,从SEO的角度去考虑,一个页面只能有一个H1。

新手在网上看这类东西绝对是坑爹啊。

那么,如何正确使用h1,h2,h3,h4,h5,h6呢?

有没有想过,为毛没有h7呢?

好,我们先看看一般的正确使用h标题的示例,代码如下:

<div class="music_mod">
    <h1>音乐</h1>
    <div>
        <h2>音乐分类</h2>
    </div>
    <p>内容</p>
</div>
<div class="junshi_mod">
    <h1>军事</h1>
    <p>内容</p>
</div>
<div class="entertainment_mod">
    <h1>娱乐</h1>
    <div>
        <h2>音乐分类</h2>
        <ul>
            <li>
                <h3>流行</h3>
                <p>流行前线</p>
            </li>
            <li>
                <h3>古典</h3>
                <p>古典曲目</p>
            </li>
        </ul>
    </div>
    <p>内容</p>
</div>

同级使用同级标题,音乐,军事,娱乐模块属于同一级别,故这三个模块内部的标题是从h1开始的。

而在模块的内部,比如娱乐部分,h1和div属于同级,但是div内部的标题就和h1不属于同级了,所以只能用h2。同理,ul中的h只能用h3。

这是正常的人对标题的理解。毛病也不大,但是思考不够深入。我们再扩展下思路,让这样的语义结构崩溃掉。

假如,对于音乐模块,我还需要这么做:

<div class="music_mod">
    <h1>音乐顶级</h1>
    <div>
        <h1>音乐</h1>
        <div>
            <h2>音乐分类</h2>
        </div>
        <p>内容</p>
    </div>
</div>

我又想在

<div>
        <h1>音乐</h1>
        <div>
            <h2>音乐分类</h2>
        </div>
        <p>内容</p>
</div>

外套一层,怎么办?h1都用啦,岂不是要哭啦?

当然举例不太恰当,但并不排除有此可能。比如树状图。

解决这样的问题很简单,就是标题不分级别,全部使用h1。

<div class="music_mod">
    <h1>音乐</h1>
    <div>
        <h1>音乐分类</h1>
    </div>
    <p>内容</p>
</div>
<div class="music_mod">
    <h1>军事</h1>
    <p>内容</p>
</div>
<div class="music_mod">
    <h1>娱乐</h1>
    <div>
        <h1>音乐分类</h1>
        <ul>
            <li>
                <h1>流行</h1>
                <p>流行前线</p>
            </li>
            <li>
                <h1>古典</h1>
                <p>古典曲目</p>
            </li>
        </ul>
    </div>
    <p>内容</p>
</div>

霸气到哭。你再也不用管层级关系了,可以随心所欲地使用标题,你唯一需要担心的是,裸奔时候,页面奇丑无比。

但是,在我看来,这只能说是渲染机制不够好。文档渲染机制在标题上,应当根据文档的层级嵌套关系进行标题级别的渲染

当然,我的这些示例只是对爆牙齿前辈的对h标题理解的一个补充。详见此文[深入结构:理解h系列的不合理。]

以上的示例似乎在说明h2,h3,h4,h5,h6的存在就是基本没用了,是吗?

好了,我们还需要考虑另外一种情况。用以证明h2,h3,h4,h5,h6的存在是合理的。

<h1>Let’s call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>

html5中引入了hgroup标签,用以对标题组进行分组。

详见此文:http://www.mhtml5.com/resources/html5%E4%B8%AD%E5%AF%B9hgroup%E6%A0%87%E7%AD%BE%E7%9A%84%E5%AE%9A%E4%B9%89%E4%B8%8E%E8%A7%A3%E9%87%8A

我们再更改下对于h系列标题的渲染想法:同级h标题渲染根据标签来进行渲染,否则进行层级渲染。(yy一把)


5.表单标签。表单标签包含了form,label ,input,button,textarea,select,option等比较常见的标签。

详见:http://www.w3school.com.cn/html/html_forms.asp

需要注意的:

表单在input[type="text"]的情况下,回车会默认提交表单。

  • 表单按钮通常需要指明按钮类型,type为submit或者button都得明确。
  • 提交类型的按钮,id和name不能定义为submit。详见:http://huansinho.iteye.com/blog/869815
  • 保存之类的跳转就用a标签,不必要使用按钮。

 6.html5中的新增语义标签。

需要你们去关注下article和section的区别。其他基本没啥。

另外需要注意的是html标签的嵌套规则,这个可以查看一个经典的图示:

原文地址:https://www.cnblogs.com/my_front_research/p/2848062.html