02-HTML概念

HTML是超文本标记语言，在介绍超文本之前首先介绍什么是纯文本。

一、纯文本格式

纯文本格式，就是纯文字，就是没有任何文本修饰的，没有任何粗体，下划线， 斜体，图形，符号或特殊字符及特殊打印格式的文本，只保存文本，不保存其格式设置。

纯文本格式的对立面是富文本格式

纯文本格式与富文本格式对比

纯文本格式：最常见的是.txt文件。在存储和传输 过程中，只能保存文字，不能保存格式

富文本格式：与纯文本对应，最常见的是.rtf文件， 类似.doc文件，内部可以保存文本的样式、图片等。

例如新建一个.txt文件，文件中输入内容“文本内容”，保存后右键文件查看属性，查看文件大小，显示为12字节（一个汉字占3字节），也就是说，确实只保存了文字内容，不可以设置样式。

再新建一个.rtf文件，同样输入内容“文本内容”（自动有文字样式存在），保存后查看文件大小为40829字节，比之前的12字节多出很多，所以说二者在保存过程中确实保存的内容是不一样的。

对比可得：纯文本格式文件小，更易于传输。

纯文本文件特点

1. 文件只能保存文本，不保存其他的格式或非文本内容，有利于网络传输。

2. 所有的纯文本格式文件，可以通过直接更改扩展名的方式去更改保存格式。即，.txt文件可以改成其他纯文本文件的扩展名，例如.html，这是允许的，这样就有一个好处：写纯文本文件时，可以直接先创建记事本文件，然后可以更改扩展名去更改其保存格式。

3. 纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑。即，可以用现在用的记事本进行文件编辑，后续学习过程中也可以用其他更加便捷的编辑器进行程序编辑。

html、css、js文件都是纯文本格式文件，内部都只能使用文字进行编辑，不能直接在编辑过程中插入图片等内容。

二、HTML

Hypertext Markup Language：超文本标记语言。是用来制作网页的一种标记语言。

HTML是一种纯文本格式的文件，内部只能书写文字内容，不能添加图片、音 频、视频等，但是在网页中给用户呈现的效果却包含了文字以外的内容，这种 效果就是HTML语言区别于其他文件的不同之处。

HTML中的两个重要概念：超文本和标记。

超文本

超文本：是超级文本的缩写，简单来说超文本就是用于链接另一个文本或多媒体内容的文本，超文本还是文本，只是比普通文本有了一个特殊的功能，可以链接到另外一个内容，这个内容可以是另外一个文本，也可以是多媒体内容，比如可以链接到图片、链接到一个超链接、音频、视频、程序等。

如何让一个纯文本去实现一个超文本的功能？这就要说到标记的作用。

标记

标记：又叫做标签（HTML tag），有特殊的书写规范，是写给浏览器的一种语法格式（不是写给我们看的），它结合自己内部的普通的文字信息，可以去实现特殊的语义或显示内容，比如可以将一段普通的文字变成标题，变成一个图片等。

它有一个特点是在编辑器中可以编辑和查看，但在浏览器中不显示。 

HTML的功能

利用标记给普通的文本添加语义（比如标题语义、段落语义等）、描述超文本内容（比如图片等），搭建网页的基本结构。

思考：案例中h1标签的作用是什么

最直观看到的：h1标签可以让内部文字加粗加大， 独占一行，但是这是错误答案×

正确答案应该是h1标签负责给内部文字添加一级标 题的语义，不负责样式，样式由css负责。√

h1只有一个功能：添加语义！

这里提到了“语义”，随着技术发展，越来越要求制作语义化的HTML页面了。

HTML的语义化

HTML文件中，如果没有使用特殊语义的标记，也可以实现网页显示效果，即没有h1，没有p，文字也会显示，但是会认为这一堆文字是一个段落，没有主次之分，当利用标记给普通的文字添加了不同的语义，就会发现这些文字有了区别，有了层次，能够让网站的结构划分更加清晰。

添加<h1>、<p>等标签的过程其实就是使HTML网页语义化的过程。

后期制作网页时希望可以记住每一个标签的含义，制作网页时尽量制作语义化比较明确的网页，不要全部都用普通的标签写，尽量用带有特殊含义的标签去书写，这样的网页就会有很多优势。

语义化网页的优势

1. 方便代码的阅读和后期维护

2. 除了开发人员带来方便，也给浏览器带来方便，浏览器加载网页时可以清晰地知道哪里是标题，便于浏览器或是网络爬虫更好地解析网站内容

3. 使用语义化标签有利于SEO搜索引擎（百度、谷歌等）优化，提高网站在搜索引擎中的搜索排名