HTML学习之基本标签-原创手记-慕课网

基本结构

在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>

图片.png

文档声明标签

<!DOCTYPE html>

作用就是告诉浏览器接下来要解析的是一个html文档

html标签

告诉浏览器对这个文档的解析从<html>开始，到</html>结束

属性lang=“en” 表示语言使用的是英语，如果要使用中文可以设置为zh-cn

head标签

head标签用于定义html文档的头部信息，head标签一般会包含meta、title两个子标签

meta标签

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>基本标签</title>

body标签

body标签用于定义网页的内容区域

<body>
    这是网页内容区域
</body>