生成页面的基本框架主要还是在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>