<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
<body>
页面的主体内容
</body>
</html>
1. DOCTYPE
<!DOCTYPE> 文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html>告诉浏览器按照HTML5标准解析页面
注意:
- <!DOCTYPE> 声明位于文档最前面的位置,处于<html>标签之前
- <!DOCTYPE> 不是一个HTML标签,它就是一个 文档类型声明标签
2. lang语言种类
<html lang="en">
en 定义语言为英语 zh-CN定义语言为中文
- 作用:用来定义当前文档显示的语言
-
根据根据lang属性来设定不同语言的css样式,或者字体
-
根据根据lang属性来设定不同语言的css样式,或者字体
-
让语法检查程序做语言识别
-
帮助翻译工具做识别
-
帮助网页阅读程序做识别
3. 字符集
定义:「字符集」(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。
在 <head>标签内,可以通过<meta> 标签的charset属性,来规定HTML文档应该使用哪种字符集编码
<meta charset="UTF-8">
UTF-8是字符集中的一种
UTF-8也成为“万国码”,基本包含了全世界所有国家需要用到的字符
4. meta标签
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个页面</title>
</head>
meta name="viewport"
- 通常viewport是指视窗、视口。浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。在移动端和pc端视口是不同的,pc端的视口是浏览器窗口区域,而在移动端有三个不同的视口概念:布局视口、视觉视口、理想视口
meta有两个属性: name和 http-equiv
name属性的取值:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
keywords(关键字) 告诉搜索引擎,该网页的关键字
-
description(网站内容描述) 用于告诉搜索引擎,你网站的主要内容。
-
viewport(移动端的窗口)
-
robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引,哪些页面不需要索引
-
author(作者)
-
generator(网页制作软件)
-
copyright(版权)
http-equiv有以下参数:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
http-equiv相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容
-
content-Type 设定网页字符集(Html4用法,不推荐)
-
Expires(期限) ,可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
-
Pragma(cache模式),是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出
-
Refresh(刷新),自动刷新并指向新页面。
-
cache-control(请求和响应遵循的缓存机制)