前端笔记整理完成

2026-04-13 16:49:43 +08:00 · 2022-04-18 23:03:54 +08:00
parent bb9110d289
commit 3d6284517e
50 changed files with 5685 additions and 15 deletions
--- a/HTML/html5-basics/first-html.md
+++ b/HTML/html5-basics/first-html.md
@@ -0,0 +1,196 @@
+## 示例代码
+
+```html
+<html>
+	<head>
+		<title>01_helloworld.html</title>
+	</head>
+	<body>
+		<!-- 这是第一个页面 helloworld -->
+		<font color="red">hello world!</font>
+	</body>
+</html>
+```
+
+示例代码说明:
+
+- html 标签: 定义 HTML 文档，HTML 文档的根标签。
+- head 标签: 定义关于文档的基本信息。
+- body 标签: 定义文档的主体，运行 HTML 文档时显示的内容。
+- title 标签: 定义文档的标题。在运行网页时，页面顶端显示的内容。
+- font 标签: 定义文字的字体、尺寸和颜色。
+
+## HTML元素（标签）
+
+HTML 标记标签通常被称为 HTML 标签，"HTML 标签" 和"HTML 元素" 通常都是描述同样的意思。（一个 HTML 元素包含了开始标签与结束标签）
+
+- HTML 标签是由尖括号包围的关键词，比如 `<html>`
+- HTML 标签通常是成对出现的，比如 `<b>` 和 `</b>`
+- 标签对中的第一个标签是开始标签，第二个标签是结束标签
+- 开始和结束标签也被称为开放标签和闭合标签
+
+> **值得注意的是:**
+> 
+> 不要忘记结束标签:
+> 
+> ```html
+> <font color="red">hello world!
+> ```
+> 
+> - 即使忘记了使用结束标签，大多数浏览器也会正确地显示 HTML。
+> - HTML 文档中，关闭标签是可选的。
+> - 不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
+> 
+> HTML 空元素:
+> 
+> - 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
+> - `<br>` 就是没有关闭标签的空元素（`<br>` 标签定义换行）。
+> - 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
+> - 在开始标签中添加斜杠，比如 `<br />`，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
+> - 即使 `<br>` 在所有浏览器中都是有效的，但使用 `<br />` 其实是更长远的保障。
+> 
+> 推荐使用小写标签:
+> 
+> - HTML 标签对大小写不敏感：`<P>` 等同于 `<p>`。许多网站都使用大写的 HTML 标签。
+> - 万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
+
+## HTML 属性
+
+```html
+<font color="red">hello world!</font>
+```
+
+属性是 HTML 元素提供的附加信息。
+
+- HTML 元素可以设置属性。
+- 属性可以在元素中添加附加信息。
+- 属性一般描述于开始标签。
+- 属性总是以名称/值对的形式出现，比如：name="value"。
+
+> **值得注意的是:**
+> 
+> HTML 属性常用引用属性值:
+> 
+> - 属性值应该始终被包括在引号内。
+> - 双引号是最常用的，不过使用单引号也没有问题。 在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号。
+> 
+> 推荐使用小写属性:
+> 
+> - 属性和属性值对大小写不敏感。
+> - 万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
+> - 新版本的 (X)HTML 要求使用小写属性。
+
+## HTML 注释
+
+```html
+<!-- 这是一个注释 -->
+```
+
+- 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
+- 浏览器会忽略注释，也不会显示它们。
+- 将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。
+- 合理地使用注释可以对未来的代码编辑工作产生帮助。
+
+## HTML 文档
+
+```
+HTML文档 = 网页
+```
+
+- HTML文档描述网页
+- HTML文档包含HTML标签和纯文本
+- HTML文档也被称为网页
+- HTML文档文件的后缀名为“.html”和“.htm”，两种后缀名没有任何区别
+
+## HTML 基本结构
+
+```html
+<html>
+	<head>
+	</head>
+	<body>
+	</body>
+</html>
+```
+
+## <!DOCTYPE> 声明
+
+<!DOCTYPE> 声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明 HTML 的版本，浏览器就能正确显示网页内容。
+
+- <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
+- <!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
+- 总是给您的 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。
+
+各个HTML版本的<!DOCTYPE> 声明应如何书写:
+
+- HTML 5
+
+```html
+<!DOCTYPE html>
+```
+
+- HTML 4.01 Strict
+
+	这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+```
+
+- HTML 4.01 Transitional
+
+	这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+```
+
+- HTML 4.01 Frameset
+
+	这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。
+
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
+```
+
+## HTML 头部
+
+### `<head>` 元素
+
+`<head>` 元素包含了所有的头部标签元素。在 `<head>` 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。
+
+可以添加在头部区域的元素标签为: `<title>`, `<style>`, `<meta>`, `<link>`, `<script>`, `<noscript>`, and `<base>`。
+
+### `<title>` 元素
+
+`<title>` 标签定义了不同文档的标题。`<title>` 在 HTML/XHTML 文档中是必须的。
+
+### `<base>` 元素
+
+`<base>` 标签描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接标签的默认链接。
+
+### `<link>` 元素
+
+`<link>` 标签定义了一个文档和外部资源之间的关系。
+
+### `<style>` 元素
+
+`<style>` 标签定义了HTML文档的样式文件引用地址。
+
+### `<meta>` 元素
+
+meta 标签描述了一些基本的元数据。`<meta>` 标签提供了元数据。元数据也不显示在页面上，但会被浏览器解析。
+
+meta 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务。
+
+> **`<meta>` 标签使用实例**
+> 
+> - 为搜索引擎定义关键词:
+> 
+> ```html
+> <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
+> ```
+> 
+> - 为网页定义描述内容:
+> 
+> ```html
--- a/HTML/html5-basics/html-basics-element.md
+++ b/HTML/html5-basics/html-basics-element.md
@@ -0,0 +1,59 @@
+## 示例代码
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>06_基本元素实例.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <h1 align="center">春晓</h1>
+	<hr align="center" width="30%">
+	<p align="center">
+		春眠不觉晓， <br>
+		处处闻啼鸟。<br>
+		夜来风雨声，<br>
+		花落知多少。<br>
+	</p>
+  </body>
+</html>
+```
+
+## HTML 标题
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>02_标题元素.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <h1>这是标题 1</h1>
+	<h2>这是标题 2</h2>
+	<h3>这是标题 3</h3>
+	<h4>这是标题 4</h4>
+	<h5>这是标题 5</h5>
+	<h6>这是标题 6</h6>
+  </body>
+</html>
+```
+
+在 HTML 文档中，标题很重要。
+
+- 标题（Heading）是通过 `<h1>` - `<h6>` 标签进行定义的。
+- `<h1>` 定义最大的标题。 `<h6>` 定义最小的标题。
+- 浏览器会自动地在标题的前后添加空行。
+- 用户可以通过标题来快速浏览您网页。
+
+> **值得注意的是:**
+> 
+> - 标题（Heading）在浏览器运行显示的效果并不重要。（后面可以通过 CSS 进行修改）
+> - 标题（Heading）更重要的在于其语义化。
+> - 搜索引擎检索 HTML 页面时，`<h1>` 元素仅次于 `<title>` 元素。
+> - 一般一个 HTML 页面中只包含一个 `<h1>` 元素。
+
+## 段落
+
+```html
--- a/HTML/html5-basics/html-form.md
+++ b/HTML/html5-basics/html-form.md
@@ -0,0 +1,113 @@
+## `<form>` 表单
+
+表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
+
+| 属性名 | 值 | 描述 |
+| --- | --- | --- |
+| action | URL | 规定当提交表单时向何处发送表单数据。|
+| method | get/post | 规定用于发送表单数据的 HTTP 方法。|
+| name | text | 规定表单的名称。|
+
+## 文本框
+
+文本框通过 `<input type="text">` 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本框。
+
+- `<input>` 元素是空的,它只包含标签属性。
+- 你可以使用 `<label>` 元素来定义 `<input>` 元素的标注。
+- 表单本身并不可见。同时，在大多数浏览器中，文本框的缺省宽度是 20 个字符。
+- `<input>` 元素在 `<form>` 元素中使用，用来声明允许用户输入数据的 input 控件。
+
+| 属性名 | 值 | 描述 |
+| --- | --- | --- |
+| type | button/checkbox/radio/password | type 属性规定要显示的 `<input>` 元素的类型。|
+| value | text | 设置值。 |
+| src | URL | src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")|
+| size | number | size 属性规定以字符数计的 `<input>` 元素的可见宽度。|
+| readonly | readonly | readonly 属性规定输入字段是只读的。|
+| disabled | disabled | disabled 属性规定应该禁用的 `<input>` 元素。|
+| checked | checked | checked 属性规定在页面加载时应该被预先选定的 `<input>` 元素。 (只针对 type="checkbox" 或者 type="radio")|
+
+示例代码:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>28_文本框.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <form id="form1" name="form1" action="#" method="post">
+    	用户名:<input type="text" id="username" name="username" value="用户名">
+		密码:<input type="text" id="password" name="password" value="密码" readonly="readonly">
+		确认密码:<input type="text" id="password" name="password" value="密码" disabled="true">
+    </form>
+  </body>
+</html>
+```
+
+## 密码字段
+
+密码字段通过标签 `<input type="password">` 来定义。
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>29_密码框.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <form id="form1" name="form1" action="#" method="post">
+    	用户名:<input type="text" id="username" name="username">
+		密码:<input type="password" id="password" name="password">
+    </form>
+  </body>
+</html>
+```
+
+## 单选按钮
+
+`<input type="radio">` 标签定义了表单单选框选项。
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>30_单选框.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <form id="form1" name="form1" action="#" method="post">
+		性别:
+		<input type="radio" checked="checked" id="male" name="sex" value="male">男
+		<input type="radio" id="female" name="sex" value="female">女<br>
+    </form>
+  </body>
+</html>
+```
+
+## 复选框
+
+`<input type="checkbox">` 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>31_复选框.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <form id="form1" name="form1" action="#" method="post">
+		爱好:
+		<input type="checkbox" checked="checked" id="java" name="like" value="java">java
+		<input type="checkbox" id="PHP" name="like" value="PHP">PHP
+    </form>
+  </body>
+</html>
+```
+
+## 下拉列表
+
+### `<select>` 元素用来创建下拉列表。
--- a/HTML/html5-basics/html-introduce.md
+++ b/HTML/html5-basics/html-introduce.md
@@ -0,0 +1,22 @@
+## 什么是 HTML
+
+HTML 的全称为 Hyper Text Markup Language，译为超文本标记语言。
+
+**超文本**，就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
+
+**标记语言**，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记进行标识。
+
+## 发展历史
+
+1980年，蒂姆·伯纳斯-李为使世界各地的物理学家能够方便的进行合作研究，创建了使用于其系统的 HTML。Tim Berners-Lee 设计的 HTML 以纯文字格式为基础，可以使用任何文本编辑器处理，最初仅有少量标记（TAG）而易于掌握运用。随着 HTML 使用率的增加，人们不满足只能看到文字。
+
+1993年，还是大学生的马克·安德生在他的 Mosaic 浏览器加入 `<img>` 标记，从此可以在 Web 页面上浏览图片。但人们认为仅有图片还是不够，希望可将任何形式的媒体加到网页上。因此 HTML 不断地扩充和发展。
+
+## 标准的版本历史
+
+- 超文本标记语言（第一版）—— 在 1993 年 6 月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
+- HTML 2.0 —— 1995 年 11 月作为 RFC 1866 发布，在 RFC 2854 于 2000 年 6 月发布之后被宣布已经过时
+- HTML 3.2 —— 1997 年 1 月 14 日，W3C 推荐标准
+- HTML 4.0 —— 1997 年 12 月 18 日，W3C 推荐标准
+- HTML 4.01（微小改进）—— 1999 年 12 月 24 日，W3C 推荐标准
+- HTML 5 的第一份正式草案已于 2008 年 1 月 22 日公布，仍继续完善
--- a/HTML/html5-basics/html-list.md
+++ b/HTML/html5-basics/html-list.md
@@ -0,0 +1,69 @@
+## 有序列表
+
+有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 `<ol>` 标签。每个列表项始于 `<li>` 标签。
+
+### `<ol>` 标签定义了一个有序列表. 列表排序以数字来显示。
+
+| 属性名 | 值 | 描述 |
+| --- | --- | --- |
+| start | number | **HTML5不支持，不赞成使用。**请使用样式取代它。 规定列表中的起始点。|
+| type | 1   A   a   I   i | 规定列表的类型。|
+
+### `<li>` 标签定义列表项目。
+
+| 属性名 | 值 | 描述 |
+| --- | --- | --- |
+| value | number | **HTML5不支持，不赞成使用。**请使用样式取代它。 规定列表项目的数字。|
+| type | 1   A   a   I   i | 规定列表的类型。|
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>13_有序列表.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <h4>Numbered list:</h4>
+	<ol>
+	 <li>Apples</li>
+	 <li>Bananas</li>
+	 <li>Lemons</li>
+	 <li>Oranges</li>
+	</ol>  
+	<h4>Letters list:</h4>
+	<ol type="A">
+	 <li>Apples</li>
+	 <li>Bananas</li>
+	 <li>Lemons</li>
+	 <li>Oranges</li>
+	</ol>  
+	<h4>Lowercase letters list:</h4>
+	<ol type="a">
+	 <li>Apples</li>
+	 <li>Bananas</li>
+	 <li>Lemons</li>
+	 <li>Oranges</li>
+	</ol>  
+	<h4>Roman numbers list:</h4>
+	<ol type="I">
+	 <li>Apples</li>
+	 <li>Bananas</li>
+	 <li>Lemons</li>
+	 <li>Oranges</li>
+	</ol>  
+	<h4>Lowercase Roman numbers list:</h4>
+	<ol type="i">
+	 <li>Apples</li>
+	 <li>Bananas</li>
+	 <li>Lemons</li>
+	</ol>  
+  </body>
+</html>
+```
+
+## 无序列表
+
+无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
+
+### `<ul>` 标签定义无序列表。
--- a/HTML/html5-basics/html-table.md
+++ b/HTML/html5-basics/html-table.md
@@ -0,0 +1,104 @@
+## 基本表格
+
+表格由 `<table>` 标签来定义。每个表格均有若干行（由 `<tr>` 标签定义），每行被分割为若干单元格（由 `<td>` 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
+
+HTML表格元素:
+
+| 标签 | 属性 |
+| --- | --- |
+| `<table>` | 定义表格 |
+| `<th>` | 定义表格的表头 |
+| `<tr>` | 定义表格的行 |
+| `<td>` | 定义表格单元 |
+| `<caption>` | 定义表格标题 |
+| `<thead>` | 定义表格的页眉 |
+| `<tbody>` | 定义表格的主体 |
+| `<tfoot>` | 定义表格的页脚 |
+
+- 示例代码一:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>17_基本表格.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <table>
+		<tr>
+			<td><b>名称</b></td><td><b>性别</b></td><td><b>年龄</b></td>
+		</tr>
+		<tr>
+			<td>张三</td><td>男</td><td>18</td>
+		</tr>
+		<tr>
+			<td>李四</td><td>女 </td><td>16</td>
+		</tr>
+	</table>
+  </body>
+</html>
+```
+
+- 示例代码二:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>17_基本表格.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <table border="1" width="20%" rules="rows" frame="below">
+		<tr>
+			<td><b>名称</b></td><td><b>性别</b></td><td><b>年龄</b></td>
+		</tr>
+		<tr>
+			<td>张三</td><td>男</td><td>18</td>
+		</tr>
+		<tr>
+			<td>李四</td><td>女 </td><td>16</td>
+		</tr>
+	</table>
+  </body>
+</html>
+```
+
+- 示例代码三:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>17_基本表格.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <table border="1" width="20%">
+		<tr align="center">
+			<td><b>名称</b></td><td><b>性别</b></td><td><b>年龄</b></td>
+		</tr>
+		<tr>
+			<td>张三</td><td>男</td><td>18</td>
+		</tr>
+		<tr>
+			<td>李四</td><td>女 </td><td>16</td>
+		</tr>
+	</table>
+  </body>
+</html>
+```
+
+- 示例代码四:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>17_基本表格.html</title>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  </head>
+  <body>
+    <table border="1" width="20%">
+		<tr align="center">
--- a/HTML/html5-basics/image-element.md
+++ b/HTML/html5-basics/image-element.md
@@ -0,0 +1,22 @@
+img元素定义及使用说明:
+
+- `<img>` 标签定义 HTML 页面中的图像。
+- `<img>` 标签有两个必需的属性：src 和 alt。
+
+> **值得注意的是:**
+> 
+> - 从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。`<img>` 标签的作用是为被引用的图像创建占位符。
+> - 通过在 `<a>` 标签中嵌套 `<img>` 标签，给图像添加到另一个文档的链接。
+
+img元素的属性列表:
+
+| 属性名 | 值 | 描述 |
+| --- | --- | --- |
+| align | top\bottom\middle\left\right | HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。|
+| alt | text | 规定图像的替代文本。|
+| height | pixels | 规定图像的高度。|
+| src | URL | 规定显示图像的 URL。|
+| width | pixels | 规定图像的宽度。|
+
+```html
+<!DOCTYPE html>
--- a/HTML/html5-basics/link-element.md
+++ b/HTML/html5-basics/link-element.md
@@ -0,0 +1,22 @@
+HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
+
+- 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
+- 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
+- 在标签 `<a>` 中使用了href属性来描述链接的地址。
+
+> **值得注意的是:**
+> 
+> - 如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。
+> - 通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target。
+> - 请使用 CSS 来改变链接的样式。
+
+`<a>` 元素的属性列表:
+
+| 属性名 | 值 | 描述 |
+| --- | --- | --- |
+| href | URL | 规定链接的目标 URL。|
+| target | _blank/_parent/_self | 规定在何处打开目标 URL。仅在 href 属性存在时使用。|
+
+```html
+<!DOCTYPE html>
+<html>