在vscode中新建一个html文档,然后空白处敲"!"就会自动创建html页面的基本结构
<!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>
<!DOCTYPE html>
作用就是告诉浏览器接下来要解析的是一个html文档
告诉浏览器对这个文档的解析从<html>开始,到</html>结束
属性lang=“en” 表示语言使用的是英语,如果要使用中文可以设置为zh-cn
head标签用于定义html文档的头部信息,head标签一般会包含meta、title两个子标签
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
meta标签有几个比较重要的属性:
1.name属性
可以用来定义网页的关键字、描述、作者以及版权信息等等,有以下几个常用值:
keywords:用来定义网页的关键字,关键字可以是多个,之间需要用英文逗号
,
隔开
description:用来定义网页的描述
author:用来定义网页的作者
copyright:用来定义版权信息
2.charset属性
HTML5中新增的属性,用来定义网页的编码格式,常用有以下几个属性值:
ISO-8859-1: 默认编码
UTF-8: 万国码,目前最常用
gb2312: 国际汉字编码,不包含繁体
gbk 汉字编码,包含繁体
3.http-equiv属性
所有主流浏览器都支持 http-equiv 属性。它可以设置网页的过期时间,自动刷新等,有以下几个常用属性值:
expires: 网页过期时间
refresh: 网页自动刷新时间,单位秒
content-type:定义文件的类型,用来告诉浏览器该以什么格式和编码来解析此文件
4.content-type常用属性值
text/html: 表示该文档是HTML格式的文档
text/plain: 表示该文档是纯文本格式文档
text/xml: 表示该文档是xml格式的文档
image/gif: 表示该文档是gif图片格式的文档
image/jpeg: 表示该文档是jpg图片格式的文档
image/png: 表示该文档是png图片格式的文档
定义文档的标题,这个标题就是我们在浏览器中看到的网页标题
<title>基本标签</title>
body标签用于定义网页的内容区域
<body> 这是网页内容区域 </body>