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