• 读书笔记:《HTML5开发手册》-- 现存元素的变化


    继续学习HTML5语义化的内容,今天主要介绍一下,HTML5之前的元素经HTML5规范后的语义及一些使用示例。

    一、cite

    HTML5对cite元素的定义进行了很大的修改,在HTML4中,cite元素允许开发人员显示引用内容的作者或发言人。

    <cite>恺撒大帝</cite>曾经说过, <q>来,信,砍。</q> 

    然而,HTML5中的cite用来显示某个作品(书籍、诗歌)的标题。HTML5规范中还着重强调:人名并非作品标题的一部分。因此,可以用下面的代码:

    <p>one of my favarite books is 
        <cite>The Day of the Jackal</cite> by 
        <b>Frederick Forsyth</b>
    </p>

    HTML5规范推荐使用b元素显示作者名。

    cite默认样式为斜体。

    以下为补充内容:


    到现在为止,我们已经有三个表示“引用”的标签:blockquotecite以及q,在使用的过程中可能会有些迷茫,其实三者之间还是有很大差别的。

    • <blockquote>标签定义摘自另一个源的块引用:
    复制代码
    <cite>《木兰花令》</cite>
    <blockquote>
        <pre>
            人生若只如初见,
            何事秋风悲画扇?
            等闲变却故人心,
            却道故人心易变。
            骊山语罢清宵半,
            泪雨零铃终不怨。
            何如薄幸锦衣郎,
            比翼连枝当日愿。
        </pre>
    </blockquote>
    复制代码

    需要注意的是,<blockquote>也有一个cite参数,表示引用的源,这一点不要和标签弄混了。

    • <q>标签是不需要段落的小引用,比如只是引用一句话:
    <cite>勃朗宁</cite>曾经说过:<q>只要朝着一个方向努力,一切都会变得得心应手。</q>

    同样,<q>标签也有cite属性,表示引用来源的URL。

    二、ol

    在HTML5中,ol被重新定义,附加了3个属性:

    • start -- 序列编号从多少开始
    • reversed -- 编号倒序显示
    • type -- 编号类型

    1、使用reversed属性,列表或以倒序显示。

    复制代码
    <!--正常顺序-->
    <h1>【正常】我最喜欢的颜色有:</h1>
    <ol>
        <li>红色</li>
        <li>绿色</li>
        <li>蓝色</li>
    </ol>
    
    <!--倒序-->
    <h1>【倒序】我最喜欢的颜色有:</h1>
    <ol reversed>
        <li>红色</li>
        <li>绿色</li>
        <li>蓝色</li>
    </ol>
    复制代码

    2、使用start属性,改变编号起始位置

    <ol start="10">
        <li>从第十项开始</li>
    </ol>

    三、dl

    在HTML4中,dl元素定义表,然而由于其定义和使用很不清晰,这导致了很多误用,在HTML5中,dl元素被重新定义为一个描述或者关联列表。

    <dl>
       <dt>计算机</dt>
       <dd>用来计算的仪器 ... ...</dd>
       <dt>显示器</dt>
       <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>

    如上例子,我们定义了一个描述列表,dt定义了一个键,dd定义了一个值。

    也可以为一个键赋予多个值:

    复制代码
    <h1>《驴得水》</h1>
    <dl>
        <dt>导演<dt>
        <dd>周申</dd>
        <dd>刘露</dd>
        <dt>主演</dt>
        <dd>田雷</dd>
        <dd>任素汐</dd>
        <dd>郑磊</dd>
        <dd>富冠铭</dd>
    </dl>
    复制代码

    dl元素以前被用作对话内容,但是从规范来看,使用dl是不恰当的。最初在HTML5中有一个dialog元素,但是在2009年底又将其从规范中删除了,现在可以用p、span元素。

    四、small

    在HTML4中,small用来缩小字体,但是缩小字体是显示层面的问题,应该由css来完成。因此,在HTML5中,small元素代表小打印体,如版权信息、条款或许可/法律信息。

    <p><small>This site is licensed under s...</small></p>

    small是内嵌元素,有需要,也可将small嵌入到其他元素中,比如strong,强调该小打印提的重要性。

    五、b和strong

    在HTML4中,b元素用作加粗。现在,它纯粹用作展示。所以应该用它来为不带特殊重要性的内容添加样式。

    博文的手段经常采用加粗的方法,以表现与众不同。

    <p><b>博客手段内容...</b></p>

    这里不适用strong的原因在于我们并不想表示手段更加重要,只是想使他的样式有所不同。

    strong元素用来标识重要的内容。所以不仅仅是用来加粗文字,还表达该内容的重要性。

    <p><strong>不要和他讨论问题!</strong>他只会反对你</p>

    六、i和em

    i元素在HTML4中表示创建斜体文字,HTML5规范给一些使用示例,比如一个梦境、一个科技用语、一个想法或船名等:

    <p>昨天我没有去钓鱼<i>(因为还要洗衣服)</i></p>

    相反,em元素表示了能改变句子意思的强调。包含在em中的一个或多个字在该句中有强调的意味。如果移动em元素,即强调的内容改变,相应句子也发生了含义上的改变。

    <!--强调“今天”-->
    <p>我<em>今天</em>很开心</p>
    
    <!--强调“很开心”-->
    <p>我今天<em>很开心</em></p>

    七、abbr

    abbr在HTML5中与acronym整合了,现在,abbr既可以标识缩写词,也可以表示首字母缩略词,可以使用title属性显示全称。

    <p><abbr title="HyperText Markup Language"><HTML></abbr> is the best since sliced web<p>

    在HTML5中,acronym删除了,使用abbr替代。

    八、hr

    hr用来在文档中添加横线,它的用法有细微的改变。现在,在段落末尾使用它,比如在书籍中,可用其指示场景的切换。现在hr元素并不和常见了,因为可以使用css在任何p、div、article、section元素后面添加空格、图片、段落或其他装饰。

    九、删除的元素

      • acronym (使用abbr)
      • applet (使用object)
      • basefont (使用CSS)
      • big (使用CSS)
      • center (使用CSS)
      • frame (iframe仍然存在)
      • frameset
      • noframes
      • font (使用CSS来显示)
      • strike (使用s或del,这视内容而定)
      • tt (使用CSS)
      • u (使用CSS)
  • 相关阅读:
    Mysql-学习笔记(==》事件 十二)
    Mysql-学习笔记(==》触发器 十一)
    Mysql-学习笔记(==》函数的建立与使用 十)
    Mysql-学习笔记(==》存储过程 九)
    Mysql-学习笔记(==》常用函数 八)
    Mysql-学习笔记(==》增删主键建立索引 七)
    Mysql-学习笔记(==》约束 六)
    Mysql-学习笔记(==》集合函数与分组四)
    Mysql-学习笔记(==》连接查询_高级查询五)
    Unity3D优化技巧系列七
  • 原文地址:https://www.cnblogs.com/zhangkeyu/p/6657734.html
Copyright © 2020-2023  润新知