HTML5页面的基本框架结构

生成页面的基本框架主要还是在head标签中增加一些基本的标签

1.<title></title>标签

<title>标签顾名思义，为标题，名字的意思，也就是设置网页在显示栏显示的标题。

2.<meta charset="UTF-8">

在<meta>里charset="UTF-8"表示该网页的国际编码，也是使网页用浏览器打开时显示的是中文的信息，不是乱码。

3.<meta name="keywords" content="关键词，关键字">

name="keywords",表示关键词，关键字的意思，在content里输入的也是关键词，关键字。用于网页的信息在搜索引擎中显示，更容易找到你的网页。

比如说：当你在百度搜索框里输入一些像“美女”之类的信息时，下拉框下面就会自动跳出“美女图片、美女视频、美女热舞”之类的信息。这些就是关键词，关键字。

4.<meta name="description" content="描述网页的信息">

name="description",表示描述，描写，在content里输入描述网页信息这些内容。

比如说：你在百度搜索框里输入“北京大学”然后点击搜索，在显示出来的所有信息中，有标题“北京大学_百度百科”下面校标旁边的信息就是网页的描述信息了。

5.<meta name="viewport" content="width=device-width,initial=1.0,user-scalable=0">

name="viewport",viewport在网页移动端中不可缺少，关于viewport和其中的一些参数具体介绍下：

viewport介绍：

1）一个百分百的页面在移动设备浏览的时候网页的宽度没有和设备的宽度一致

2）因为在移动设备中浏览器和网页之间还有一层虚拟的容器叫viewport

3）原来承载网页的，而且主流的设备当中的viewport宽度默认是980px，

可以缩放，可以设置尺寸，只在移动设备中才有。

所以使用viewport和流式布局达到移动端的适配:

1.设置viewport
	<meta name="viewport" />//声明一个视口(浏览器默认自带)

2.具体功能设置(常用参数设置)
	width:设置视口的宽度
	特殊的值为device-width,代表当前设备的宽度,允许网页随设备宽度的变化而变化,单位为px
	<meta name="viewport" content="width=device-width"/>
	initial-scale:设置视口的默认缩放比
	设置缩放比的值initial-scale=1.0,可以保证缩放比一致,大于0小于1缩小,大于1放大
	<meta name="viewport" content="initial-scale=1.0"/>
	user-scalable:设置是否允许用户自行缩放
	设置值为0(no)为禁止用户自行缩放,1(yes)代表允许
	<meta name="viewport" content="user-scalable=0"/>
	minimum-scale:最小允许缩放比
	<meta name="viewport" content="minimum-scale=1.0"/>
	maximum-scale:最大允许缩放比
	<meta name="viewport" content="maximum-scale=1.0"/>

viewport中的参数不一定每个都要设置，具体根据自己情况设置，上面的<meta>标签里设置是比较常用的

6.<meta http-equiv="X-UA-Compatible" content="ie=edge">

http-equiv="X-UA-Compatible"：是ie的一个专有属性，它告诉ie需要用何种版本去渲染网页

ie=edge：因为edge为最新的浏览器，所以表示用最新的浏览器引擎渲染网页。

下面就是html5的页面基本框架结构：

<!--声明文档类型为HTML5-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML5基本框架</title><meta name="keywords" content="关键词，关键字"><meta name="description" content="描述网页的信息"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"></head><body><script></script></body>
</html>