第3章快速入门HTML如何快速入门HTML?要想快速入门HTML，就得了解基本的HTML骨架结构以及基本标签，再使用编

1 理解HTML是什么

HTML是HyperText Markup Language的缩写，被译为超文本标记语言，是被用来标记网页组成元素可进行相互跳转的一门语言。它是由IETF发明，并由W3C继承发展的。中间经过许多波折，最终于2014年，W3C联手WHATWG推出了HTML5。它的发展历程如下图1 HTML的发展历程所示

理解一个东西的最佳方法，是创造它。用以下三步，就可以编写它：

第一步 鼠标右键 ▶ 新建 ▶ 文本文档 ▶ 输入以下内容。

      <marquee>一场有趣的游戏！</marquee>

第二步点击文件▶另存为，重命名文件名为.html文件，并将【保存类型】更改为“所有文件（.）”,z再以“UTF-8”的编码方式保存即可。
第三步鼠标双击这个.html文件，该文件内容将在 默认浏览器 中被打开。
第四步程序员写的叫 源代码，要交给浏览器进行渲染。我们可以借助浏览器去看网页的源代码。（具体操作： 在网页空白处：鼠标右键 ▶ 查看网页源代码）

2 认识HTML的标记

HTML的标记是用来标记文件资源以及特殊字符的，一共有3种，分别是HTML标签、HTML注释以及HTML字符实体。

2.1 HTML标签

什么是HTML标签？标签又称元素，是HTML的基本组成单位。
如何编写HTML标签？标签按照语法结构分为 单标签 与 双标签。
- 双标签
  - 双标签语法结构，如下图所示：
  - 双标签语法示例：<marquee>循环播放</marquee>
- 单标签
  - 单标签语法结构如下图所示：
  - 单标签语法示例： <input>

标签名不区分大小写，但推荐小写，因为小写更规范

标签关系要分为两种，分别为嵌套关系以及并列关系。
- 标签关系，如下图所示：
- 标签关系，可以使用 tab 键进行缩进，语法示例如下所示：
```
  <marquee> 
     从此处划过！ 
     <input> 
  </marquee> 
  <input>
```

2.2 HTML标签属性

标签属性是用于给标签提供 附加信息。
标签属性语法结构，如下图所示：
标签属性语法示例，如以下代码所示：

   <marquee loop = "1">
      只播放一次
      <input disabled>
   </marquee>

⚠注意

有些标签具有共有属性，有些标签具有独特属性，有些标签只具有属性名无属性值。如：<input disabled>

标签属性名推荐使用小写字母

属性名与属性值之间的引号，可以使用写成双引号，也可以写成单引号，甚至不写都行,推荐使用""。

标签可以拥有多个属性，必须写在标签名的后面，且属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

2.3 HTML注释

作用：给HTML标签添加注释内容
语法：<!-- 我是一段注释 --!>;
提示：在VsCode编辑器中使用CTRL➕/进行注释或反注释。

2.4 HTML字符实体

字符实体主要是用来替代那些难以使用或者被HTML标记占用的符号。例如，代码中的多个空格以及换行符在浏览器中显示时以一个空格显示，那如何让浏览器显示多个空格呢？这时就要用到字符实体了。部分字符实体，如下表字符实体表所示：

字符实体表

3 掌握HTML骨架

网页如果不写HTML基本结构或把相关内容写错位置，在浏览器中会出现什么情况？点击鼠标右键，选择“检查”，查看浏览器编译后的代码，会发现浏览器会对HTML进行解析将试着把相关内容按照HTML规范语法填写，如果错的浏览器识别不了，将不能显示相关内容。具体解析方式，如下图 HTML在浏览器上的解析方式所示：

HTML在浏览器上的解析方式

【检查】 和 【查看网页源代码】 的区别：

【查看网页源代码】看到的是：程序员编写的源代码。

【检查】看到的是：经过浏览器 “处理” 后的源代码。

3.1 HTML骨架

一个基本的HTML骨架结构，如下图 HTML基本结构所示：
- html：整个网页
- head：网页头部，用来存放给浏览器看的信息，例如 CSS
- title：网页标题
- body：网页主体，用来存放给用户看的信息，例如图片、文字

HTML基本结构转存失败，建议直接上传图片文件

可基于实际需要，还得使用文档声明、语言属性以及字符集，具体如下图所示：

HTML基本骨架结构

3.2 HTML文档声明

作用：告诉浏览器当前网页的版本。
语法： <!DOCTYPE html> HTML5的文档声明。

3.3. HTML设置语言

作用：① 让浏览器显示对应的翻译提示。②有利于搜索引擎优化。
语法：<html lang="zh-CN"> zh-CN 表示汉语-中国。

3.4 HTML字符编码

作用：计算机对数据的操作：存储时，对数据进行编码；读取时，对数据进行解码。编码与解码会遵循一定的规范 —— 字符集。
语法：<head> <meta charset="UTF-8"/> </head> 通常给meta标签的charset属性指定字符集为UTF-8。
类型：见以下字符集表格

名称	作用
ASCII	大写字母、小写字母、数字、一些符号，共计128个。
ISO 8859-1	在 ASCII 基础上，扩充了一些希腊字符等，共计是256个。
GB2312	继续扩充，收录了 6763 个常用汉字、682个字符
GBK	收录了的汉字和符号达到 20000+ ，支持繁体中文。
UTF-8	包含世界上所有语言的：所有文字与符号。—— 很常用。

原则：采用以下编码与解码原则

原则.png

总结：平时编写代码时，统一采用 UTF-8 编码（最稳妥）。为了让浏览器在渲染 html 文件时，不犯错误，可以通过 meta 标签配合 charset 属性指定字符编码。

4 使用编辑器VSCode

安装VsCode
下载VsCode插件：
- ①文件图标主题插件：vscode-icons
- ②.html文件运行插件： LiveServer （实际就是开启一个服务器；且该插件要求VSCode打开的必须是一个文件夹，否则无法正常工作，且编写的网页必须是标准格式，否则不会自动刷新。）
- ③ 打开网页插件：open in browser（选用）
设置VsCode自动保存功能：设置▶ 搜索“自动保存” 。
调整字体大小与设置主题。
新建.html文件，搭建HTML骨架结构，编写HTML标记。

5 查询HTML官网

6 如何学HTML

掌握HTML的基本骨架以及基本标签。
理解HTML标签的基本语义，根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

第3章 快速入门HTML