• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • html5 语义化

    版本:HTML5

    语义化的标签,旨在让标签有自己的含义。HTML5赋予网页更好的意义和结构。HTML结构语义化,是最近几年才提出来的,开发者们和官方提出了让HTML结构语义化的概念,并且w3c也在HTML5给出了几个新的语义化的标签。

    <p>一行文字</p>
    <span>一行文字</span>
    

    如上代码,p标签与span标签都区别之一就是,p标签的含义是:段落。而span标签责没有独特的含义。

    语义化之后文档会有什么效果呢?就是你写的HTML结构,是用相对应的有一定语义的英文字母(标签)表示的,标记的,因为HTML本身就是标记语言。不仅对自己来说,容易阅读,书写。别人看你的代码和结构也容易理解,甚至对一些不是做网页开发的人来说,也容易阅读。

    怎么知道自己的页面结构是否语义化,那就要看HTML布局结构,在去掉CSS样式表之后,是否,依然能很好的呈现内容的代码结构。也就是说,去掉CSS的装饰之后,整个HTML的结构阅读起来依旧主次分明,能够看清其整体的架构模块。这也就是,语义化之后我们想要HTML文档达到的效果。

    其实语义化,也无非就是自己在使用标签的时候在合适的场景下选取合适的标签,比如h1~h5系列标签,在HTML中就是就是用来定义标题;而p标签,大部分情况下用以处理文字段落,table表格则适合做信息表格,等等。

    <header></header> 头部
    <nav></nav> 导航栏
    <section></section> 区块(有语义化的div)
    <main></main> 主要区域
    <artical></artical> 主要内容
    <aside></aside> 侧边栏
    <footer></footer> 底部
    

    我们对整个HTML结构进行语义化的规范操作有如下几个好处:

    • 这样有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
    • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以有意义的方式来渲染网页;
    • 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

    HTML5中新增的语义化标签进一步加强了我们针对整个HTML结构进行语义化跟进的可操作性,使得我们网页布局的可阅读性更高。

    常使用HTML语义化标签
    <title>页面主体内容。
    <hn>h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。
    <ul>无序列表。
    <li>有序列表。
    <header>页眉通常包括网站标志、主导航、全站链接以及搜索框。
    <nav>标记导航,仅对文档中重要的链接群使用。
    <main>页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
    <article>定义外部的内容,其中的内容独立于文档的其余部分。
    <section>定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
    <aside>定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
    <footer>页脚,只有当父级是body时,才是整个页面的页脚。
    <small>呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。
    <strong>和 em 标签一样,用于强调文本,但它强调的程度更强一些。
    <em>将其中的文本表示为强调的内容,表现为斜体。
    <mark>使用黄色突出显示部分文本。
    <figure>规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。
    <figcaption>定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。
    <cite>表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
    <blockquoto>定义块引用,块引用拥有它们自己的空间。
    <q>短的引述(跨浏览器问题,尽量避免使用)。
    <time>datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。
    <abbr>简称或缩写。
    <dfn>定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。
    <address>作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。
    <del>移除的内容。
    <ins>添加的内容。
    <code>标记代码。
    <meter>定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签)
    <progress>定义运行中的进度(进程)。

    article

    • article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等
    • artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。例如,一个博客文章,可以用article显示,然后一些评论可以以article的形式嵌入其中。
    <article>
    	<h1>文章标题</h1>
    	这是一篇文章
    	<article>评论1...</article>
    	 <article>评论2...</article>
    </article>
    

    section

    section 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

    <body>
    	<section>
    		<h1>章节一</h1>
    		 <p>详细内容...</p>
    	</section>
    	<section>
    		<h1>章节二</h1>
    		 <p>详细内容...</p>
    	</section>
    </body>
    

    aside

    aside 用来装载非正文类的内容。例如广告,成组的链接,侧边栏等等。

    <body>
    	<aside>
    		热门文章
    	</aside>
    	<aside>
    		广告
    	</aside>
    	<article>
    		<h1>文章标题</h1>
    		这是一篇文章
    		<article>评论1...</article>
    		<article>评论2...</article>
    	</article>
    </body>
    

    hgroup

    hgroup 标签用于对网页或区段的标题元素(h1-h6)进行组合。例如,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。

    <hgroup>
    	<h1>The reality dysfunction</h1>
    	<h2>Space is not the only void</h2>
    </hgroup>
    <hgroup>
    	<h1>Dr. Strangelove</h1>
    	<h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
    </hgroup>
    

    header

    header 标签定义文档的页面组合,通常是一些引导和导航信息。

    <header>
    	<p>this is the page Logo</p>
    	<nav>this is page navigation</nav>
    </header>
    

    footer

    footer 标签定义 section 或 document 的页脚。在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

    <footer> 
    	© 2012 Baidu 使用百度前必读 京ICP证000000号 
    </footer>
    

    nav

    nav 标签定义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接。例如在页脚显示一个站点的导航链接(如首页,服务信息页面,版权信息页面等等),就可以使用nav标签,当然,这不是必须的。

    <nav>
    	<ul>
    		<li><a href="articles">Index of all articles</a></li>
    		<li><a href="today">Things sheeple need to wake up for today</a></li>
    		<li><a href="successes">Sheeple we have managed to wake</a></li>
    	</ul>
    </nav>
    

    time

    time 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。

    <p>我们在每天早上<time>9:00</time>开始营业。</p> 
    <p>我在<time datetime="2020-02-14">情人节</time>有个约会。</p>
    

    mark

    mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

    <p>Do not forget to buy<mark>milk</mark>today.</p>
    

    figure

    figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

    <p>黄浦江上的的卢浦大桥</p>
    <figure>
    	<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
    </figure>
    

    figcaption

    figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    <figure>
    	<figcaption>黄浦江上的的卢浦大桥</figcaption>
    	<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
    </figure>
    

    上篇:html 元素

    下篇:html5 表单