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

2023-12-28 10:59

本文主要是介绍读书笔记:《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)

转载于:https://www.cnblogs.com/zhangkeyu/p/6657734.html

这篇关于读书笔记:《HTML5开发手册》-- 现存元素的变化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/545729

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统         在产品将要上线之前,需要制作不同类型格式的根文件系统         在产品研发阶段,我们还是需要使用nfs的方式挂载根文件系统         优点:可以直接在上位机中修改文件系统内容,延长EMMC的寿命         【1】重启上位机nfs服务         sudo service nfs-kernel-server resta

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能