摘要:为什么会有语义化标签在出现之前,我们一般采用布局页面。为了解决上述缺点,新增了很多新的语义化标签。
为什么会有h5 语义化标签
在HTML5出现之前,我们一般采用DIV+CSS布局页面。但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点,HTML5新增了很多新的语义化标签。
语义标签的概念 维基百科语义化是前端开发里面的一个专用术语,其优点在于标签语义化有助于构架良好的html结构,有利于搜索引擎的建立索引、抓取;另外,亦有利于页面在不同的设备上显示尽可能相同;此外,亦有利于构建清晰的机构,有利于团队的开发、维护。
通俗来说:语义化的意思是从名称一眼就能看出其内容和作用是什么,语义化标签就是通过使用浅显易懂的元素名和属性名来实现语义化的
语义标签有什么用?可以提高页面的可访问性,即在css丢失的情况下,页面结构仍然可以比较清晰的展现;
提高用户体验,用户不够清楚地方可以得到良好的解释;
有利于页面seo,让搜索引擎更容易明白页面结构和内容的主次顺序;
有利于页面维护者理解代码结构,降低维护成本;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页
常用语义标签有哪些? h1到h6标签 表示不同等级的标题可以用来表现文本内容的层级结构
元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构可以嵌套使用,但是他们必须是部分与整体的关系
元素的作者信息可通过 元素提供,但是不适用于嵌套的 元素
元素的发布日期和时间可通过 元素的pubdate属性表示
如果使用多个 ,标签应该在主要内容的后面,这样有利于SEO的搜索与提升可访问性
如果是与文章的主要内容有关系的图像需要用 标签代替
元素表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题(heading)如果元素内容可以分为几个部分的话,应该使用 而不是
不要把 元素作为一个普通的容器来使用。 一般来说,一个 应该出现在文档大纲中
元素内的作者信息应包含在 元素中
元素不是章节内容,因此在outline中不能包含新的章节
描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表并不是所有的链接都必须使用 元素,它只用来将一些热门的链接放入导航栏
一个网页也可能含有多个 元素,例如一个是网站内的导航列表,另一个是本页面内的导航列表
对于屏幕阅读障碍的人,可以使用这个元素来确定是否忽略初始内容
dl: 英文意思为definition list,作用是定义列表
dt: 英文意思为defines terms,作用是定义列表中的项目
dd: 英文意思为defines description,作用是定义列表中项目的注释
/ 元素默认均展示为加粗表示“文体突出”文字,通俗讲就是突出不安分的文字。像概要中的关键字,产品名。或者代表强调的排版方式
表示重程度的强调
/ 元素默认均展示为斜体表现为在文章中突出不同意见或语气或的一段文本,例如外语,科技术语、或者是排版用的斜体文字
表示强调
用来突出显示文本,他的效果就像是用荧光笔给重点的语句做标一样 元素可以让作者为它最近的 或者 祖先元素提供联系信息。在后一种情况下,它应用于整个文档当表示一个和联系信息无关的任意的地址时,应使用
元素
这个元素不能包含除了联系信息之外的任何信息,比如出版日期
通常, 元素可以放在当前section的 元素中,如果存在的话
这个元素是用来引入图表、图形、照片等,对应的场景就是像是杂志中的图片一样
元素可以包含多个内容块,但是只能有一个
可以用 ~
来给 增加标题;
datetime中的时间最好与 标签中的文本元素日期一样,写法可以不一样
如果这个时间是代表整个文章或是页面的时间需要添加pubdate属性
不要在 标签中使用不确切的时间如:“今天中午”、“上周末”
如果 使用pubdate属性需要注意的是要在同一个父标签下面不要出现张冠李戴的问题
标签不能在嵌套另一个 标签
datatime中的时间格式需要是标准的机器可能的时间 如:YYYY-MM-DDThh:mm:ss
注意尽可能少的使用无语义的标签div和span
在语义不明显时,既可以使用div或者p时,尽量用p,因为p在默认情况下有上下间距,对兼容特殊终端有利
使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td
表单域要用fieldset标签包起来,并用legend标签说明表单的用途
每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/60798.html
摘要:下面是一个使用标签的网站头部实例信息科技有限公司需要注意的是,一个文档中可以包含一对或者一对以上的标签。示例如下版权所有信息科技有限公司五表示包含于一个文档页面应用程序或网站中的一段独立的内容,可以被独立的发布或者重新使用文章标记标签。 一、为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰,...
摘要:具体的语义化标签探析本文主要是为了探析部分标签在语义化中的差别。同时也探索新加入的语义化标签。英文意思为,作用是定义列表中的项目。强调标签说明在上面的介绍中,已经介绍了和,个中差别,看英文既能分辨。 什么是HTML语义化 HTML语义化就是根据具体内容,选择合适的标签进行代码的编写。便于开发者阅读和写出更优雅的代码,同时让搜索引擎的爬虫能更好的识别。 为什么要语义化 有利于SEO:搜...
摘要:具体的语义化标签探析本文主要是为了探析部分标签在语义化中的差别。同时也探索新加入的语义化标签。英文意思为,作用是定义列表中的项目。强调标签说明在上面的介绍中,已经介绍了和,个中差别,看英文既能分辨。 什么是HTML语义化 HTML语义化就是根据具体内容,选择合适的标签进行代码的编写。便于开发者阅读和写出更优雅的代码,同时让搜索引擎的爬虫能更好的识别。 为什么要语义化 有利于SEO:搜...
摘要:可能一些有心的开发者会把的写的语义明白些,比如导航栏的用,边栏的用。 0. HTML5中最看重的理念语义化相比HTML有什么区别? 在之前翻译的《如何写出高效率的HTML》一文中提到了一些关于语义化标签的相关内容,这里搜集整理了一些语义化标签方面的问题和解答,以供大家参考。 语义化这个概念应该说是伴着HTML5应运而生,那么什么是HTML5中所谓的语义化? 简单来说就是:描述...
摘要:可能一些有心的开发者会把的写的语义明白些,比如导航栏的用,边栏的用。 0. HTML5中最看重的理念语义化相比HTML有什么区别? 在之前翻译的《如何写出高效率的HTML》一文中提到了一些关于语义化标签的相关内容,这里搜集整理了一些语义化标签方面的问题和解答,以供大家参考。 语义化这个概念应该说是伴着HTML5应运而生,那么什么是HTML5中所谓的语义化? 简单来说就是:描述...
阅读 1909·2021-10-08 10:21
阅读 2264·2021-09-29 09:34
阅读 3292·2021-09-22 15:51
阅读 4589·2021-09-22 15:46
阅读 2174·2021-08-09 13:42
阅读 3256·2019-08-30 15:52
阅读 2610·2019-08-29 17:13
阅读 1398·2019-08-29 11:30