HTML？HTML5！
仅作记录用
HTML 属性：
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
属性值本身就含有双引号，则使用单引号，例：name='John "ShotGun" Nelson'
标题<h1>-<h6>：
浏览器会自动地在标题的前后添加空行。
标签只用于标题，不要仅仅是为了生成粗体或大号的文本而使用标题。
标题按顺序1-6。
<!-- 注释 -->
<hr>：水平线
<p></p>：段落
<br>：换行
HTML 输出- 使用提醒
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
<b>加粗，<i>斜体
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
HTML 文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
HTML "计算机输出" 标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目。 |
<a>链接：
href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。target（可选）：指定链接如何在浏览器中打开。常见的值包括_blank（在新标签或窗口中打开链接）和_self（在当前标签或窗口中打开链接）。title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
文本链接：...
图像链接：嵌套一个图像
锚点链接：
<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>
下载链接：
<a href="document.pdf" download>下载文档</a>
id属性：
<!-- 在HTML文档中插入ID -->
<a id="tips">有用的提示部分</a>
<!-- 在HTML文档中创建一个链接到"有用的提示部分(id="tips"）" -->
<a href="#tips">访问有用的提示部分</a>
<!-- 或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）" -->
<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>
链接的注意事项 - 有用的提示
请始终将正斜杠添加到子文件夹。假如这样书写链接：
href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。
head元素
标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据，如网页的描述，关键词，文件的最后修改时间，作者等
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
CSS(Cascading Style Sheets)
添加方式：
- 内联样式- 在HTML元素中使用"style" 属性
<p style="color:blue;margin-left:20px;">这是一个段落</p>- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
<head><style type="text/css">body {background-color:yellow;}p {color:blue;}</style></head>- 外部引用 - 使用外部 CSS 文件
<link rel="stylesheet" type="text/css" href="mystyle.css">
| 标签 | 描述 |
|---|---|
| <style> | 定义文本样式 |
| <link> | 定义资源引用地址 |
图像img
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
图像的注意事项 - 有用的提示：
注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。
表格table
- tr：tr 是 table row 的缩写，表示表格的一行。
- td：td 是 table data 的缩写，表示表格的数据单元格。
- th：th 是 table header的缩写，表示表格的表头单元格。
<table>
<thead>
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1，列1</td>
<td>行1，列2</td>
<td>行1，列3</td>
</tr>
</tbody>
</table>
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
| 表格的目的是呈现表格化数据 - 表格不是布局工具！ |
列表li
ul: unordered lists
li: list item
ol: ordered lists
dl: definition lists（自定义列表）
dt: definition term（自定义列表组）
dd: definition description（自定义列表描述）
无序
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
| 标签 | 描述 |
|---|---|
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
| <dl> | 定义列表 |
| <dt> | 自定义列表项目 |
| <dd> | 定义自定列表项的描述 |
区块div/span
大多数 HTML 元素被定义为块级元素(block-level)或内联元素(inline)。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
<div> 元素是块级元素，用于组合其他 HTML 元素的容器。
<span> 元素是内联元素，可用作文本的容器。
区别:
块级元素 vs. 行内元素：
· <div> 是块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构，例如页面的主体区域、容器、布局等。
· <span> 是行内元素，它不会独占一行，宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。
· 默认样式和布局：
· <div> 元素的默认样式为块级显示，会以块的形式占据可用空间。
· <span> 元素的默认样式为行内显示，它不会独占一行，只占据其内容的宽度。
嵌套关系：
· <div> 可以容纳其他块级元素和行内元素，包括其他的 <div> 和 <span> 元素。
· <span> 通常被用来包裹文本或其他行内元素，比如用来设置特定文本的样式。
· 总之，<div> 用于创建页面结构和布局，而 <span> 用于对文本或行内元素进行样式化或包裹。它们在页面设计和样式设置中有不同的用途和作用。
表单
<!-- action:提交目标url以及提交到服务端的文件名，method提交数据的HTTP方法 -->
<form action="/url" method="post">
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<!-- type定义输入框类型，id关联label元素，name标识表单字段 -->
<input type="text" id="name" name="name" required>
<br>
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息</label>
<br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
method 属性
- post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
- get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的表单 |
| <input> | 定义输入域 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <label> | 定义了 <input> 元素的标签，一般为输入标题 |
| <fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> | 定义了 <fieldset> 元素的标题 |
| <select> | 定义了下拉选项列表 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
| <button> | 定义一个点击按钮 |
| <datalist>New | 指定一个预先定义的输入控件选项列表 |
| <keygen>New | 定义了表单的密钥对生成器字段 |
| <output>New | 定义一个计算结果 |
框架iframe
(woc，高级，在教程里看教程中的教程)
<iframe src="https://www.runoob.com/html/html-iframes.html" width="100%" height="400"></iframe>
实现方式
<iframe src="https://www.runoob.com/html/html-iframes.html" width="700" height="400"></iframe>
颜色
颜色十六进制(Color HEX)：#000000
颜色RGB(Color RGB)：rgb(0,0,0)
颜色RGBA(alpha)：rgba(255,255,0,0.5)
0.5 表示透明度，范围 0~1，0 表示全透明。
通常我们为了省略一个 0：rgba(255,255,0,.5)
你知道吗？
Web安全色?
数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。
我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。
最初，216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。
颜色名
141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，加124）
17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。点击其中一个颜色名称就可以查看与不同文字颜色搭配的背景颜色。
HTML 颜色名
脚本JavaScript
| 标签 | 描述 |
|---|---|
| <script> | 定义了客户端脚本 |
| <noscript> | 定义了不支持脚本浏览器输出的文本 |
字符实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格(Non-Breaking space) | |   | |
| < | 小于号(less than) | < | < |
| > | 大于号(greater than) | > | > |
| & | 和号(ampersand) | & | & |
| " | 引号(quotation) | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
统一资源定位器（Uniform Resource Locators）
格式scheme://host.domain:port/path/filename
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 runoob.com
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
| Scheme | 访问 | 用于... |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页，加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
url只能使用ASCII字符集
url编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。