《HTML5+CSS3网页设计入门必读》——2.8 转变(CH-CH变化)

简介:

本节书摘来自异步社区《HTML5+CSS3网页设计入门必读》一书中的第2章,第2.8节,作者: 【英】Jeremy Keith , 【美】Dan Cederholm 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.8 转变(CH-CH变化)

元素big已经过时了,但元素small却还没有。通过重新定义small的含义,这种显著的矛盾已经得到解决。small的含义不再是其字面意义,即“在小号字体下进行显示”。相反,其语义值变为法律术语、条款或附属细则以小号字体显示。

当然,十有八九,开发人员会以小号字体显示附属细则,但重点是该元素的字面意义已被取代。

元素b曾表示“用粗体显示”。现在,它被用来将一些文本“偏离正常的样式而不具有任何额外的重要性”。如果文本具有额外的重要性,那么使用该元素则更为合适。

元素i也不再意味着“倾斜”。它表示文本中“另一种的语气或情绪”。同样,该元素也不表达任何重要性或重点。如果需要强调,则要使用em元素。

这些变化听起来可能像是文字游戏。它们的确是文字游戏,但它们也有利于增强HTML5的设备独立性。如果仔细考虑“加粗”和“倾斜”,那么它们仅在视觉媒介(如屏幕或页面)中才能解释得通。通过消除这些元素定义中的视觉偏差,HTML5的规范可与非可视化用户代理(如屏幕阅读器)保持相关。这样做可以避免设计师的思维被禁锢在视觉显示环境之内。

2.8.1 cite元素
HTML5对cite元素进行了重新定义。cite元素原来表示的是“对其他参考资料的引用”,但它现在的意思是“一部作品的标题”。通常,被引用的参考为作品的标题,例如一本书或一部电影,但其根源很可能是一个人。在HTML5之前,可以使用cite来标记这个人的名字。但现在,这种做法被明令禁止——关于向后兼容性仅仅讨论这么多。

对于这种修正的理由是:浏览器将标签之间的文本格式更改为斜体;作品的标题通常是斜体的;人名通常不是斜体。因此,cite元素不应该被用于标记人名。

但这是完全错误的。我赞成HTML5向浏览器学习,但这种情况属于主次颠倒。

幸运的是,验证器无法分辨起始标签和结束标签之间的文本是否是指向人的,所以没有什么能阻止网页设计师用一种合理的、向下兼容的方式来使用cite元素。

2.8.2 增强型a元素
先前已有元素的变化仅仅是创造性的文字游戏,但HTML5对一个元素进行了更为有效的改造。

毫无疑问,a元素是HTML中最重要的元素。该元素将文本转换成超文本,相当于万维网的结缔组织。

a元素是一个内嵌元素。如果想要将一个标题或一个段落转化为超链接,则需使用多个a元素:

<h2><a href="/about">About me</a></h2><h2><a href="/about">About me</a></h2>
<p><a href="/about">Find out what makes me tick.</a><p>
AI 代码解读

在HTML5中,可以将多个元素封装在一个a元素中:

<a href="/about">
<h2>About me</h2>
<p>Find out what makes me tick.</p> 
</a>
AI 代码解读

唯一需要注意的是,不可以将一个a元素嵌套在另一个a元素中。

将多个元素包装在一个元素中,这看起来似乎是一个巨大的变化。而且,要想支持这种新的链接模式,大多数浏览器并不需要做很多工作。虽然这种标记直到现在才成为合法的,但大多数浏览器已经支持了这种新的模式。

这似乎有些违背常理:浏览器应该理所当然地执行已有的规范吗?事实上正相反,是最新的规范正在记录浏览器所执行的操作。

目录
打赏
0
0
0
0
1819
分享
相关文章
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
174 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
83 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
84 34
【CSS】——基础入门常见操作
CSS引入,CSS对元素美化,style修饰,选择器(标签选择器,类选择器,ID选择器,复合选择器),font-size , boder ,width,height,margin,paddiing
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
316 91
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
221 6
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
123 28
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
141 19
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等