HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如 < html> (这里由于显示原因多加一个空格)），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。

一、HTML介绍

1、概念

HTML (HyperText Markup Language)，超文本标记语言，不是一门编程语言，而是一种创建网页的标准标记语言，由浏览器解析。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号等

HTML使用标记标签来描述网页

HTML文档包含HTML 标签及文本内容

HTML文档也叫做web页面

注：HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。

1
<title> 可以写作<title>、<TITLE>、<Title>、<TiTlE>

都可以正常工作。不过，从一致性、可读性来说，最好仅使用小写字母(未来版本均使用小写)。

二、标签部分详解：

① HTML 标签是由尖括号包围的关键词，比如 

1
<html>

② HTML 标签通常是成对出现的，比如 

1
<b> 和 </b>

③ 标签对中的第一个标签是开始标签，第二个标签是结束标签

④ 开始和结束标签也被称为开放标签和闭合标签

⑤ 常见标签用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题，<h1>定义最大标题，<h6>定义最小标题
<p> 与 </p> 之间的文本被显示为段落，分段络要多个<p>标签
<a href="http://www.xxx.com.cn">This is link</a> 添加超链接，在href属性中指定链接的地址
<img src="xxx.jpg" width="104" height="142" /> 添加图像，图像名称于尺寸以属性的形式提供
<br>就是没有关闭标签的空元素（<br>标签定义换行，<br />关闭空元素）
	<p>This is<br />a para<br />graph with line breaks</p>在本段内换行
<hr />添加水平线，用来分隔内容
	<p>This is a paragraph</p>
	<hr />
	<p>This is a paragraph</p>
	<hr />
	<p>This is a paragraph</p>
<!-- This is a comment -->为你的代码添加注释
<p>表示保持原本的格式，在浏览器中会自动移除多余的空格和空行，及时有多个连续的空格，也会被算作一个空格

一般情况下，浏览器会自动给标题前后添加空格，且，HTML默认为块级元素前后额外添加一个空行，如段落，标题元素前后。

3、HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。(也称开放标签(opening tag)和闭合标签(closing tag))

一些HTML元素具有空内容，空元素在开始标签中进行关闭，大部分HTML元素可拥有属性

大多数HTML元素可以嵌套，HTML文档（web页面）就是由嵌套的HTML元素构成

4、HTML属性

HTML标签可以拥有属性，属性会提供更多的元素信息

属性以名称/值对的形式出现：name=”value”。通常在开始标签中规定

例：

1
2
3
#<h1 align="center">拥有关于对齐方式的附加信息（居中排列标题）。
#<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
#<table border="1"> 拥有关于表格边框的附加信息。

记得始终为属性值加引号，若属性值本身含有双引号，则你必须使用单引号，如：name=’Bill “HelloWorld” Gates’

style属性用于改变HTML元素的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>
#font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>
#background-color属性为元素定义背景颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<body style="background-color:PowderBlue;">

<h1>Look! Style and Colors</h1>
<p style="font-family:verdana;color:Blue">
This text is in Verdana and green
</p>
<p style="font-family:times;color:green">
This text is in Times and green
</p>
<p style="font-size:30px">
This text is 30 pixels high
</p>
</body>
</html>

image-20220401170802338

style提供了一种改变所有HTML元素的样式的通用方法。

另：在 HTML 4 中，有若干的标签和属性是被废弃的。在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性，请避免使用这些被废弃的标签和属性！

image-20220401171327106

以上标签和属性可以用样式代替

5、HTML文本格式化

HTML可以定义很多供格式化输出的元素， 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如：粗体 or 斜体。

文本格式化标签

image-20220401173601026

“计算机输出”标签

image-20220401173636730

引用和术语定义

image-20220401173721172

例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<body>

<b>This text is bold</b>

<br/>

<strong>This text is strong</strong>

<br/>

<big>This text is big</big>
<br/>

<em>This text is emphasized</em>

<br/>

<i>This text is italic</i>

<br/>

<small>This text is small</small>

<br/>

This text contains
<sub>subscript</sub>

<br/>

This text contains
<sup>superscript</sup>

</body>
</html>

image-20220401173804322

6、HTML的引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>

<body>

这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

这是短的引用：
<q>
这是短的引用。
</q>

<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>

</body>
</html>

image-20220401174749885

7、两种缩写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>

<body>

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

<p>仅对于 IE 5 中的 acronym 元素有效。</p>

<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

</body>
</html>

image-20220401174840719

8、删除字效果和插入字效果

1
2
3
4
5
6
7
8
9
10
11
12
<html>

<body>

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

</body>
</html>

image-20220401174941325

9、HTML图像

在HTML中，图像由 img 标签定义， img 标签是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src），src指“source”，源属性的值是图像的URL地址。定义图像的语法是：

1
<img src="url" />  #url指图像位置

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。

1
<img src="boat.gif" alt="Big Boat">  #在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息，此时，浏览器将显示这个替代性文本而不是图像

注：假如某个HTML文件包含十个图像，那么为了正确显示这个页面，需要加载11个文件

image-20220401175431451

10、HTML表格

表格由 table> 标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

image-20220401175643444

image-20220401185910141

例1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
创建一个HTML表格
<html>

<body>

<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

<h4>一列：</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列：</h4>
<table border="5">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列：</h4>
<table border="10">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

image-20220401190049608

例2：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
添加各种边框
<html>

<body>

<h4>带有普通的边框：</h4>  
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有粗的边框：</h4>  
<table border="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有很粗的边框：</h4>  
<table border="15">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

image-20220401190130639

11、HTML列表

HTML文档中，可能需要给你的项目分出列表，html支持有序无序以及自定义三种列表

image-20220401190421348

① 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 ul 标签，每个列表项始于 li 。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>

<body>

<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

</body>
</html>

② 有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 ol 标签，每个列表项始于 li 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<body>

<h4>有序列表样式：</h4>

<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
 
</body>
</html>

③ 自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 dl 标签开始，每个自定义列表项以 dt 开始，每个自定义列表项的定义以 dd 开始。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

12、HTML区块

HTML文档可以通过 div 和 span 组合起来

大多数元素会被当作块级元素或内联元素，块级元素在浏览器中显示的时候通常以新行来开始和结束

1
实例: <h1>, <p>, <ul>, <table>

而内联元素通常不会

1
实例: <b>, <td>, <a>, <img>

div 元素

块级元素，它可用于组合其他 HTML 元素的容器。

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，div 元素可用于对大的内容块设置样式属性。

div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table>元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。

span元素

内联元素，可用作文本的容器

span 元素也没有特定的含义。

当与 CSS 一同使用时，span 元素可用于为部分文本设置样式属性。

image-20220401191824848

三、HTML标签拓展

1、HTML区块

HTML文档可以通过 div 和 span 组合起来

大多数元素会被当作块级元素或内联元素，块级元素在浏览器中显示的时候通常以新行来开始和结束

1
实例: <h1>, <p>, <ul>, <table>

而内联元素通常不会

1
实例: <b>, <td>, <a>, <img>

#div元素

块级元素，它可用于组合其他 HTML 元素的容器。

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性。

#div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table 元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。

#span元素

内联元素，可用作文本的容器

span 元素也没有特定的含义。

当与 CSS 一同使用时，span 元素可用于为部分文本设置样式属性。

image-20220401191824848

四、HTML浏览器应用

1、搭建框架

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面

但同时，它也会有一些坏处：

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面

框架结构标签（frameset）

  • 框架结构标签（frameset）定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积

框架标签（frame）

Frame 标签定义了放置在每个框架中的 HTML 文档。

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中，而 HTML 文档 “frame_b.htm” 被置于第二个列中：

1
2
3
4
#<frameset cols="25%,75%">
#   <frame src="frame_a.htm">
#   <frame src="frame_b.htm">
#</frameset>

注：

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 frame 标签中加入：noresize=”noresize”。

为不支持框架的浏览器添加 noframes 标签。

不能将 body标签与 frameset 标签同时使用！不过，假如你添加包含一段文本的 noframes 标签，就必须将这段文字嵌套于 body标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

2、URL（ Uniform Resource Locator）

统一资源定位器，也称为网址

点击 HTML 页面中的某个链接时，对应的 a 标签指向互联网上的一个地址。

统一资源定位器（URL）用于定位互联网上的文档（或其他数据）。

它遵守以下语法：

1
#scheme://host.domain:port/path/filename
  • scheme - 定义因特网服务的类型。最常见的类型是 http
  • host - 定义域主机（http 的默认主机是 www）
  • domain - 定义因特网域名，比如 w3school.com.cn
  • :port - 定义主机上的端口号（http 的默认端口号是 80）
  • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
  • filename - 定义文档/资源的名称

image-20220401195024342

五、HTML总结

1、学习其他语言，与HTML搭配使用

如果你想为自己搭建一个网站，那仅仅学会HTML是远远不够的，你还需要学习CSS、JavaScript等。

CSS被用来同时控制多重网页的样式和布局。通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。JavaScript 可以让你的网页更加生动。

如果你只想展示内容，静态网站是很好的展示形象，如果你想与用户进行交换或者让网页更加生动那就需要使用到Javascript。JavaScript是互联网上最流行的脚本语言，目前所有主流浏览器都支持Javascript。

2、服务器

网站服务器（Website Server）是指在互联网数据中心中存放网站的服务器。 网站服务器主要用于网站在互联网中的发布、应用，是网络应用的基础硬件设施。可以选择在自己的服务器上托管自己的网站，要挑一个好的服务器，以及各种软硬件的支出费用

3、ISP

为个人和企业客户提供 Internet 访问权限的公司。ISP 使他们的客户可以上网冲浪、在线购物、开展业务以及与家人和朋友联系——所有这些都是收费的。ISP 还可能提供其他服务，包括电子邮件服务、域注册、网络托管和浏览器包。根据公司提供的服务，ISP 也可以称为信息服务提供商、存储服务提供商、互联网服务提供商 (INSP) 或这三者的任意组合。

本文参考链接：

HTML更多内容可以自查HTML手册：https://www.w3cschool.cn/html/dict.html

https://www.jianshu.com/p/ee9bfb7183a6

https://www.runoob.com/html/html-summary.html

https://www.w3school.com.cn/html/html_webserver.asp