语义化

使用正确标签来表示正确的内容结构，比如要表示导航内容就是用nav标签
可以使页面结构化，结构更加的清晰，便于浏览器和搜索引擎解析
搜索引擎的爬虫也是要依赖于Html的标记来确定上下文关键字的权重，利于SEO优化
提高页面的可读性，很容易将页面区分各个块，便于阅读和理解

meta属性

声明文档使用的字符编码

<meta charset="utf-8">

声明文档兼容性

<meta httpp-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

SEO优化

<meta name="description" content="不超过150个字符" /> // 页面描述
<meta name="keywords" content="关键字"/>  // 页面关键词
<meta name="author" content="xxx" />定义网页作者
<meta name="robots" content="" />定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。

移动设备设置viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<!-- width viewport 宽度(数值/device-width)
  height viewport 高度(数值/device-height)
  initial-scale 初始缩放比例
  maximum-scale 最大缩放比例
  minimum-scale 最小缩放比例
  user-scalable 是否允许用户缩放(yes/no)
  minimal-ui iOS 7.1 beta 2 中新增属性，在页面加载时最小化上下状态栏
  viewport-fit 是为了控制文档是如何填充满屏幕的
              /* 关键值*/
              viewport-fit: auto; 此值不影响初始布局视图端口，并且整个web页面都是可查看的。
              viewport-fit: contain;视图端口按比例缩放，以适合显示内嵌的最大矩形
              viewport-fit: cover;视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。
-->

其他设置

<!-- 启用360浏览器的极速模式(webkit) -->  
<meta name="renderer" content="webkit">  
<!-- 避免IE使用兼容模式 -->  
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->  
<meta name="HandheldFriendly" content="true">  
<!-- 微软的老式浏览器 -->  
<meta name="MobileOptimized" content="320">  
<!-- uc强制竖屏 -->  
<meta name="screen-orientation" content="portrait">  
<!-- QQ强制竖屏 -->  
<meta name="x5-orientation" content="portrait">  
<!-- UC强制全屏 -->  
<meta name="full-screen" content="yes">  
<!-- QQ强制全屏 -->  
<meta name="x5-fullscreen" content="true">  
<!-- UC应用模式 -->  
<meta name="browsermode" content="application">  
<!-- QQ应用模式 -->  
<meta name="x5-page-mode" content="app">  
<!-- windows phone 点击无高光 -->  
<meta name="msapplication-tap-highlight" content="no">

Html语义化的理解以及meta的相关知识梳理

语义化

meta属性