标签语义化:
语义和默认款式的区别:
- 默认款式是浏览器设定的一些罕用tag的表现形式;
- 语义化的次要目标就是让大家直观的意识标签和属性的用处和作用;
标签语义化作用:
- 当只有HTML页面时,没有CSS,咱们依然能够很清晰的看懂页面的DOM构造
- 团队保护,当团队来review代码或者重构时,加强代码的可读性,更利于保护
- 有利于SEO,搜索引擎爬虫依赖于标签来确定上下文和各个关键字的权重
- 进步用户体验,比方 title 和 alt 等用来解释内容信息
罕用语义化的标签:
<header>
头部标签,用来写网页最上方的公共头部,也就是页眉。
<header> <h1>一级题目</h1> <h2>二级题目</h2></header>
<nav>
标签,用来写导航,个别写在<header>
标签外面,外部用<ul>
无序列表。
<nav> <ul> <li></li> <li></li> <li></li> </ul></nav>
<code>
:code能够包裹html语句而不会被浏览器再去解析。<pre>
,<samp>
:这是一段HTTP协定的内容形容,因为这段内容的换行是十分严格的,所以咱们不须要浏览器帮咱们做主动换行,因而咱们应用了pre标签,示意这部分内容是事后排版过的,不须要浏览器进行排版。<article>
标签,当咱们要写网页文章的次要内容时,要用到这个标签。
<article> <h2>题目</h2> <p>内容</p></article>
<address>
标签,定义文档作者或拥有者的分割信息。
如果 <address>
元素位于 <article>
元素外部,则它示意该文章作者或拥有者的分割信息。
通常的做法是将 address 元素增加到网页的头部或底部。
<p>
段落标签
晓得了<p>作为段落,你就不会再应用<br/>
来换行了,而且不须要<br/>
来辨别段落与段落。<p></p>
中的文字会主动换行,而且换行的成果优于<br/>
。
<p>段落内容</p>
<span>
标签
<span>
标签的语义为被用来组合文档中的行内元素
<b>
、<em>
、<strong>
<b>
标签语义为“加粗”
<em>
标签语义为“强调”
<strong>
标签语义为“更强烈的强调” 而且em 默认用斜体示意,strong 用粗体示意。