HTML 学习笔记
由于在学 OI 时看到许多 OIer 在搭建自己的 blog，似乎要学 html 相关的东西，于是就去网上找了一些资源开始学习……
然而开始学习 html 后，就感觉进入了 html + CSS + JavaScript 的大坑……
本笔记主要记录 html 各个元素的意义及用法，基础知识比较易懂就不再赘述了 qwq
1.定义
HTML 全称 HyperText Markup Language（超文本标记语言），是一种用标记标签来描述网页的标记语言，其文档又名 web 界面。
而 web 浏览器正是通过读取 html，进而将其显示为网页的。
2.html 文档
1、结构
<!DOCTYPE html> <!--出现在 html 文档开头，用于声明所使用的 html 的版本-->
<html> <!--此标签定义整个 html 文档-->
<head> <!--包含所有头部标签元素，可在此插入脚本、样式文件等信息-->
</head>
<body> <!--网页内容的主体，网页只会显示本部分内容-->
</body>
</html>
2、标签
0.有疑问的标签
<!--incoming...-->
1.基础
<h1>标题</h1> <!--有 h1 ~ h6 6 种大小，在放大字体的同时加粗了字体-->
<p>段落</p> <!--注意浏览器会忽略 html 文档中多余的换行与空格-->
<hr /> <!--水平线-->
<br /> <!--换行-->
<!--注意 hr、br 为空元素，可以不写关闭符号，如果想关闭它不需要单独关闭，其他空元素同样如此-->
2.头部（<head> 标签部分）
<title>文档标题</title> <!--此标题虽然不会在页面显示，但可作为浏览器工具栏标题、搜索引擎关键字等-->
<base href = "https://example.com"> <!--本文档默认链接地址/目标（总感觉关闭像 base 这样的空元素有些不美观的说-->
<link rel = "stylesheet" type = "text/css" href = "mystyle.css">
<!--定义文档与外部资源之间的关系，多用于链接到样式表，其中 rel 为文档内部元素，type 为外部资源类型，href 为资源地址-->
<style type = "text/css">
body {background-color : yellow}
p {color : blue}
</style>
<!--定义 html 文档的样式文件引用地址，例如这两句的作用是使正文背景颜色设置为黄色，段落字体设置为蓝色-->
<meta name = "keywords" content = "example"> <!--为搜索引擎定义关键词-->
<meta name = "description" content = "example"> <!--为网页定义描述内容-->
<meta name = "author" content = "Nickel_Angel"> <!--定义网页作者-->
<meta http-equiv = "refresh" content = "30"> <!--每 30 秒刷新当前页面-->
<!--提供如上文所述的（当然还可能有其他数据）原数据-->
3.文本
<abbr title = "example">abcd</abbr> <!--在网页上显示时，鼠标指针移至对应位置时会显示其缩写的内容-->
<b>加粗</b>
<i>斜体</i> <em>被强调的文本</em> <strong>重要的文本</strong> <address>文档作者/所有者信息</abbress>
<mark>被标记的文本</mark> <cite>定义引用的标题</cite> <dfn>定义项目</dfn>
<!--以上六种在浏览器中均表现为斜体，但作用却不同-->
<bdi>使此段文本脱离其父元素文本方向的设置</bdi>
<bdo dir = "rtl">改变文本显示方向</bdo> <!--其方向可以通过 dir 属性调节 rtl: right to left ltr: left to right-->
<blockquote>块引用</blockquote> <!--浏览器会对其进行缩进-->
<code>定义一段代码</code> <samp>定义计算机程序的样本文本</samp>
<kbd>定义键盘文本</kbd> <var>定义文本中的变量部分</var>
<!--以上均与计算机代码有关-->
<s>定义错误的文本</s> <del>定义删除的文本</del> <!--两者效果均为给文本加上删除线-->
<ins>定义插入的文本</ins> <u>定义下划线文本</u> <!--效果均为加上下划线-->
<pre>定义预格式化的文本</pre> <!--会保留空格及换行符-->
<q>定义短引用</q> <!--对引用文本加上引号-->
<small>定义小号文本</small>
<sub>定义下标文本</sub> <sup>定义上标文本</sup>
<time>定义日期/时间</time>
<wbr>规定文本在何处添加换行符</wbr>
对于文本中的链接，我们可以使用 <a> 标签插入：
<a href = "url" target = "_blank">link</a>
<!--href 是链接地址，target 是链接打开方式，如 "_blank" 是新建空白页-->
<a id = "tips">tips</a> <!--id 属性方便定位位置-->
<a href = "#tips">link to tips</a> <!--这个链接会指向同一网页 tips 所在位置-->
<a href = "https://www.example.com#tips">link to tips</a>
<!--这个链接会指向指定网页 tips 所在位置-->
4.CSS
CSS (Cascading Style Sheets，层叠样式表) 是用于渲染HTML元素标签的样式。
CSS 主要在 HTML 中的呈现方式有如下几种：
\(\circ\) 内部样式：在 HTML 元素的内部属性中使用 "style" 属性
\(\circ\) 内部样式表：在 HTML 文档头部 <head> 区域使用 <style> 元素来包含 CSS（在头部中介绍的 <style> 元素）
\(\circ\) 外部引用：使用外部 CSS 文件（在头部中介绍的 <link> 元素）
故此处主要对内部样式进行笔记：
<h1 style = "background-color : yellow;">将标题的颜色改为黄色</h1> <!--注意分号-->
<p style = "font-family : arial; color : red; font-size : 20px;">修改段落的字体、颜色、字体大小</p>
<h1 style = "text-align : center;">居中对齐</h1>
5. 图像
定义图像的格式为：
<img src = "url" alt = "some_text">
其中 src 为 source 的简写，指原属性，其值为图像的 URL 地址。URL 指存储图像的位置。
alt 属性用来定义一串预备可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
可以通过 width、height 调节图片宽高。
<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
<img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
<map name = "example">
<area shape = "rect" coords = "0, 0, 82, 126", herf = "a1.html" alt = "a1">
<!--shape 属性定义映射区域的形状，coords 属性定义映射区域范围-->
<area shape = "circle" coords = "90, 58, 3" href = "a2.html" alt = "a2">
</map>
6.表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。
<table border = "1" cellpadding = "10"> <!--border 属性定义边框的宽度，cellpadding 定义单元格边距-->
<caption>表格标题</caption>
<colgroup> <!--对表格中的列进行组合，便于对其进行格式化-->
<col span = "2" style = "background-color:red">
<col style = "background-color:yellow">
</colgroup>
<tr>
<th>Header 1</th>
<th colspan = "2">Header 2</th>
<!--表头使用 th 标签进行定义-->
</tr>
<tr>
<td rowspan = "2">row 1, cell 1</td>
<!--rowspan、colspan 属性使单元格跨行跨列-->
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>
<thead>、<tbody>、<tfoot>元素应结合起来使用，用来规定表格的各个部分。
通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
7.列表
<ul>
<li>Nickel</li>
<li>Windy</li>
</ul> <!--无序列表 <li> 定义列表的一行-->
<ol>
<li>Nickel</li>
<li>Windy</li>
</ol> <!--有序列表（列表的项目有标号）-->
<dl>
<dt>项目1</dt>
<dd>内容</dd>
<dt>项目2</dt>
<dd>内容</dd>
</dl> <!--自定义列表-->
8.布局
可以用 div 标签将页面分成多个部分从而达到给页面布局的效果。可以用 span 标签来修订文字格式。
<div id = "example" style = "width = 100px">
<!--区块内容-->
</div> <!--在 style 属性中可以设置其宽度与背景，span 标签同理-->
<span style = "color:purple">Nickel_Angel</span>
9.表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置（其中 <input> 标签定义输入数据的属性）：
<form action = "receiver.php"> <!--action 属性定义了表单的信息去向-->
First name:<input type = "text" name = "First name"> <!--type 表明输入数据的属性，text 为正常的文本字段-->
Password:<input type = "password" name = "pwd"> <!--password 为密码字段，输入的文本会被隐藏-->
<input type = "radio" name = "Auto save" value = "Auto_save">Auto save
<input type = "checkbox" name = "hobby" value = "collection">Collection
<input type = "checkbox" name = "hobby" value = "cycling">Cycling
<!--radio 为单选按钮，checkbox 为多选按钮，注意它们必须有 value 属性，以便数据的传输-->
<select name = "problem">
<option value = "A">A<\option>
<option value = "B" selected>B<\option> <!--option 是下拉列表，默认预选第一个，如果有 selected 属性就预选有属性的那一个-->
<input type = "submit" value = "Submit"> <!--sumbit 是提交按钮，value 中的内容是提交按钮上的文本-->
</form>
10.框架
框架由 <ifname> 标签定义，用于在一个窗口中多个页面的显示。
<ifname src = "example.html" width = "100" height = "100" frameboarder = "0" name = "example">
<!--src 为指向的网页地址，width, height 为宽高，frameboarder 为边框厚度-->
<p><a href = "Nickel.windy" target = "example">Nickel<\a><\p>
<!--点击这个链接，可以使上方框架的内容变为显示 Nickel.windy-->
11.颜色
话说这个应当属于十六进制颜色码的相关知识点
由于光的三原色为红绿蓝（Red Green Blue），所以只要按照一定比例将它们混合，就可以调出任意颜色，为了方便表示，我们用十六进制颜色码来描述特定的颜色，其由一个十六机制符号来定义，这个符号由三原色的值来定义，每种颜色最小值为 0（#00），最大值为 \(16^2 - 1 = 255\)（#FF）
十六进制颜色码有六位，每两位一组，按照 RGB 的顺序依次表明三原色的值。显然，十六进制颜色码可以表示出 \(2^{24} = 16777216\) 种颜色。
我们在调整元素的颜色属性时，可直接用十六进制颜色码来表示颜色，或者使用 rgb 或 rgba，根据 html 颜色规范，对于特定的 141 种颜色我们可以直接使用其英文名称。
<p style = "background-color:red">Red</p>
<p style = "background-color:#FF0000">Red</p>
<p style = "background-color:rgb(255, 0, 0)">Red</p>
<p style = "background-color:rgba(255, 0, 0, 1)">Red</p>
<!--rgba 在 rgb 的基础上拓展了 alpha 通道，可以调整颜色透明度，数值范围为 0 ~ 1，代表全透明到不透明-->
12.脚本
<script>
document.write("Hello World");
</script> <!--script 标签内的 JavaScript 语句会被执行，也可用 src 属性指向外部脚本文件-->
<nonscript>您的浏览器似乎不支持 JavaScript 呢 >_<</nonscript>
<!--nonscript 用于浏览器不支持 JavaScript 时所现实的文本-->
13.字符实体
由于 html 文档中有预留字符，如大于号 > 和小于号 < ，使得我们无法直接使用这个字符，否则可能会被识别为标签。所以如果要正确现实预留字符，就必须在 html 源代码中使用字符实体，其格式为：
&entity_name; or &#entity_number;
特别的，如果想在文本中连续加入多个空格的话，需要使用字符实体  （Non-breaking Space，非间断空格）
14.URL
URL（Uniform Resource Locators，统一资源定位器）是一个网页地址，可以由字母组成，或者直接为互联网协议（IP）地址。
其语法规则为：scheme://host.domain:port/path/filename
scheme 定义因特网服务类型。（大多为 https）
host 定义域主机。（http 的默认主机为 www）
domain 定义因特网域名。
:port 定义主机的端口号。（http 默认端口号为 80）
path 定义服务器上的路径。（如果省略，则文档必须位于网站的根目录中）
filename 定义文档、资源的名称。
URL 中只能使用 ASCII 字符集来通过因特网进行发送，由于 URL 经常包含 ASCII 字符集以外的字符，所以 URL 会用 “%” 其后跟随两位十六进制数来替换非 ASCII 字符。
URL 不能包含空格，空格在 URL 中常用 "+" 代替。
