Day01——HTML标签（上）

华籍美人_Sun

已于 2023-01-10 23:13:59 修改

阅读量41

点赞数

分类专栏： HTML+CSS 文章标签： html 前端

于 2022-12-08 17:49:16 首次发布

本文链接：https://blog.csdn.net/m0_56174842/article/details/128100354

版权

HTML+CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、HTML简介

1.1 网页

1. 什么是网页

网站：网页的集合；
网页：网站中的一“页”，通常是HTML格式的文件，它通过浏览器来阅读；
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。

2. 什么是HTML？

HTML 指的是超文本标记语言 ，它是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。

注：
在这里插入图片描述

3. 网页的形成
前端人员开发代码——>浏览器显示代码（解析、渲染）——>生成最后的Web页面

4. 网页的总结

网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)
网页生成制作：有前端人员书写HTML文件，然后浏览器打开，就能看到了网页；
HTML：超文本标记语言，用来制作网页的一门语言，由标签组成，有图片标签、链接标签、视频标签等。

1.2 Web标准

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

1.为什么需要Web标准

浏览器不同，它们显示页面或者排版就有些许差异
遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点： 1.让 Web 的发展前景更广阔；2.内容能被更广泛的设备访问； 3.更容易被搜寻引擎搜索； 4.降低网站流量费用； 5.使网站更易于维护；6.提高页面浏览速度

2.Web标准的构成
在这里插入图片描述

形象化说明：
在这里插入图片描述

二、HTML语法规范

2.1 基本语法概述

HTML标签是由尖括号包围的关键词，例如<html>。
HTML标签通常是成对出现的，例如 <html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如<br/>，我们称为单标签。

2.2 标签关系

双标签关系可以分为两类：包含关系和并列关系。
在这里插入图片描述

三、HTML基本结构标签

每个页面都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档。
HTML文档的后缀名必须是.html或.htm。

基本的结构标签如下：
在这里插入图片描述

四、网页开发工具

4.1 VSCode的使用

在这里插入图片描述

4.2 VSCode插件安装

VSCode的相关插件安装很简单，如下：
在这里插入图片描述

我已安装的插件如下：

在这里插入图片描述

4.3 VSCode生成的骨架结构

在VSCode的文件中，输入！按下Tab键会生成页面骨架结构，相比于2.2所写的基本结构，新增了以下三个标签：
在这里插入图片描述

DOCTYPE <!DOCTYPE html> 文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面。
lang 语言种类 用来定义当前文档显示的语言。 en定义语言为英语；zh-CN定义语言为中文。

1.简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页；
2.其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文；
3.这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的。

charset字符集通过标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

1.常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符。
2.上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，书写时尽量统一写成标准的 “UTF-8”，不要写成"utf8" 或 “UTF8”。