文档章节

h5语义化标签

莫西摩西
 莫西摩西
发布于 09/21 17:15
字数 1214
阅读 9
收藏 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。

© 著作权归作者所有

共有 人打赏支持
上一篇: es6 let使用总结
下一篇: 关于css宽度分离
莫西摩西
粉丝 5
博文 125
码字总数 46825
作品 0
广州
程序员
私信 提问
2017.12.21-学习笔记:面试问题之H5C3有哪些新特性?

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

演员小新
2017/12/21
0
0
2018-05-24 H5新元素搭建个人博客(仿Ghost开源)

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

瑾瑜爱上猫
05/23
0
0
一周一章前端书·第13周:《HTML与CSS进阶教程》S01E02

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

梁同学de自言自语
01/13
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
HTML5你必须知道的28个新特性

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

ty2538402559
2017/07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Caffe(二)-Python-自定义网络

这里我们用一个例子先来体验一下 首先定义一下我们的环境变量 $PYTHONPATH,我这儿是Windows开发环境,至于Windows Caffe怎么编译由读者自己下去搞定 我使用的控制台是 Windows PowerShell 添...

Pulsar-V
29分钟前
2
0
ActiveMQ从入门到精通(二)之可靠性机制

ActiveMQ的可靠性机制 缘由( 确认JMS消息) 只要消息被确认之后,才认为消息被成功消费了。消息的成功消费包括三个阶段:客户端接收消息、客户端处理消息以及客户端确认消息。在事务性会话中...

一看就喷亏的小猿
37分钟前
0
0
源码分析 Mybatis 的 foreach 为什么会出现性能问题

背景 最近在做一个类似于综合报表之类的东西,需要查询所有的记录(数据库记录有限制),大概有1W条记录,该报表需要三个表的数据,也就是根据这 1W 个 ID 去执行查询三次数据库,其中,有一...

TSMYK
今天
7
0
IC-CAD Methodology企业实战之openlava

在云计算解决安全问题并成为IC界主流运算平台之前,私有的服务器集群系统仍然是各大IC公司的计算资源平台首选。 现在主流的服务器集群管理系统包括lsf,openlava,SkyForm,三者都属于lsf一系...

李艳青1987
今天
5
0
http response stream 字节流 接收与解码

在接收图片、音频、视频的时候,需要用到二进制流。 浏览器会发给客户端 字节Byte流,一串串的发过来_int8格式 -128~127(十进制),也就是8bit(位)。 客户端接收的时候,对接收到的字节收集,...

大灰狼wow
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部