首页 > 代码库 > 读书笔记：《HTML5开发手册》-- 现存元素的变化

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

2024-09-11 22:50:52   220人阅读

继续学习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默认样式为斜体。

以下为补充内容：

到现在为止，我们已经有三个表示“引用”的标签：blockquote、cite以及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）

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


联系
我们