HTML（HyperText Markup Language）超文本标记语言
HTML 教程 | 菜鸟教程
是一种标签语言，HTML 文档包含了HTML 标签及文本内容，HTML文档也叫做 web 页面
HTML基本结构
<html>
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>- html标签是整个html文件的根标签
- head标签中写页面的属性
- body标签中写的是页面显示的内容
- title标签中写的是页面的标题
HTML标签
段落标签<p></p>适用于大长段
换行标签<br>
格式化标签
- 加粗 strong 标签 和 b 标签
- 倾斜 em 标签 和 i 标签
- 删除线 del 标签 和 s 标签
- 下划线 ins 标签 和 u 标签
- <small>定义小号字体
<sub>标签用于创建下标文本，这在数学、化学和物理等科学领域中非常有用，用于表示下标变量或常数。X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sup> （勾股定理）-
<sup>定义上标字
-
<code>定义计算机代码
-
<kbd>定义键盘码
按下 <kbd>Enter</kbd> 键提交表单。- <samp>定义计算机代码样本
- <var>定义变量，
<var>标签的内容通常会被浏览器以斜体显示，以区分于正文。
<p>在公式 \( E = mc^2 \) 中，\( <var>m</var> \) 表示质量，\( <var>c</var> \) 表示光速。</p>- <pre>定义预格式文本，在
<pre>标签内的HTML标签会被当作普通文本显示，不会被浏览器解析。 - <abbr>定义缩写
<p>Moonshot AI 是一个人工智能公司，全称是 <abbr title="Artificial Intelligence">AI</abbr>。</p>
#当用户将鼠标悬停在"AI"上时，会显示"Artificial Intelligence"这个全称。- <address>定义地址,用于定义联系信息，通常用于文档或文章的作者或拥有者的联系信息。这个标签可以包含文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等信息。
<address>标签通常放在页面的 footer 或 header 中，具体取决于上下文。 - <bdo>定义文字方向，
<bdo>标签必须配合dir属性使用，dir属性有两个值：ltr（从左到右）和rtl（从右到左）。
<p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>- <blockquote>定义长的引用，
<blockquote>标签可以配合<cite>标签使用，<cite>标签用于提供引用的来源。对于短引用，可以使用<q>标签，它允许在引用中包含引号。<blockquote>可以嵌套使用，以表示引用中的引用。 - <dfn>定义一个定义项目，
<dfn>标签用于标记文档中正在定义的术语。这个术语的定义必须在<dfn>标签的父代元素中找到。通常情况下，浏览器会将<dfn>标签中的内容以斜体显示。想要定义一个缩写词，可以将<dfn>和<abbr>标签一起使用<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the technology used to create web pages.</p>最后看到个有意思的
<b>---bold
<em>---emphasize
<i>---italic
<sub>---subscript
<sup>---superscript
<ins>---insert
<del>---delete
<kbd>---keyboard
<bdo>---Bi-Directional Override
<q>---quote
<dfn>---define
HTML标签对大小写不敏感，在未来 (X)HTML 版本中强制使用小写
<!DOCTYPE> 声明
如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。DOCTYPE声明不区分大小写。
HTML5通用声明
<!DOCTYPE html>
对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。
HTML编辑器
- VS Code：https://code.visualstudio.com/
- Sublime Text：http://www.sublimetext.com/
- 在线编辑器：HTML/CSS/JS 在线工具 | 菜鸟工具
HTML标题
<h1>这是一个标题。</h1>
........
<h6>这是一个标题。</h6>
<hr> 标签在 HTML 页面中创建水平线。
<hr style="width: 50%; color: blue; size: 2px;">HTML链接
用<a>标签，在 href 属性中指定链接的地址。
<a href="https://www.example.com">访问示例网站</a> #基本链接
<a href="mailto:someone@example.com">发送邮件</a> #邮件链接
<a href="path/to/file.pdf" download>下载PDF文件</a> #下载链接HTML图像
用<img>标签，用到<src>,<alt>,<width>,<height>
<img src="path/to/image.jpg" alt="描述性文字"> #基本图像
<img src="path/to/image.jpg" alt="描述性文字" width="500" height="300"> #设置宽度和高度，以像素为单位HTML元素
包括开始标签，元素内容，结束标签。大多数 HTML 元素可以嵌套
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
HTML属性
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
1. id
- 唯一标识符，用于CSS和JavaScript中选择特定的元素。
- 示例：
<div id="main-content"></div>
2. class
- 类名，用于CSS中选择一组元素，并应用相同的样式。
- 示例：
<div class="container"></div>
3. style
- 内联样式，用于直接在元素上设置CSS样式。
- 示例：
<div style="color: red; font-size: 20px;"></div>
4. title
- 提供关于元素的额外信息，通常当鼠标悬停在元素上时显示。
- 示例：
<img src="image.jpg" title="Description of the image">
5. alt
- 用于
<img>标签，为图像提供替代文本，用于图像无法显示时。 - 示例：
<img src="image.jpg" alt="Description of the image">
6. src
- 指定外部资源的路径，常用于
<img>、<script>和<link>标签。 - 示例：
<img src="image.jpg" alt="Description of the image">
7. href
- 用于
<a>、<link>和<base>标签，指定链接的目标URL。 - 示例：
<a href="https://www.example.com">Visit Example</a>
8. target
- 用于
<a>标签，指定链接的打开方式（如_blank在新窗口中打开）。 - 示例：
<a href="https://www.example.com" target="_blank">Open in new tab</a>
9. rel
- 定义链接和当前文档之间的关系，常用于
<a>和<link>标签。 - 示例：
<link rel="stylesheet" href="styles.css">
10. type
- 指定元素的类型，常用于
<input>、<script>和<embed>标签。 - 示例：
<input type="text" name="username">
11. value
- 指定表单元素的默认值，常用于
<input>和<textarea>标签。 - 示例：
<input type="text" name="username" value="Default username">
12. placeholder
- 为
<input>和<textarea>提供占位符文本。 - 示例：
<input type="text" placeholder="Enter your name">
13. disabled
- 禁用表单元素，使其不可交互。
- 示例：
<input type="text" disabled>
14. readonly
- 使表单元素只读，用户不能修改其内容。
- 示例：
<input type="text" readonly value="Readonly value">
15. checked
- 用于
<input type="radio">或<input type="checkbox">，指定元素是否被选中。 - 示例：
<input type="checkbox" checked>
HTML 注释
<!······注释······>
