关于HTML的语义化

通俗来说,就是在编写html代码时用上更加精准的标签来编写,是内容结构化、更加方便语言的解析和开发者来阅读。
对于为什么要学习html的语义化,每个人都要有一套自己的代码规范,这也是自己进阶和学习的必经之路。尽然在编程上要鞭策自己,在规范上当然也不能怠慢自己。

关于html语义化的优点:

1、易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
2、有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
3、方便其他设备解析,如盲人阅读器根据语义渲染网页
4、有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。

而在Html5中,加入了很多用于“布局”的标签,他们有 <header>、 <nav>、 <section>、 <article>、 <aside>、 <footer>、 <hgroup>等等。

<header>
在vue中这是一个头部组件,而在html中也是对于文档页眉的定义

<nav>
顾名思义就是导航栏,在html中也是在这个标签内定义导航链接的内容

<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

<section>
就是定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
但是它和article标签非常相似,怎么说,article是属于比较特殊的section标签。原则上来说,能使用article的时候,也是可以使用section的,但是实际上,假如使用article更合适,那么就不要使用section。它主要还是用作一段有专题性的内容,一般在它里面会带有标题。 section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。section元素用于对网站或应用程序中页面上的内容进行分块,section元素的作用是对页面上的内容进行分块,或者说对文章进行分段;

<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p>
</section>

<article>
是规定独立的自包含内容。像上面section说的那般,能用article包装的肯定优先使用article。article元素表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9(简称 IE9)于 2011314 日发布.....</p>
</article>

<aside>
关于这个标签实际上就是在html页面中插入一些相对于独立,和其他页面无关的内容,被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容,在插入的地方一般要与附近的内容有关。

<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>

<footer>
footer是定义最近一个章节内容或者根节点元素的页脚。相对于header标签而言,这就是回应文档页眉的页脚,就是一个文档的结束,通常在页脚处存放的都是一些章节作者、版权数据或者与文档相关的链接等信息。可以内插<address>来插入联系方式。

<hgroup>
标签用于对网页或区段(section)的标题进行组合,也是h5新增的标签。

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>
发布了14 篇原创文章 · 获赞 0 · 访问量 90
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览