文档章节

h5语义化标签

莫西摩西
 莫西摩西
发布于 09/21 17:15
字数 1214
阅读 8
收藏 0

语义化HTML:用最恰当的HTML元素标签做恰当的事情。

优点:

  1. 提升可访问性;
  2. SEO;
  3. 结构清晰,利于维护;
  • 通用容器:div——块级通用容器;span——短语内容无语义容器。
  • <title></title>:简短、描述性、唯一(提升搜索引擎排名)。
    • 搜索引擎会将title作为判断页面主要内容的指标,有效的title应该包含几个与页面内容密切相关的关键字,建议将title核心内容放在前60个字符中。
  • h1~h6分级标题,用于创建页面信息的层级关系。
    • 对于搜索引擎而言,如果标题与搜索词匹配,这些标题就会被赋予很高的权重,尤其是h1。
  • <header></header> :页眉通常包括网站标志、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。
  • <nav></nav>:标记导航,仅对文档中重要的链接群使用。
    • html5规范不推荐对辅助性页脚链接使用nav,除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。
  • <main></main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
  • <article></article>:包含像报纸一样的内容= =||是这么理解的,表示文档、页面、应用或一个独立的容器。
    • article可以嵌套article,只要里面的article与外面的是部分与整体的关系。
  • section></section>:具有相似主题的一组内容,比如网站的主页可以分成介绍、新闻条目、联系信息等条块。
    • 如果只是为了添加样式,请用div!
  • <aside></aside>:指定附注栏,包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。
    • 如果放在main内,应该与所在内容密切相关。
  • `<footer></footer>:页脚,只有当父级是body时,才是整个页面的页脚。
  • `<small></small>:指定细则,输入免责声明、注解、署名、版权。
    • 只适用于短语,不要用来标记“使用条款”、“隐私政策”等长的法律声明。
  • <strong></strong>:表示内容重要性。
  • <em></em>:标记内容着重点(大量用于提升段落文本语义)。
  • <mark></mark>:突出显示文本(yellow),提醒读者。
    • 在HTML5中em是表示强调的唯一元素,而strong则表示重要程度。
  • <b></b>:出于实用目的提醒读者的一块文字,不传达任何额外的重要性
  • <i></i>:不同于其他文字的文字= =|||这个翻译真的是······
  • <figure></figure>:创建图(默认有40px左右margin)。
  • <figcaption></figcaption>:figure的标题,必须是figure内嵌的第一个或者最后一个元素。
  • <cite></cite>:指明引用或者参考,如图书的标题,歌曲、电影、等的名称,演唱会、音乐会、规范、报纸、或法律文件等。
    • 只用于参考源本身,而不是从中引述。
  • <blockquoto></blockquoto>:引述文本,默认新的一行显示。
  • <q></q>:短的引述(跨浏览器问题,尽量避免使用)。
    • 可以对blockquoto和q元素使用cite属性(不是cite元素!),对搜索引擎自动化工具有用。cite=“URL”引述来源地址。
  • <time></time>:标记时间。datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。      不再相关的时间用s标签。
  • <abbr></abbr>:解释缩写词。使用title属性可提供全称,只在第一次出现时使用就ok。
    • abbr[title]{ border-bottom:1px dotted #000; }
  • <dfn></dfn>:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。
  • <address></address>:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。
    • 如果提供整个页面的作者联系信息,一般放在页面级footer里。不能包含文档或者文档等其他内容。
  • <del></del>:移除的内容。
  • <ins></ins>:添加的内容。
    • 少有的既可以包围块级,又可以包围短语内容的元素。
  • <code></code>:标记代码。包含示例代码或者文件名
  • <pre></pre>:预格式化文本。保留文本固有的换行和空格。
  • <meter></meter>:表示分数的值或者已知范围的测量结果。如投票结果。
    • 例如:<meter value="0.2" title=”Miles“>20%completed</meter>
  • <progress></progress>:完成进度。可通过js动态更新value。

© 著作权归作者所有

共有 人打赏支持
莫西摩西
粉丝 5
博文 125
码字总数 46777
作品 0
广州
程序员
2018-05-24 H5新元素搭建个人博客(仿Ghost开源)

一、语义化元素 1.1 HTML5出来之前,我们往往使用div元素来将网页分成一个个大小不一的区域,尽管可以添加class属性、id属性,然后通过在css当中对class属性、id属性添加样式,但是这些div元...

瑾瑜爱上猫
05/23
0
0
2017.12.21-学习笔记:面试问题之H5C3有哪些新特性?

前言:面试中经常遇到,说一下H5C3新增了哪些?我们一般会回答其中某一些,例如header,footer,border-radius,transform等。这样回答非常杂乱无章,其实面试官想要的答案是逻辑性的把各个属...

演员小新
2017/12/21
0
0
一周一章前端书·第13周:《HTML与CSS进阶教程》S01E02

第2章 语义化 2.1 语义化简介 HTML的精髓在于标签的语义。大部分标签都有它自身的语义,比如标签,表示paragraph,一个段落;,表示header level 1,一级标题。 前端的三大核心技术HTML、CSS...

梁同学de自言自语
01/13
0
0
HTML5你必须知道的28个新特性

HTML5有很多的新功能.新代码.非常不错.现在总结一下.仅供参考 1. 新的Doctype 尽管使用,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用 和 来语义化地表示带标题的图片 This...

ty2538402559
2017/07/12
0
0
HTML、CSS、Javascript基础及规范

百度JavaScript/HTML/CSS编码规范: JavaScript: http://gitlab.baidu.com/fe/spec/blob/master/javascript.md HTML: http://gitlab.baidu.com/fe/spec/blob/master/html.md CSS: http:/......

页疑
2014/09/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
14
2
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部