HTML基础笔记（上）
介绍
费曼学习法最重要的部分，即把知识教给一个完全不懂的孩子——或者小白。
为了更好的自我学习，也为了让第一次接触某个知识范畴的同学快速入门，我会把我的学习笔记整理成电子幽灵系列。
提示：文章的是以解释-代码块-解释的结构呈现的。当你看到代码块并准备复制复现的时候，最好先保证自己看过了代码块前后的解释。
本篇笔记主要来源于对 菜鸟教程：HTML教程的学习。
约定规范
这部分内容虽然并不是现行标准所硬性规定的，但为了保证开发的规则统一，以便于项目管理，同时减少后续标准更新时习惯新标准所用到的额外学习开销，建议先记在心里，并且在后续阅读时常回来看。
- < !DOCTYPE html >，html只能全部小写
- 如果出现开始标签，必须在后面出现对应的结束标签，无论需不需要。
- 空标签可以用自闭合标签来代替结束标签。
- 标签一律小写。
- 属性一律小写，属性值可以不小写
HTML介绍
如果要类比的话，HTML可以说是计算机领域的"魔法书（页）"。通过编程语言(类比成咒语？)，让网页上显示出想要显示的文字、图像，乃至不同HTML之间的联系。
当前最新的标准被称为HTML5。
学习HTML简单之处在于，只要使用浏览器，就会有各种各样的现成HTML实例在等着你。任何一个网页，若想知道它背后的HTML文件，只需要按下F12打开开发人员工具即可；如果想要直接查看页面源代码，也是可以直接在右键选项中打开源代码文件。
同样的，如果想要知道自己写出的HTML文件的实现效果，也只需要把文件在浏览器中打开即可。或者很多其他笔记本也支持HTML语言，比如Markdown。
如果想在VSCode中实时浏览自己所写的HTML的实际效果，可以下载扩展Live Preview。
HTML基础
html文件的后缀是.html或者.htm。二者并没有区别。
在VSCode当中，如果新建了一个.html文件，并在文件中打下一个英文字符"!"，并选择第一个缩写(直接按下Tab键)就可以唤起用中文编写的.html实例的基本结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
html标签、元素与属性
- < !DOCTYPE html >：表示html协议的版本。约定规范1
- < html >< /html >标签：表示整个html文档。
- < head >< /head >标签：包含了文档的元信息，相当于正式内容的修饰部分，比如作者、描述、关键词、字符集、标题、样式表、脚本等。给后面的正文内容做铺垫。
- < body >< /body >标签：包含了文档的正文内容。
上面的几个都是 html标签。
所有html对象又是由标签(即尖头括号以及其中包裹的东西)包起来的。不同的标签有时可以用嵌套关系;
标签经常成对出现，即分为开始(开放)标签和在最开始加一个“/”的结束(闭合)标签。约定规范2
有一种标签不含有任何内容，即成为空标签。空标签也有开始标签和结束标签，不过通常也可以把他们写在同一个对应的"自闭合标签"当中。自闭合标签里也可以添加属性。 约定规范3 约定规范4
元素 一词和有时标签几乎同义，但是元素包含开始和结束标签，以及标签中间包含的元素内容。
对于元素而言，可以额外设置 属性。
属性可以为元素增加额外信息，一般写在开始标签中。格式为name=“value”,以键值对的形式存在。约定规范5
注：属性值必须包含在引号之内。如果属性值本身有双引号，则要把整个属性值用单引号包裹。
常用属性
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
HTMLbody段基础标签表
<!--该段代码部分由AI Fitten Code生成并已经过验证-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello World</title>
</head>
<body>
<h1>第一大标题</h1>
<h2>第二大标题</h2>
<h3>第三大标题</h3>
<h4>第四大标题</h4>
<h5>第五大标题</h5>
<h6>第六大标题</h6>
<a herf="https://www.runoob.com">这是一段链接</a>
<p>这是一个段落</p>
<p>这是另一个段落</p>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<img src="https://www.runoob.com/images/logo.png" alt="RUNOOB" />
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>女</td>
<td>25</td>
</tr>
</table>
</body>
</html>
前端家族大概都是相通的，就像编程语言也有同样的基础逻辑一样。触类旁通大概就是如此。
基础常用标签
(排列顺序：上述代码从上到下依次出现)
| 标签 | 解释 | 常用属性 |
|---|---|---|
| !– | 注释 | |
| h1~h6 | 第一~第六大标题 | |
| a | 链接 | href：表明链接指向的URL |
| p | 段落 | |
| ul | 无序列表 | |
| li | 列表的一行(占一个序号) | |
| ol | 有序列表 | |
| img | 图片 | src：表明图片的来源URL width：指定图片宽度 height：指定图片高度 alt：图片的替代文本 (当图片无法显示，或者为视力障碍者朗读网页时，会显示alt内容） |
| table | 表格 | border：表格是否拥有边框（值只能为"1"或""） |
| tr | 表格的一行 | |
| th | 表格的表头单元格 | |
| td | 普通表格内容 |
页面装饰类基础常用标签
<!--该段代码部分由AI Fitten Code生成并已经过验证-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<hr />
<h1>Hello World</h1>
<p>Welcome to my website!</p>
<p>This is a <br></br>simple HTML page<br></br> with a heading and a paragraph.</p>
<hr />
</body>
</html>
| 标签 | 解释 | 常用属性 |
|---|---|---|
| hr | 添加水平分割线 | |
| br | 手动换行 |
值得注意的是，浏览器几乎会忽略源代码所有的排版 。代码中的所有换行和缩进会被分别省略为一个空格。
文本装饰类基础常用标签
<!--该段代码由AI Fitten Code生成并已经过验证-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
</head>
<body>
<p>这是电脑自动输出的文字</p>
<br />
<b>这是加粗字体</b>
<br />
<i>这是斜体字体</i>
<hr />
<u>这是下划线字体</u>
<br />
<small>这是小号字体</small>
<br />
<mark>这是标记字体</mark>
<br />
<p>这是<sub>下标字体</sub></p>
<br />
<p>这是<sup>上标字体</sup></p>
<br />
<strong>这是强调字体</strong>
<br />
<em>这是强调字体</em>
<br />
<del>这是删除</del>
<br />
<ins>这是插入</ins>
<br />
<cite>用于某个艺术作品的标题</cite>
<br />
<q>这是短引用</q>
<br />
<abbr>这是缩写</abbr>
<br />
<address>这是地址</address>
<br />
<blockquote>这是引用文本</blockquote>
<br />
<pre>这是预格式化文本</pre>
</body>
</html>
| 标签 | 解释 | 常用属性 |
|---|---|---|
| b | 字体加粗 | |
| i | 斜体 | |
| u | 字体加下划线 | |
| small | 小号字体 | |
| mark | 高亮标记字体 | |
| sub | 下标字体 | |
| sup | 上标字体 | |
| strong | 加粗字体，用于强调 | |
| em | 斜体，用于强调 | |
| del | 文本加删除线 | |
| ins | 字体加下划线，用于表示插入文本 | |
| cite | 用于某个艺术作品的标题 | |
| q | 为内容加上引号，表示引用 | |
| abbr | 用于表示这段文字是某个缩写 | title：该缩写的全称是什么 |
| address | 表示文档/文章作者的联系方式 | href：联系方式是什么 |
| blockquote | 表示接下来的文本块是另一个文档的引用 | cite：引用源URL是什么 |
| pre | 用预格式化文本 |
上面的表格和代码可以相互对照，逐渐在实际运用中实现对body内常用对象的熟悉和运用，HTML就算入门了。当然，这些还不够，之后的文章会对一些重要的标签进行详细补充。
尽管魔法的世界没有现实科技，现实世界里没有魔法，但是魔法和科技的理念都是相同的：借助人类所能掌控的力量，让更多人从中获益，进而达到促进社会乃至文明发展的目的。
599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
