HTML5文档结构标签框架：
一、<DOCTYPE>标签简介：
1)、什么是DOCTYPE
DOCTYPE标签是一种标准通用标记语言的文档声明。
DOCTYPE是Document Type(文档类型)的简写，在页面中指定页面所用的HTML（或是XHTML）的版本。
如果一个页面没有声明DOCTYPE，浏览器就会以默认的DOCTYPE解释HTML页面。在同一种标准下，不同的浏览器解释模型都有所差异，如果声明的标准不同，浏览器所渲染的页面也会不同，这样会造成页面的不兼容。
2)、DOCTYPE的规则：
DOCTYPE声明的写法遵循一定的规则，它指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是w3c所发布的一个文档类型定义（dtd）中包含的规则。每个dtd都包括标记、attributes、properties等内容，它们用于标记web文档的内容；此外还包括一些规则，它们规定了哪些 标记能出现在其他哪些标记中。每个web建议标准（比如html 4 frameset和xhtml 1.0 transitional）都有自己的dtd。
3)、DOCTYPE的选择：
XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。这里分别介绍如下。
(1)、过渡的：
一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）。过渡的DTD的写法如下：
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2)、严格的：
一种要求严格的DTD，不允许使用任何表现层的标识和属性，例如<br/>等。严格的DTD的写法如下：
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)、框架的：
一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
二、meta标签：
1)、设定字符集
<meta charset="utf-8">
charset属性用来指定页面所用的字符集编码：
ASCII码：一共规定了128个字符的编码，因为128个字符不够用所以出现了后面的编码
GB2312：双字节编码，也有说法表示这是一个简体中文的字符编码
GBK：这是在GB2312的拓展版本，它涵盖了简体中文和繁体中文
Unicode：是一个很大的集合，现在的规模可以容纳100多万个字符，但是unicode只是一个字符集，它只规定了符号的二进制代码，但是没有规定这个二进制代码要如何存储
utf-8：它是互联网上使用最广的Unicode的实现方法，它可以使用1~4个字节表示一个符号，根据不同的符号而变化子节的长度，它基本上涵盖了每一个国家的语言
2)、优先使用IE最新版和Chrome
<meta name="X-UA-Compatible" content="IE=dege, Chrome=1"> 注意：content的属性IE=6/7/8表示使用IE6/7/8
3)、浏览器的内核控制：
<meta name="Renderer" content="webkit"> 表示如果是双内核的浏览器（国内有很多的浏览器都是双内核的）就用webkit的内核渲染
4)、利于SEO的优化：
<meta name="Keywords" content="网页关键词"> 注意：标记不应超过 874 个字符
<meta name="Description" content="网页的描述"> 注意：每个网页的描述都不能超过150个字符
4)、移动设备：
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=yes/ no">
width: 宽度（数值/device-width）---- 范围从200px到10000，默认是980px
height：高度（数值/device-height）---- 范围从223到10000
initial-scale：初始的缩放比例（范围从>0到10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩放----值为yes或者no
5)、WebApp
<meta name="apple-mobile-web-app-capable" content="yes"> 表示启用webApp全屏模式
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 表示隐藏状态栏/设置状态栏的颜色-----但是这个值只有在设置了全屏模式下才会生效
content的值为default / black / black-translucent
<meta name="app=mobile-web-app-title" content="标题"> 表示添加到主屏后的标题
<meta content="telephone=no" name="format-detection"> 表示忽略数字自动识别为电话号码
<meta content="email=no" name="format-detection"> 表示忽略识别邮箱
三、lang属性：
写在html标签中的lang属性的作用：声明当前页面的类型 ---- lang属性中的语言代码不区分大小写
属性值：en表示英语 zh-CN表示中文 ---- 其他的语言貌似好像是英文的写法的前两个字母
但是也有说法说是lang有利于SEO的优化，但是我对这方面没什么研究，等懂了这方面后期会出这方面的文章
四、title标签
title标签里面的内容表示网页的标题，
------ 就是这个地址
至于上面的图标，会在后期的文章中说道。
五、head标签和body标签
head标签里面的内容是给浏览器看的，它里面的内容不会展示给用户，但是除了title标签除外
body标签里面的内容是可视区域，里面的内容是提供给用户看的。
【标明批注】：所写的内容是借鉴别人以及自己总结的，有不同意见的还请评论，探讨各自的观点。
扫一扫
8040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
