HTML的设计与元信息的探究-[基础篇]

了解html的设计，我觉得首先有两点必须要明确其中意思，特别对于初学者来说，需要从本质去考虑为什么html要这么设计，第一是html结构的语义化，第二是html的元信息。

一、HTML语义化

HTML设计

最初HTML的设计场景就是‘超文本’，早期设计的一群人是一群 出版界书籍排版的专家。 主要是用来便于人们的阅读，符合人们的阅读习惯。
可想而知，那么既然最初的设计师用来便于人们阅读的，那么HTML也就自然符合人们阅读的习惯，有标题，内容，侧边栏，等等。

语义化标签

HTML是计算机语言，所以每一个页面在设计的最初就类似于一篇文章，那么文章自然也就有导航，标题，侧边栏，页尾等等，而此时的计算机就是人的角色，
所以我们探究html的时候，就需要使用看文章的眼光去看待它，只不过他是计算机的预言，需要符合计算机的‘阅读习惯’，
我们的语义的标签这就是告诉计算机哪里是导航，标题，侧边栏，页尾等等，和看人类看待文章报纸时是一样的。

<header></header>头部

<nav></nav>导航栏

<section></section>区块（有语义化的div）

<main></main>主要区域，只出现一个

<artical></artical> 具有明确的主体内容

<aside></aside>侧边栏

<footer></footer>底部

上面这些是常见的语义化标签，也是告诉浏览器你的页面的每一个部分是什么。

当然我们这里只展示了几个常用的语义标签，是为了便于理解，为了浏览器和用户的阅读还有更多的标签。
我简单再展示一些比较常用的

<title>  //页面主体内容
<h1> ~ <h6>  // h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<p>  //段落文章
<strong></strong>  //字体加粗
<ul>  //无序列表
<ol>  //有序列表
<small>  //呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权
<em>   //将其中的文本表示为强调的内容，表现为斜体。
<figure>  //规定独立的流内容（图像、图表、照片、代码等等）
<figcaption>  //定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置
<cite>  //表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题
<blockquoto>  //定义块引用，块引用拥有它们自己的空间
<progress>  //定义运行中的进度
<abbr>  //表示缩写 比如 <abbr title='World wide Web'>WWW</abbr>
<hr> // 分割线，表示故事的走向，或者转变
。。。

大家看这些标签和描述就能很清晰的理解，语义化的意思就是以语言合理的行为去展示和叙述的意思。
还不理解的同学可以查找一些 典型的WIKI网页 去看看页面结构标签的使用。

什么时候用语义化标签

语义化标签并不是所有的地方都适用，其实一般的功能，或者简单的业务功能<div><span>这些已经足够使用了。
并且HTML这种语言，本身并不是非常严谨的，就像写文章一样，有一些语义的使用还会带来更多的分歧和争议，
所以在使用上尽量用自己所熟悉的常用的语义标签，在合理的地方，内容明确的地方使用。

语义化的好处

1. 代码上，结构清晰，利于项目的维护和共同开发，统一标准，减少维护时间和成本
2. 利于浏览器解析，和部分设备的解析，比如盲人阅读等等
3. 有利于SEO，语义化的标签有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重

二、HTML元信息

HTML自身的信息，而用来描述HTML自身信息的标签 则就是元信息类标签。标签的属性定义了与文档相关联的名称/值对。

元信息是关于信息的信息，用于描述信息的结构、语义、用途和用法等，其实也就是meta标签,位于文档的头部。
简单来说，就是我们需要告诉浏览器他应该按照什么规则去解析我们的文章。

meta 标签

name/content

meta标签是一组键值对，他是一种通用的元信息表示标签，也就是name / content。

基本用法：

//百度网页 随便复制的一组
<meta name="theme-color" content="#2932e1"> 
// 表示：页面风格颜色，实际并不影响页面，但是浏览器会根据此约定调整页面之外的颜色，比如窗口边框等等

<meta name="参数"content="具体的参数值">。 
// name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

上述代码顾名思义就是 页面所在的 theme-color 是#2932e1
首先我们要明白，这里的name是一种自由的约定，并不是绝对的值，白话文的意思就是你可以随意的去定义。

既然是约定 那么自然就有了通俗的约定，也就是大家都会准守的，比如：

//keywords用来告诉搜索引擎你网页的关键字是什么。
<meta name="keywords"content="meta总结,html meta,meta属性,meta跳转">   

//description用来告诉搜索引擎你的网站主要内容。
<meta name="description"content="XX的博客"> 

//robots(机器人向导)
<meta name="robots"content="none"> 

//author(作者)
<meta name="author"content="root,root@xxxx.com"> 

上面这些只是常用的其中一部分，也就是我们用来定义网页信息的基本情况的一些约定。

这里有一个常用，并特殊的，就介绍一下。就是name 为 viewport的mate

这个约定并没有定义在HTML标准中，但是却是移动端开发所准守的事实标准

<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'>

width 页面宽度
height 页面高度
initial-scalse 初始缩放比例
minimum-scale 最小缩放比例
maximum-scale 最大缩放比例
user-scalable 是否允许用户缩放

上面这一个meta应该是很常见的

http-equiv属性 ttp-equiv/content

具有http-equiv属性的meta标签，表示执行一个命令，它可以传递给浏览器一些命令信息，也就是对应的content。

<meta http-equiv="参数"content="参数变量值">

//：举个例子
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
//它的参数是 content-type ，告诉了浏览器内容的解析‘content-type’ 需要‘text/html; charset=UTF-8’格式去解析

它还有常用一些命令：
default-style 指定默认样式表；

<meta http-equiv="default-style" content="the document's preferred stylesheet">
注释：上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。

refresh 定义文档自动刷新的时间间隔。

<meta http-equiv="refresh" content="300">
注释：值 "refresh" 应该慎重使用，因为它会使得页面不受用户控制

keywords 关键字,给搜索引擎用的

<meta http-equiv="keywords" content="keyword1,keyword2">

Cache-Control 清除缓存（再访问这个网站要重新下载！）

<meta http-equiv="Cache-Control" content="no-cache"/>

content-language指定内容的语言;
set-cookie模拟http头set-cookie,设置cookie；
等等

本章总结：HTML就像一篇文章，只是阅读的角色由人变为了机器，所以我们需要站在机器的角度去思考怎么编写会更容易去理解它，为了文章结构清晰和提取信息，我们需要进行语义化的编写，而元信息标签则是对文章的表述标签，我们需要明确告诉它（浏览器）该怎么去解析我们的文章，它才会跟根据你所约定的信息进行编译和解析。