一、 页头
 
1、<!DOCTYPE HTML>  告知浏览器文档所使用的HTML规范
档类型声明简写
让CSS样式表生效，DOCTYPE声明是必须的，以前TABLE布局的网页可能DOCTYPE可以省略也可以正常显示。但在DIV CSS布局中虽然DOCTYPE就一段代码却至关重要，影响CSS样式是否生效。少了DOCTYPE html声明有的CSS样式仍是生效，但有的CSS样式是失效的。所以DOCTYPE是必不可少的。
兼容所有浏览器，不用考虑因为简写照成兼容问题、html乱码问题。
 
2、 HTML5支持的两种指定页面使用的字符集的方式
　　使用Content-Type指定字符集
　　<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
　　直接使用charset指定字符集
　　<meta charset="UTF-8">
 
3、<meta/>
　　1、定义关于HTML文档的元数据。 重要的属性有三个：http-equiv、name、content
 
　　2、在一个网页中meta标签常常被用做网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签。
　　　　2.1网页制作者信息 
　　　　　　<meta name="author" content="Evance" />　　　　2.2网页关键字声明（搜索引擎优化地方） 
　　　　　　<meta name="keywords" content="abc,xxx,defg,xyz" />　　　　2.3网页简介说明（搜索引擎优化地方）
　　　　　　<meta name="description" content="简介内容如本页div+css教程之meta标签说明-www.divcss5.com" />　　　　2.4防止别人在框架里调用你的页面
　　　　　　<meta http-equiv="Window-target" content="_top" />
　　　　2.5自动跳转（此标签用法可以让网页在多少秒后自动从当前页面跳转到另外一个网页页面或网站）
　　　　　　<meta http-equiv="Refresh" content="5;URL=http://www.divcss5.com" />　　　　　　　　　　Content后跟值为当前页面在多少时间跳转；Url值为跳转到具体网页网站
　　　　2.6网页告诉搜索机器人向导对此网页操作（用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引）
　　　　　　<meta name="robots" content="all" /> 
　　　　content的参数有all,none,index,noindex,follow,nofollow。默认是all。　　　　如果在一个页面不加入此标签默认情况下content="all"意思是搜索并收录抓取爬行此网页及此网页指向页面。
　　　　
　　　　2.7搜索引擎：robots取值
　　　　　　none :搜索引擎将忽略此网页，等价于noindex，nofollow。 
　　　　　　noindex ;搜索引擎不索引此网页。 
　　　　　　nofollow :搜索引擎不继续通过此网页的链接索引搜索其它的网页。 
　　　　　　all :搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
　　　　　　index :搜索引擎索引此网页。
　　　　　　follow 
　　　　
　　　　2.8http-equiv把content属性值关联到http头部。
　　　　　　Content-Type（浏览器接受的文档类型，一般是text/html）
　　　　　　refresh（网页刷新，以秒为单位）
　　　　　　expires（设定网页到期时间，一旦过期，必须到服务器上重传）
　　　　　　<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
　　　　　　<meta http-equiv="Refresh" content="2">
　　　　　　<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
　　　　　　<meta http-equiv="expires" content="6 Jun 2016"/>
例：
　　　　　　<meta name="keywords" content="度小满，度小满金融，百度金融，金融，金融服务事业群组，FSG">
　　　　　　<meta name="description" content="度小满金融，原百度金融。2018年4月，百度宣布旗下金融服务事业群组正式完成拆分融资协议签署，实现独立运营。度小满金融作为一家金融科技公司，在智能金融时代，将充分发挥百度的AI优势和技术实力，携手金融机构合作伙伴，用科技为更多人提供值得信赖的金融服务。">
 
　　3、页面都添加<meta>标签，从而通知 IE 采用其所支持的最新的模式。
　　　　<meta http-equiv="X-UA-Compatible" content="IE=Edge">
　　　　<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
4、显示字符集网页编码　
　　简体中文：  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
　　中文：        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　繁体中文： <meta http-equiv="Content-Type" content="text/html; charset=BIG5" />
　　英 语：       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
5、<title>标题标签
　　一个html网页里只能有一个标题标签作为唯一标题显示。
　　网页标题标签与SEO关系： 
　　对于一个网页在搜索引擎上某关键字排名因素，很大部分是标题标签<title>是否含有此关键词，由此看出在网页中标题标签重要同样在搜索引擎排名上标题标签同样非常重要。
 
6、<link/>
　　引用外部文档，常见于引用外部样式。重要属性有三个：rel、href、type。
　　rel规定文档与被链接文档之间的关系。
　　rel="dns-prefetch" 预先解析缓存文档中使用的域名，目的是为了提高网页访问速度。使用场景：在一个网页频繁使用其他域名资源时。
　　rel="shortcut icon"或rel="icon" 在收藏和标题栏上用于显示的图标。示例：<link rel="icon" href="">。
 
　　注意：IE浏览器只支持ico格式，为了兼容IE，图片文件采用ico格式。
 
　　rel="stylesheet" 引用外部样式表。
　　rel="nofollow" 用于指示搜索引擎不要追踪（爬虫抓取），减少垃圾链接。用于<a>标签，使用场景：网页不被信任或是不希望呗搜索引擎录入的网站。
　　href资源的路径（相对路径/绝对路径）。
　　type规定被连接文档的MIME类型，用于明确文件的打开方式。例如：.ico文件 image/x-icon。
　　特别说明<link>标签不一定必须放置在<head></head>标签内,可以适当放置在<body>下</body>以上部分，效果相同，但是推荐标准的放置在head标签内。
 
7、<style>标签
　　1、放置CSS样式
　　　　<style type="text/css"></style>中间用于放CSS样式代码。
　　　　在HTML中CSS代码只有放置在其<style type="text/css">标签内才能生效。　　2、放置JS代码
　　　　<style type="text/javascript"></style>
　　　　在HTML中JS代码一般放入<style type="text/javascript">标签内 
8、基本标签
 
　　1、<a> 超链接标签(锚标签)
　　　　重要属性有三个：href、target、name
　　　　href超链接地址：可以是Web上任意资源，包括图片，网页，样式，脚本文件等。href="#"时，表示被链接页面就是当前页面。
　　　　target文档打开时要显示的目标位置，属性值一般有：
　　　　_blank（新窗口中打开）、
　　　　_self（默认，在超链接所在的容器中打开）、
　　　　_parent（在超链接的父容器中打开）、
　　　　_top（整个容器中打开）、name（框架名称）。
　　　　所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
 
2、<img> 图形标签
　　　　行级标签，用来显示图片。
　　　　重要属性有：src、title、alt、width、height、align。
　　　　src图片地址。
　　　　title鼠标悬浮在图片上的文字。
　　　　alt图片找不到时要替换的文字。如果图片资源使用的是外网资源，则不会显示要替换的文字。如果使用的是本网站的资源（相对路径给出），则找不到图片时会显示替换的文字，并保留图片设置的宽高结构。
　　　　align图片周围文字的垂直对齐情况。常用的属性值有：top（与图片的顶部对齐）、middle（与图片的中部对齐）、bottom（默认，与图片的底部对齐）。
　　　　width图片的宽
　　　　height图片的高 (宽高两个属性只用一个会自动等比缩放.)
　　　　<img src="" alt="图片加载失败。。。" title="The knife girl, kiss"/>