HTML基础
在本文中，我们将解释HTML的基础知识。
这解释了主要的标签，例如DOCTYPE声明，<html>、<head>和<body>标签。它还描述了标签、属性和特殊字符。
YouTube Video
HTML基础
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>在文件的开头，我们声明这是一个HTML5文档，表示它遵循HTML5的规则。
-
<html><html>标签是HTML文档中最外层的元素，包裹了所有的内容。每个HTML文件中只能包含一个<html>标签，所有其它标签都嵌套在这个标签内。打开的<html>标签中的lang="en"被称为属性，告知浏览器文档是用英文写的。这有助于通知屏幕读取器和搜索引擎文档的语言。 -
<head><head>标签定义了页面的元数据（信息）。这包括页面标题、字符编码和响应设计设置。响应式设计指的是一种为网站或应用程序设计的方法，使其适应并在各种设备和屏幕尺寸上良好显示。这允许用户在智能手机、平板电脑和桌面电脑等不同设备上舒适地查看内容。<meta charset="UTF-8">将文档的字符编码设置为UTF-8。<meta name="viewport" content="width=device-width, initial-scale=1.0">是一个为移动设备优化显示的设置。 页面会根据设备屏幕的宽度进行调整。<title>表示显示在浏览器标签中的页面标题。在此示例中，设置了标题 'HTML基础'。 -
<body><body>标签包含向用户显示内容的部分。在此标签内编写文本、图像、链接等。 -
<main><main>标签表示页面的主要内容。这包括标题和段落。 -
<h1><h1>标签表示页面上最重要的标题。在文档中通常仅使用一次<main>标签和<h1>标签。 -
<p><p>标签表示一个段落。 -
<!-- Comment -->您可以以这种格式在HTML中编写注释。 由于客户端HTML可以被任何人查看，请不要在注释中包含诸如密码或API密钥之类的敏感信息。
HTML有许多标签，但这里请注意以下几点。HTML文件由一个 DOCTYPE 声明和一个 <html> 标签组成。<html> 标签包含一个 <head> 标签和一个 <body> 标签。在HTML中，所有标签都包含在 <html> 标签内，通过父、子和兄弟关系表达文本结构，类似于树状结构。在编写HTML时，也要关注文档结构。
标签和属性
接下来，让我们看一下HTML标签和属性。
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->标签用尖括号（<，>）括起来，通常由一个开始标签和一个结束标签组成。然而，也有一些单一标签，例如 <meta> 标签和 <img> 标签，它们不包含内容。单一标签不需要结束标签。
标签可以具有属性，提供附加信息。属性写在开始标签中，格式为 attributeName="value"。
这里，<div> 被称为标签，而 <div>Content</div> 被称为元素。
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>HTML中的常用属性包括 id，class 和 style。id 属性用于给元素一个唯一的标识符，在一个页面上只能有一个元素具有相同的id。当使用JavaScript或CSS操作特定元素时，这是有用的。class 属性允许您通过赋予类名来用CSS或JavaScript对多个元素进行分组。您可以为多个元素指定相同的类名，以便共享样式。style 属性为元素指定内联的CSS样式。通常情况下，样式是在外部样式表中或 <style> 标签中定义的，但此属性用于您想直接为单个元素指定样式时。
HTML中的特殊字符
接下来，让我们深入了解HTML中的特殊字符。
在HTML中，有一些特殊字符用于显示特定的符号和字符。这些特殊字符称为实体。特殊字符以 &（和号）开头，后跟名称或数字，并以 ;（分号）结尾。
HTML中的代表性特殊字符
以下是一些常见的特殊字符。
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
HTML中特殊字符的使用示例
特别是，尖括号（<，>）和双引号需要在HTML中正确使用。
尖括号（<, >) 和双引号在 HTML 中应该表示为特殊字符，如下所示。
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
HTML版本
在这里，我们来看看HTML版本。
HTML版本的发展是为了定义网页的结构和功能。以下是主要版本：。
-
HTML 1.0 (1993)
第一个HTML版本只有非常基本的标记功能。它定义了链接、标题、段落和列表等元素。
-
HTML 2.0 (1995)
第一个标准化版本，添加了更多的元素，包括对表单和表格的支持。
-
HTML 3.2 (1997)
增加了更多的布局功能，允许嵌入样式元素和脚本。此外，使用
<table>元素进行布局变得普遍。 -
HTML 4.01 (1999)
结构和表现的分离取得进展，并引入了CSS。推荐创建符合标准的网站。此外，文档的国际化和可访问性得到了改善。
-
HTML5 (2014)
最新的主要版本，支持视频和音频、画布、本地存储、地理定位以及其他新的API。它对移动设备友好，使开发更具互动性的Web应用程序成为可能。
HTML5.2是2017年推荐的HTML版本，是HTML5的改进版本。从HTML5.2开始，它作为HTML Living Standard持续更新，而不是拥有一个静态的版本号。
HTML通过这些版本演变，发展成为更灵活、更强大的网络技术。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。