• 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标签的嵌套规则,这个可以查看一个经典的图示:

  • 相关阅读:
    C++ 类或函数导出lib的两种方式
    Qt 中文乱码原因以及解决方法
    AStyle Clion中配置代码格式化工具(附:博主最满意格式)
    nltk中meteor_score的计算,报错
    Ubuntu20重装nvidia驱动
    No input file specified,php+Nginx,报错处理
    「cocos2dx」动画创建笔记
    「cocos2dx」物理引擎学习之box2D(1)
    golang_listen3_time
    face_to_face
  • 原文地址:https://www.cnblogs.com/my_front_research/p/2848062.html
Copyright © 2020-2023  润新知