一文看懂html
互联网技术发展简史
在互联网发展的不同阶段，Web技术经历了三个重要时代，每个时代都有其独特的特点和技术革新。
| 时代 | 时间范围 | 主要特点 | 代表性技术 | 典型应用 |
|---|---|---|---|---|
| Web 1.0 | 1990s - 2000s | 静态页面、单向信息传递、超链接导航 | HTML、CSS、JavaScript、HTTP | 早期门户网站（Yahoo!）、个人博客 |
| Web 2.0 | 2000s - 2020s | 交互增强、动态页面、个性化推荐 | AJAX、REST API、云计算、数据库 | Facebook、YouTube、Wikipedia |
| Web 3.0 | 2020s - 未来 | 去中心化、数据所有权 | 区块链、NFT、DeFi | 比特币、以太坊 |
对于前端开发来说，最核心的3个技术分别是HTML、CSS和JavaScript。
- HTML，全称是“Hyper Text Markup Language”（超文本标记语言），HTML是一门描述性语言。
- CSS，全称是“Cascading Style Sheets”（层叠样式表），是用来控制网页外观的一种技术。
- JavaScript是一种嵌入到HTML页面中的脚本语言，由浏览器一边解释一边执行。
简单来讲，HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript用于控制网页的行为。
HTML
HTML是一门描述性的语言，就是用标签来描述网页结构。其语法结构为<标签符>内容。
标签符一般都是成对出现的，包含一个“开始符号”和一个“结束符号”。结束符号只是在开始符号前面多加了一条斜杠“/”。当浏览器收到HTML文本后，就会解析里面的标签符，然后把标签符对应的功能表达出来。
举个例子，如果你要在浏览器显示一段文字，就应该使用“段落标签（p）”；如果要在浏览器显示一张图片，就应该使用“图片标签（img）”。你想显示的东西不同，使用的标签也会不同。总而言之，学习HTML就是学习各种各样的标签，然后针对你想显示的东西，对应地使用正确的标签，非常简单。
HTML结构
一个页面是由4个部分组成：
- 文档声明：
<!DOCTYPE html>是一个文档声明，表示这是一个HTML页面。 - html标签对：
<html></html>告诉浏览器，这个页面是从<html>开始，然后到</html>结束的。 - head标签对：
<head></head>是网页的“头部”，用于定义一些特殊的内容，如页面标题、定时刷新、外部文件等。 - body标签对：
<body></body>是网页的“主体”，用于定义网页的主体内容。
特殊符号
在HTML中，如果想要显示一个特殊符号，也是需要通过代码来实现的。这些特殊符号对应的代码，都是以“&”开头，并且以“;”（英文分号）结尾的。 例如HTML中，空格也是需要用代码来实现的。其中，空格的代码是 。
Head标签
在HTML中，一般来说，只有6个标签能放在head标签内。
- title标签：定义网页的标题。
- meta标签：定义页面的特殊信息，如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎看的。简单地说，meta标签就是用来告诉“搜索引擎”这个页面是做什么的。
- link标签：引入外部样式文件（CSS文件）。
- style标签：定义元素的CSS样式。
- script标签：定义页面的JavaScript代码，也可以引入外部JavaScript文件。
- base标签：无意义，可以直接忽略。
meta标签的一个属性http-equiv有两个重要作用：定义网页所使用的编码，定义网页自动刷新跳转。
下面这段代码告诉浏览器，该页面所使用的编码是utf-8。
1
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
不过在HTML5标准中，上面的代码可以简写成下面这样。
1
<meta charset="utf-8"/>
如果你发现页面打开是乱码，很可能就是没有加上这一句代码。在实际开发中，为了确保不出现乱码，我们必须要在每一个页面中加上这句代码。
下面这段代码表示当前页面在6秒后会自动跳转到另一个页面。实际上，很多“小广告”网站就是用这种方式来实现页面定时跳转的。
1
<meta http-equiv="refresh" content="6;url=http://www.lvyestudy.com"/>
Body标签
- 标题标签h1：在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。6个标题标签在页面中的重要性是有区别的，其中h1标签的重要性最高，一个页面一般只能有一个h1标签，而h2到h6标签可以有多个。标题标签的级别越大，字体也越大。
- 段落标签p：段落标签会自动换行，并且段落与段落之间有一定的间距。文字的颜色和大小属于网页的外观，这些都是与CSS有关的内容。在HTML中，只需要关心用什么标签就行了。
- 换行标签br：给文字换行。其中br是自闭合标签，可以用在两个一般标签内部。使用p标签会导致段落与段落之间有一定的间隙，而使用br标签则不会。因为br标签是用来给文字换行的，而p标签是用来给文字分段的。
- 文本标签：对文字进行修饰，如粗体（strong、b）、斜体（i、em、cite）、上标（sup）、下标（sub）等
- 水平线标签hr：实现一条水平线的效果。
- 分区标签div：划分区域，然后结合CSS针对该区域进行样式控制。分区标签内部可以放入绝大多数其他的标签，如p标签、strong标签和hr标签等。
块元素和行内元素
在浏览器预览效果，有些元素是独占一行的，其他元素不能与这个元素位于同一行，如p、div、hr等；而有些元素不是独占一行的，其他元素可以与这个元素位于同一行，如strong、em等。其中，标签也叫作“元素”，如p标签又叫p元素。
在HTML中，根据元素的表现形式，一般可以分为两类（暂时不考虑inline-block）：块元素（block）和行内元素（inline）。
块元素：独占一行，可以设置宽度、高度、外边距、内边距等。 行内元素：不独占一行，不能设置宽度、高度、外边距、内边距等。
HTML列表
在HTML中，列表共有3种：有序列表、无序列表和定义列表。
在有序列表中，列表项之间有先后顺序之分。在无序列表中，列表项之间没有先后顺序之分。而定义列表是一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分。
- 在HTML中，有序列表的标签是
<ol>，列表项的标签是<li>。 - 在HTML中，无序列表的标签是
<ul>，列表项的标签是<li>。
注意，ol标签和li标签需要配合一起使用，不可以单独使用，而且ol标签的子标签也只能是li标签，不能是其他标签。
在HTML中，可以使用type属性来改变列表项符号。在默认情况下，有序列表使用数字作为列表项符号。
1
2
3
4
5
6
7
8
9
10
11
12
13
<ol type="1">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
对于有序列表的列表项符号，在掌握CSS之后便可以不再使用type属性，而使用liststyle-type属性。
```html
<ol style="list-style-type: none;">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
HTML表格
在HTML中，一个表格一般由以下3个部分组成。
- 表格table：表示整个表格的开始和结束。
- 表格标题：即table caption，表示表格的标题。一个表格只能有一个标题。在默认情况下，标题位于整个表格的第一行。
- 行tr：即table row，表示行的开始和结束。
- 单元格td：即table data cell，表示单元格的开始和结束。
- 表头单元格th：即table header cell，表示表头的开始和结束。浏览器会以“粗体”和“居中”来显示th标签中的内容。
- 合并行/列：在HTML中，可以通过rowspan和colspan属性来合并行和列。
HTML图片
在HTML中，可以使用img标签来显示一张图片。对于img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。
1
<img src="" alt="" title="" />
src用于指定这个图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。alt和title都用于指定图片的提示文字。一般情况下，alt和title的值是相同的。
- alt属性用于图片描述，这个描述文字是给搜索引擎看的。当图片无法显示时，页面会显示alt中的文字。
- title属性也用于图片描述，不过这个描述文字是给用户看的。当鼠标指针移到图片上时，会显示title中的文字。
HTML超链接
在HTML中，可以使用a标签来创建一个超链接。
- href属性用于指定这个超链接的地址。
- target属性用于指定这个超链接的打开方式。
- title属性用于指定这个超链接的提示文字。
1
<a href="" target="" title="">超链接</a>