1. HTML语义标签
语义类标签是纯文字的补充，如标题、自然段、章节、列表等。<section>、<p>、<nav>。
现代互联网产品中，HTML描述"软件界面"多过"富文本"，而软件界面里的东西，几乎是没有语义的。在任何"软件界面的场景中"，可以直接使用div和span。
语义标签的优点：在很多工作场景里，正确地使用语义标签可以带来很多好处：
- 对开发者更为友好。
使用语义标签能增强可读性，在没有css的时候 开发者也能清晰地看出网页的结构，便于团队的开发、维护； - 对机器友好。
语义标签适合机器阅读，它文字表现力丰富，能够让搜索引擎（SEO）爬虫获取到更多有效信息，有效提升网页的搜索量；支持杜平软件，可以根据文章自动生成目录。
以下几个比较重要的语义标签的使用场景：
作为自然语言的延伸
作为自然语言和纯文本的补充，用来表达一定的结构或消除歧义
<ruby>、<rt>、<rp>、
<em>
<!-- rt内为注解，rp内为浏览器不支持ruby时展示的内容-->
<ruby>
漢<rt>hàn</rt><rp>(hàn)</rp>
</ruby>
<!-- em内表示重音 -->
<p>你今天需要吃掉<em>这个</em>鸡蛋</p>
文章标题摘要
HTML应支持 文章的结构的区分。语义化的HTML能够支持自动生成目录结构。
一篇文档会有一个属性的目录结构，由各级标题组成，此树形结构可能与HTML元素的嵌套关系不一致。
<h1>~<h6>、<hgroup>
<section>
<!-- <hgroup>中的<h1>~<h6>，被认为是同一标题的不同组成部分
主标题——副标题,注意此处只是语义上的表达，实际展示效果不会变成这个样子 -->
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
<!-- section能改变h1~h6的语义 ，使它们下降一级 -->
适合机器阅读的整体结构
越来越多的浏览器退出的"阅读模式"，以及各种非浏览器终端的出现，语义化的HTML适合机器阅读的特性变得越来越重要。能让浏览器很好的支持"阅读视图功能"，提升搜索引擎的命中率，对视障用户的读屏软件更加友好。
<header>、<nav>、<aside>、<footer>、<address>
<article>
<body>
<header>
<nav>文章自己的目录</nav>
</header>
<aside>
<nav>侧边栏导航或关联页面</nav>
</aside>
<section>章节内容</section>
<footer>
<address>作者的联系方式</address>
</footer>
</body>
/* article 是有一定独立性质的文章，与body有相似结构*/
<body>
<header></header>
<article>
<header></header>
<section></section>
<section></section>
<footer></footer>
</article>
<article>
<header></header>
<section></section>
<section></section>
<footer></footer>
</article>
<footer>
<address>作者的联系方式</address>
</footer>
</body>
2. 元信息类标签
所谓元信息，是指描述自身的信息，
元信息类标签就是HTML用以描述文档自身的一类标签。通常在head标签中，不会在页面中显示出来。
元信息类标签多数情况下是给浏览器、搜索引擎等机器阅读的，有时这些信息会在页面之外展示给用户。
head 标签 —— 元信息的容器
必须是html标签中的第一个标签（若head前面有标签，浏览器解析的时候 ，head标签中的内容会被移到body中），
内容需包含一个title标签（文档作为iframe或有其他方式指定了文档标题时，可不包含title）（多个title时 只有一第一个生效），
最多只能包含一个base（页面中所有相对链接的基准URL）（多个base时 只有第一个生效）。
title 标签 —— 文档标题
<head>
<title>文章标题</title>
</head>
base 标签 —— 页面的基准URL
可以改变全局的相对链接地址。不建议使用哦。
<head>
<title>文章标题</title>
<base href="/test/">
</head>
meta 标签 —— 元信息通用标签
meta标签是一组键值对，是一种通用的元信息表示标签。
meta标签中的name表示元信息名，content表示元信息的值
charset 属性
<meta charset="utf-8">
http-equiv 属性
有http-equiv属性的meta标签，表示执行一个命令，不需要name属性
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
除了content-type， 还有以下几种命令：
- refresh 刷新
- default-style 指定默认样式表
- contetn-language 指定内容的语言
- set-cookie 模拟http头的set-cookie，设置cookie
- x-ua-compatible 模拟http头x-ua-compatible，声明ua兼容性
- content-secure-policy 模拟http头 content-secure-policy，声明内容安全策略
- ......
tips:http-equiv与name的区别
http-equiv一般是帮助浏览器精确地显示页面想表达的内容；
name主要是对网页的描述，给搜索引擎看的
name为viewport
没有在HTML标准中定义，却是移动端开发的事实标准
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=0">
其他预定义的meta
<meta name="keywords" content="key1,key2">
<meta name="description" content="网站主要内容的描述">
<meta name="author" content="页面作者">
<!--
no-referrer 请求不发送referrer;
no-referrer-when-downgrade 安全级别下降时不发送referrer,如从https到http的资源引用和链接跳转都不会发referrer
origin 仅发送origin信息（协议+域名）；
strict-origin 安全级别下降时不发送referrer，同等安全级别 仅发送origin信息
same-origin 同源（协议+域名+端口号）的资源引用和链接跳转会发referrer，其他的不会
origin-when-cross-origin 同源的资源引用和链接跳转会发完全的referrer，非同源仅发送origin信息
strict-origin-when-cross-origin 同源的资源引用和链接跳转会发完全的referrer，安全级别下降时不发送，其他情况仅发送origin信息
unsafe-url 无论是否降级，是否同源，都发送完全的referrer信息
-->
<meta name="referrer" content="origin">
<!-- 调整页面之外的ui ，窗口边框或tab的颜色 -->
<meta name="theme-color" content="#23A9F2">
<!--生成页面所使用的工具，主要用于可视化编辑器 -->
<meta name="generator" content="信息参数">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">
<!-- 关闭iOS上的内容识别 -->
<!-- 以下未验证 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 默认使用最新浏览器 -->
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 不被网页(加速)转码 -->
<meta name="robots" content="index,follow">
<!-- 搜索引擎抓取 -->
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 设置苹果工具栏颜色 -->
网友评论