meta标签
meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1、name属性
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
2、http-equiv属性
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新下载-->
<meta http-equiv="expires" content="0">
<!--禁止浏览器从本地机的缓存中调阅页面内容-->
<meta http-equiv="pragma" content="no-cache">
<!--清楚缓存，再访问这个网页需要重新下载-->
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
如何解决页面乱码问题？
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
charset=utf-8 页面字符集
link标签
可以在title上显示小图标
<link rel="shortcut icon" href="brand/images/sydj.ico">
link标签内引入媒体查询，加上属性
media=“screen and (min-width:1200px)"
a标签
a标签添加title属性可以提供SEO
返回页面顶部链接
<a href="#">返回页面顶部</a>
下载链接
a href="https://……这里放下载的链接" download>下载</a>
电话链接
// 手机的通话功能
<a href="tel:010-81205678">010-81205678</a>
Email 链接
// 调取邮箱功能
<a href="mailto:mobile@cnpc.com.cn">cnpc.com.cn</a>
HTML嵌套规则：
<a>不可以包含另一个a标签
p元素不能包含任意块元素
HTML5结构标签
结构标签（块状元素）-有意义的div
<article>标记定义一篇文章
<header>标记定义一个页面或一个区域的头部
<nav>标记定义导航链接
<section>标记定义一个区域
<aside>标记定义页面内容部分的侧边栏
<hgroup>标记定义文件中一个区块的相关信息
<figure>标记定义一组媒体内容以及它们的标题
<figcaption>标签定义figure元素的标题
<footer>标记定义一个页面或一个区域的底部
<dialog>标记定义一个对话框（会话框）类似微信
【注意】在一个文档中，不能出现一个以上的<main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header>或 <nav>。
新布局的意义
HTML5可以让很多更语义化的结构化代码标签代替大量的无意义的div标签，对搜索引起更友好。
1、这种语义化的特性提升了网页的质量和语义。
2、减少了以前用于css调用的class和id属性。
搜索
搜索引擎中页面的排名，title > h1 > h2
header、footer 头尾 section、article区域 nav导航 aside不重要的内容 figure > figuration、div 这会进入大纲算法
h5大纲工具,结构合理利于搜索引擎抓取http://h5o.github.io/
表单
fieldset 元素可将表单内的相关元素分组。
<fieldset>标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset>标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend> 标签为 fieldset元素定义标题。
type=file
// 只能上传安卓安装包
<input type="file" accept=".apk" >
// 只能上传苹果安装包
<input type="file" accept=".ipa" >
// 只能上传windows系统包装包
<input type="file" accept=".exe" >
type=hidden
<input type="hidden" name="csrf" value="123456oliver">
这一组代码在页面显示上没有任何效果，但点完“提交”后，这组代码里边的相关参数是会提交给后台的。
表单属性
1、autocomplete属性
autocomplete属性适用于<form>标签，以及以下类型的<input>标签：text，search，url，telephone，email，password，datapickers，range，color。
<form autocomplete="on"></form>
2、autofocus属性
规定页面加载时，域自动地获得焦点
autofocus属性适用于所有<input>标签的类型
<input type="text" autofocus = "autofocus/>
3、multiple属性
规定输入域中可选择多个值
PS：mutiple属性适用于以下属性的<input>标签：email和file以及select
4、placeholder属性
提供一种提示，描述输入域所期待的值
<input type="search" placeholder="Search Content"/>
PS:placeholder属性适用于<input>标签type属性值为：text，search，url，telephone，email，password。
5、required属性
规定必须在提交之前填写输入域（不能为空）
<input type = "text" required = "required" />
PS:requried属性适用于<input>标签type属性值为：text，search，url，telephone，email，password，date pickers，number，checkbox，radio，file。
