HTML5语义化标签重构页面

2022-02-23 17:12:21

在HTML5未出现之前我们都用div+css来构建页面,比如<div id=”header”>,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义化标签,更简单的语法来重构一下页面.

最基本的标签

Header:文档的头部,主要包含页面的标题或者导航部分.

Section: 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分.用于定义页面中的主题栏目等,比如选项卡的各个部分

Nav:导航,可以包含一组导航链接

Article:文档正文部分,用于包含文章,贴子或者评论

Aside: <aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。比如侧边栏,广告区等.

Footer:文档的尾部,可以包含版权信息,链接,作者等相关信息.

虽然这些元素在样式化或者浏览器渲染上同div是没什么差别的,但是它们可以帮助我们或者一些屏幕阅读器以及搜索引擎理解网站的结构,检索正确的信息.同时有利于维护和开发.

hgroup元素

文档大纲

在页面构建中我们除了使用语义化标签还要规范”文档大纲”,即标题的层次和嵌套.比如:

以前我们为了优化seo,严格限制页面中出现的h1,现在html5使用了新的算法来解析文档大纲,所以现在我们可以不受这些限制了!

我们可以这样定义,文档大纲是一样的:

<header>
    <h1>网站标题</h1>
</header>
<section>
<h1>文章标题</h1>
<article>
    <h1>文章子标题1</h1>
    …
    <h2>文章子标题2</h2>
    .
    .
</article>
</section>

划分内容

为什么可以像上面一样定义标题呢?理解这个我们得先了解一下HTML5的内容模型,我们已经熟知了html的两类元素:内联和块.在html5中定义了更加精细的内容模型.注意浏览器在渲染的时候还是按块和内联模式进行的.我们稍微了解一下内容模型的概念:

元数据内容:这些元素不会在页面中显示,比如meta,link,title等;

流内容:文档中会呈现的元素

措辞内容:em,strong,cite,一些过去常用的内联元素;

嵌入内容:一些嵌套在页面中的元素,比如img,object,embed等;

交互内容:可以交互的任何内容,比如表单,链接等;

划分内容:这是html5中最新奇中的内容类型,是指article,aside,nav,section等元素.简单说划分内容就相当于一个独立的微型的文档.每一部分的划分内容都会在文档树中创建一个新的节点,有自己的文档大纲.如下图.

同样,页面中我们不只可以在文档的顶部使用<header>,或者在底部使用<footer>.我们可以任意将它们嵌套进划分内容的元素中.

划分内容使内容更容易联合和移动,即使你将整个部分移动到另一个完全不同的文档中,也可以同样保持移动元素的文档结构.

hgroup

了解完文档大纲和内容模型后,我们正式来了解一下hgroup.我们网站的标题一般会跟随一个网站描述,比如:

<h1>前端菜鸟<h1>
<h2>记录前段学习的点滴</h2>

但是这样做的坏处是副标题扰乱了文档大纲,文档大纲可能是这样的:

所有内容都被嵌套进描述语的分区下,这并不是我们想要的.以前我们是这样处理的:

<h1>前端菜鸟<h1>
<span id=“description”>记录前段学习的点滴</span>

虽然这样我们不会扰乱文档大纲,但却不能满足我们语义化标签的要求.这时候该派hgroup上场了.hgroup会嵌套的内容形成一个复合标题.防止文档大纲混乱

<hgroup>
<h1>前端菜鸟<h1>
<h2>记录前段学习的点滴</h2>
</hgroup>

新标签简介

Figure和figcaption元素

这对元素可以用于注释文章中的插图,图标源码等

<figure>
    <img src=“test.png” alt=“figure”>
    <figcaption>图片注释</figcaption>
</figure>

Meter和progress

这两个都可以用来标记某些测量的单位,或者进度.meter主要用来标记已知范围的元素,比如硬盘容量.progress则是显示进度.

两者都有max,min,value属性,用来指定区间以及当前值.meter还有low,high,optimum属性.指定一个界限.比如低于low为低值,高于high为高值,optimum为理想值.

描述列表

<dl>
    <dt>术语</dt>
    <dd>术语解释</dd>
    <dt>Anxiety</dt>
    <dd>Anxiety首位签约加拿大*唱片公司Nettwerk的中国国籍女原创音乐人。</dd>
<dl>

用这些标签来标记一些名词,术语和定义

Details

官方解释是用于描述文档或某部分不的细节,其实就是允许我们点击它是显示详细信息,比如:<details><p>……</p></details>

<summary>与details配合使用,作为details的标题.遗憾的是,目前只有webkit支持

<details>
<summary>曲婉婷</summary>
Anxiety首位签约加拿大*唱片公司Nettwerk的中国国籍女原创音乐人。
</details>

自定义有序列表

Ol有序列表,新增两个属性,reversed用于反转顺序也就是编程降序,start指定开始序号.

码农公寓

相关文章