浅谈html语义化标签,Html5新增语义化标签_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:49:40
Original
1271 Leute haben es durchsucht

  Html语义化标签,Html5新增语义化标签

自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全.

希望大家有新的见解可以给我留言,我会补充上去,谢谢大家

1.什么是语义化标签?

那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如,

网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。

文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等。

 

2.为啥使用语义化标签?

1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容。

3. 能够更好的体现页面的主题

4.兼容性更好,支持更多的网络设备

3.html语义化标签

1):标签:实现超链接

强调:title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)

 

2):

标签:文章段落放到

标签中

 

3):标签:文章标题,栏目标题用表示

 标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。

是最高的等级。

 

4):标签:特别强调某几个文字

但两者在强调的语气上有区别: 表示强调, 表示更强烈的强调。并且在浏览器中 默认用斜体表示,粗体表示。

两个标签相比,目前国内前端程序员更喜欢使用表示强调。

 

5):标签:短文本引用

 注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号

 

6):

标签:长文本引用

注意浏览器对blockquote>标签的解析是缩进样式

 

7):

标签:为网页加入地址信息

 

8):

    标签:无序列表

     

    9):

    标签:有序列表

     

    10):

    标签:为表格添加标题和摘要

    摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

        语法:

    标题用以描述表格内容,标题的显示位置:表格上方。

        语法:

     

     4.Html5语义化标签

     1):article标签:装载显示一个独立的文章内容。

    例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等 artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。

    例如,一个博客文章,可以用article显示,然后一 些评论可以以article的形式嵌入其中。

    <article><h1>文章标题</h1>这是一篇文章   <article>评论1...</article>    <article>评论2...</article></article>
    Nach dem Login kopieren

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

    实例:

    <section>   <h1>章节一</h1>    <p>详细内容...</p></section><section>   <h1>章节二</h1>    <p>详细内容...</p></section>
    Nach dem Login kopieren

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

    4):hgroup 标签:用于对网页或区段的标题元素(h1-h6)进行组合。

    例如,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。

    <hgroup><h1>标题1</h1><h2>标题2</h2></hgroup>
    Nach dem Login kopieren

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

    6):footer 标签:定义 section 或 document 的页脚。

      在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

    实例:

    <footer> &copy; 2012 Baidu 使用百度前必读 京ICP证030173号 </footer>
    Nach dem Login kopieren

    7):nav 标签:导航链接放在nav标签里。

    nav标签里应该放入一些当前页面的主要导航链接。

    例如在页脚显示一个站点的导航链接(如首页,服务信息页面,版权信息页面等等),就可以使用nav标签,当然,这不是必须的。

    8):time 标签:定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。

    该元素能够以机器可读的方式对日期和时间进行编码,搜索引擎也能够生成更智能的搜索结果

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

    10):figure标签:规定独立的流内容(图像、图表、照片、代码等等)。

    figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

    11):figcaption 标签:定义 figure 元素的标题(caption)。

    "figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    实例:

    <figure> <figcaption>美女图片</figcaption> <img  src="meizi.jpg"    style="max-width:90%"  style="max-width:90%" / alt="浅谈html语义化标签,Html5新增语义化标签_html/css_WEB-ITnose" ></figure>
    Nach dem Login kopieren

     

    标题文本
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage