[关闭]
@Otokaze 2018-12-09T16:54:00.000000Z 字数 15808 阅读 742

HTML 笔记

html

HTML 是什么

维基百科：

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面[1]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。

HTML可以嵌入如JavaScript的脚本语言，它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表（CSS）来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟（W3C）鼓励人们使用CSS替代一些用于表现的HTML元素[2]。

简单地说：HTML 是标记语言，其核心是 HTML 元素，本身只是纯文本，浏览器会根据 HTML 文档来渲染网页。

HTML 与 CSS 是一对好兄弟，一般来说，有 HTML 的地方，一定少不了 CSS 的身影。CSS 全称 Cascading Style Sheets，中文 层叠样式表。HTML 是一堆标签（准确说是 HTML 元素），而 CSS 则是这些标签的皮肤（样式）；换个比喻，HTML 是骨架，CSS 则是皮肤。默认的 HTML 元素样式很土，很难看，使用 CSS 可以自由的修改 HTML 元素的样式。

不过，为了提高网页的交互性，JavaScript 也是少不了的。JavaScript 和 Java 没有半点关系，只不过当时 Java 比较火，JavaScript 为了蹭热度而已。几乎所有的浏览器都支持 JavaScript，最主要的是，JS 可以直接嵌入到 HTML 文档中（使用<script>javascript code</script>）。再次声明，JS 是在浏览器中执行的，而 PHP、JSP、ASP 这些是在服务器上执行的，它们的执行结果是产生一个 HTML 文档！因为 HTML 文档是动态生成的，因此也被称为动态网页，而之前我们说的是静态网页。

最小的 HTML

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>hello, world!</title>
  5.     </head>
  6.     <body>
  7.         <h1>hello, world!</h1>
  8.     </body>
  9. </html>

Chrome 打开如右图所示：HTML 最小版本

因为它很简陋，暂且就叫它 HelloWorld 吧！以下是详细解释：

HTML 标签

HTML 元素

HTML 文档是由 HTML 元素定义的。

HTML 元素由开始标签、元素内容、结束标签三部分组成。特别的，如果 HTML 元素的内容为空，即空元素，则通常会表示为<tag />，称为自闭合标签（在 HTML5 中，可以省略 /，即<tag>，不过我个人仍然喜欢前者）。

开始标签 元素内容 结束标签
<p> 这是一个段落（paragraph） </p>
<a href="target.html"> 这是一个链接（link） </a>
<br /> - -

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。HTML 文档由嵌套的 HTML 元素构成。

HTML 属性

例如，HTML 链接由<a>标签定义，链接的地址在 href（Hypertext Reference）属性中指定：<a href="https://www.baidu.com">百度一下，你就知道！</a>。

以下属性适用于大多数 HTML 元素：

属性 值 描述
class classname 规定元素的类名（classname）
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式（inline style）
title text 规定元素的额外信息（鼠标移至元素时显示）

块级元素、行内元素

行内元素和块级元素转换
display:block (将表现形式设为块级元素)
display:inline (将表现形式设为行内元素)

常见的块级元素：
<address>、<article>、<aside>、<audio>
<blockquote>、<canvas>、<dd>、<div>、<dl>
<fieldset>、<figcaption>、<figure>、<footer>、<form>
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
<header>、<hgroup>、<hr>、<noscript>、<ol>、<output>
<p>、<pre>、<section>、<table>、<tfoot>、<ul>、<video>

常见的行内元素：

HTML 基本标签

注释
HTML 注释的一般形式：<!-- This is a comment -->
我们可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

标题
标题（Heading）是通过<h1>-<h6>定义的。
<h1>定义最大的标题，<h6>定义最小的标题。
默认情况下，浏览器会自动地在块级元素前后添加一个空行，比如段落、标题元素。

水平线
<hr />标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

段落
HTML 段落是通过 <p> 标签定义的。
浏览器会自动地在段落的前后添加空行，因为<p>是块级元素。

换行
如果您希望在不产生一个新段落的情况下进行换行，请使用<br />标签。注意，不能直接输入一个回车，这只会显示一个空格，制表符 TAB 也是一样的道理，都是显示一个空格。

空格
如果你只需要插入（文本中间，非边界）一个空格符，可以直接使用空格键输入。但是如果需要输入多个空格符，必须使用HTML字符实体引用，空格对应的字符实体引用为&nbsp;，比如输入一个空格：&nbsp;，输入两个空格&nbsp;&nbsp;。你不要期望直接输入连续的空格会有效果，实际上只会显示一个空格。

字符实体引用
字符实体引用(character entity reference)，是 HTML 文档中的"转移序列"，通常用于表示无法直接输入的特殊字符。它有三种表示形式：

在 HTML 中，任何前导空白、后尾空白都会被浏览器去除，而字符间的空白只会显示为一个空格，不论你输入了多少空格、制表、换行。

HTML 字符实体引用：https://dev.w3.org/html5/html-author/charref

常见的一些字符实体引用：

内联样式
在 HTML 中，引用 CSS 样式有三种方式：内联样式、内部样式表、外部样式表。

文本格式化
<b>：粗体字
<i>：斜体字
<strong>：粗体强调
<em>：斜体强调
<small>：小号字
<sup>：上标字
<sub>：下标字
<ins>：下划线
<del>：删除线

代码格式化
<code>：程序代码
<samp>：代码示例
<kbd>：键盘代码
<var>：定义变量
<pre>：预格式文本（保留连续空格、制表符、换行符）

引用、术语定义
<q>：定义文本引用（短）
<blockquote>：定义段落引用（长）
<abbr>：定义缩写（使用 title 属性描述全称）
<address>：定义地址（默认为斜体显示）
<dfn>：定义一个项目
<cite>：定义著作标题
<bdo>：定义文字方向（从左到右、从右到左）

链接
<a>元素有两个用途：

  1. 定义一个超链接，使用href属性，指定 URL
  2. 定义一个书签，使用id属性，然后使用#ID引用

a 标签还有一个常用属性target，默认情况下，a 标签指定的链接会在当前页面中打开，而使用target="_blank"可以在新窗口打开链接。

图片
<img src="url" />，用来引用一个图片（jpg、png、gif 等）。除了 src 属性外，还有一个 alt 属性，用于描述图片的文本信息（通常是在图片无法加载的情况下显示）。

表格

  1. <table>
  2.   <thead>
  3.     <tr>
  4.       <th>表头A</th>
  5.       <th>表头B</th>
  6.       <th>表头C</th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td>表体A</td>
  12.       <td>表体B</td>
  13.       <td>表体C</td>
  14.     </tr>
  15.   </tbody>
  16.   <tfoot>
  17.     <tr>
  18.       <td>表尾A</td>
  19.       <td>表尾B</td>
  20.       <td>表尾C</td>
  21.     </tr>
  22.   </tfoot>
  23. </table>

thead、tbody、tfoot 可以省略，以下是图解：
thead、tbody、tfoot 关系

给表格的列（Column）分组：<colgroup>定义组，colgroup 中包含<col>元素。
HTML 表格 colgroup 分组

  1. <table border="1">
  2.   <caption>表格列分组</caption>
  3.   <colgroup>
  4.     <col span="2" style="background-color:red" />
  5.     <col style="background-color:green" />
  6.     <col style="background-color:blue" />
  7.   </colgroup>
  8.   <tr>
  9.     <th>First Name</th>
  10.     <th>Last Name</th>
  11.     <th>Age</th>
  12.     <th>Score</th>
  13.   </tr>
  14.   <tr>
  15.     <td>Chet</td>
  16.     <td>Mattson</td>
  17.     <td>16</td>
  18.     <td>79</td>
  19.   </tr>
  20.   <tr>
  21.     <td>Leon</td>
  22.     <td>Robinson</td>
  23.     <td>15</td>
  24.     <td>84</td>
  25.   </tr>
  26.   <tr>
  27.     <td>Juan</td>
  28.     <td>Ebersole</td>
  29.     <td>17</td>
  30.     <td>56</td>
  31.   </tr>
  32. </table>

colspan跨列合并、rowspan跨行合并，实现下图所示的表格：
经典排序算法总结

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" /> <!-- UTF-8 字符编码 -->
  5.     <title>各种常用排序算法</title>
  6.     <style type="text/css">
  7.       * {
  8.         letter-spacing : 1px; /* 字符间距 */
  9.       }
  10.       .table-head-summary {
  11.         color : white;
  12.         background-color : #012060;
  13.       }
  14.       .table-head-details {
  15.         background-color : #94CCDD;
  16.       }
  17.       .sort-algo-name {
  18.         font-weight : bold;
  19.         text-align : center;
  20.         background-color : #F5C293;
  21.       }
  22.       .sort-algo-attr {
  23.         text-align : center;
  24.         background-color : #FFC100;
  25.       }
  26.       .radix-sort-desc {
  27.         text-align : center;
  28.         background-color : #01AF50;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <table border="1" bordercolor="#000000"
  34.            cellspacing="0" cellpadding="8"
  35.            style="border-collapse:collapse">
  36.       <tr>
  37.         <th class="table-head-summary" colspan="7">各种常用排序算法</th>
  38.       </tr>
  39.       <tr>
  40.         <th class="table-head-details" rowspan="2">类别</th>
  41.         <th class="table-head-details" rowspan="2">排序方法</th>
  42.         <th class="table-head-details" colspan="3">时间复杂度</th>
  43.         <th class="table-head-details">空间复杂度</th>
  44.         <th class="table-head-details" rowspan="2">稳定性</th>
  45.       </tr>
  46.       <tr>
  47.         <th class="table-head-details">平均情况</th>
  48.         <th class="table-head-details">最好情况</th>
  49.         <th class="table-head-details">最坏情况</th>
  50.         <th class="table-head-details">辅助存储</th>
  51.       </tr>
  52.       <tr>
  53.         <td class="sort-algo-name" rowspan="2">插入排序</td>
  54.         <td class="sort-algo-name">直接插入</td>
  55.         <td class="sort-algo-attr">O(n<sup>2</sup>)</td>
  56.         <td class="sort-algo-attr">O(n)</td>
  57.         <td class="sort-algo-attr">O(n<sup>2</sup>)</td>
  58.         <td class="sort-algo-attr">O(1)</td>
  59.         <td class="sort-algo-attr">稳定</td>
  60.       </tr>
  61.       <tr>
  62.         <td class="sort-algo-name">shell排序</td>
  63.         <td class="sort-algo-attr">O(n<sup>1.3</sup>)</td>
  64.         <td class="sort-algo-attr">O(n)</td>
  65.         <td class="sort-algo-attr">O(n<sup>2</sup>)</td>
  66.         <td class="sort-algo-attr">O(1)</td>
  67.         <td class="sort-algo-attr">不稳定</td>
  68.       </tr>
  69.       <tr>
  70.         <td class="sort-algo-name" rowspan="2">选择排序</td>
  71.         <td class="sort-algo-name">直接选择</td>
  72.         <td class="sort-algo-attr">O(n<sup>2</sup>)</td>
  73.         <td class="sort-algo-attr">O(n<sup>2</sup>)</td>
  74.         <td class="sort-algo-attr">O(n<sup>2</sup>)</td>
  75.         <td class="sort-algo-attr">O(1)</td>
  76.         <td class="sort-algo-attr">不稳定</td>
  77.       </tr>
  78.       <tr>
  79.         <td class="sort-algo-name">堆排序</td>
  80.         <td class="sort-algo-attr">O(nlog<sub>2</sub>n)</td>
  81.         <td class="sort-algo-attr">O(nlog<sub>2</sub>n)</td>
  82.         <td class="sort-algo-attr">O(nlog<sub>2</sub>n)</td>
  83.         <td class="sort-algo-attr">O(1)</td>
  84.         <td class="sort-algo-attr">不稳定</td>
  85.       </tr>
  86.       <tr>
  87.         <td class="sort-algo-name" rowspan="2">交换排序</td>
  88.         <td class="sort-algo-name">冒泡排序</td>
  89.         <td class="sort-algo-attr">O(n<sup>2</sup>)</td>
  90.         <td class="sort-algo-attr">O(n)</td>
  91.         <td class="sort-algo-attr">O(n<sup>2</sup>)</td>
  92.         <td class="sort-algo-attr">O(1)</td>
  93.         <td class="sort-algo-attr">稳定</td>
  94.       </tr>
  95.       <tr>
  96.         <td class="sort-algo-name">快速排序</td>
  97.         <td class="sort-algo-attr">O(nlog<sub>2</sub>n)</td>
  98.         <td class="sort-algo-attr">O(nlog<sub>2</sub>n)</td>
  99.         <td class="sort-algo-attr">O(n<sup>2</sup>)</td>
  100.         <td class="sort-algo-attr">O(nlog<sub>2</sub>n)</td>
  101.         <td class="sort-algo-attr">不稳定</td>
  102.       </tr>
  103.       <tr>
  104.         <td class="sort-algo-name" colspan="2">归并排序</td>
  105.         <td class="sort-algo-attr">O(nlog<sub>2</sub>n)</td>
  106.         <td class="sort-algo-attr">O(nlog<sub>2</sub>n)</td>
  107.         <td class="sort-algo-attr">O(nlog<sub>2</sub>n)</td>
  108.         <td class="sort-algo-attr">O(n)</td>
  109.         <td class="sort-algo-attr">稳定</td>
  110.       </tr>
  111.       <tr>
  112.         <td class="sort-algo-name" colspan="2">基数排序</td>
  113.         <td class="sort-algo-attr">O(d(r+n))</td>
  114.         <td class="sort-algo-attr">O(d(n+rd))</td>
  115.         <td class="sort-algo-attr">O(d(r+n))</td>
  116.         <td class="sort-algo-attr">O(rd+n)</td>
  117.         <td class="sort-algo-attr">稳定</td>
  118.       </tr>
  119.       <tr>
  120.         <td class="radix-sort-desc" colspan="7">
  121.           注：基数排序的复杂度中，r代表关键字的基数，d代表长度，n代表关键字的个数
  122.         </td>
  123.       </tr>
  124.     </table>
  125.   </body>
  126. </html>

最终效果如图所示（截图）：HTML 合并单元格示例

列表
HTML 列表有三种：有序列表、无序列表、定义列表

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>HTML 三种列表</title>
  6.   </head>
  7.   <body>
  8.     <p><strong>有序列表</strong>
  9.     <ol> <!-- ordered list -->
  10.       <li>Baidu</li>
  11.       <li>Google</li>
  12.       <li>Facebook</li>
  13.     </ol>
  15.     <p><strong>无序列表</strong>
  16.     <ul> <!-- unordered list -->
  17.       <li>Baidu</li>
  18.       <li>Google</li>
  19.       <li>Facebook</li>
  20.     </ul>
  22.     <p><strong>定义列表</strong>
  23.     <dl> <!-- definition list -->
  24.       <dt>Baidu</dt> <!-- 项目名称 -->
  25.         <dd>https://www.baidu.com</dd> <!-- 项目内容 -->
  26.       <dt>Google</dt>
  27.         <dd>https://www.google.com</dd>
  28.       <dt>Facebook</dt>
  29.         <dd>https://www.facebook.com</dd>
  30.     </dl>
  31.   </body>
  32. </html>

网页效果如图所示：HTML 三种列表

div、span
<div>：块级标签，可做为其它元素的容器，常用来布局
<span>：行内元素，通常作为文本的容器，以应用 CSS 样式

script、noscript
<script>标签用于包含 javascript 代码（默认），有两种方式：
1. <script>javascript code</script>，直接嵌入到 HTML 文档中，适用于少量的 JS 代码；
2. <script src="script.js"></script>，引用外部的 javascript 脚本，适用于大量的 JS 代码。

<noscript>标签可包含其他 HTML 标签，一般用于不支持 JS 或者禁用了 JS 的浏览器，显示替代、提示文本（比如，提示用户启用 javascript 功能）。如果浏览器支持 JS 或者启用了 JS，则 noscript 元素将被忽略。

比如，利用 javascript 获取当前时间：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>noscript test</title>
  6.   </head>
  7.   <body>
  8.     <button type="button" onclick="getTime()">点击获取当前时间</button><span id="result"></span>
  9.     <script>
  10.       function getTime() {
  11.         document.getElementById("result").innerHTML = " " + Date();
  12.       }
  13.     </script>
  14.     <noscript>
  15.       <p style="color:red; font-weight:bold; font-size:32px;">
  16.         你的浏览器不支持 JavaScript 或者已禁用 JavaScript！
  17.       </p>
  18.     <noscript>
  19.   </body>
  20. </html>

启用 javascript：启用 javascript
禁用 javascript：禁用 javascript

头部元素
<head>元素是所有头部元素的容器，可以放置在 head 标签内的元素有：<title>, <base>, <link>, <style>, <meta>, <script>, <noscript>。

URL 编码
百分号编码（英语：Percent-encoding），也称作URL编码（英语：URL encoding），是特定上下文的统一资源定位符 (URL)的编码机制。实际上也适用于统一资源标志符（URI）的编码。也用于为"application/x-www-form-urlencoded" MIME准备数据，因为它用于通过HTTP的请求操作(request)提交HTML表单数据。

URI所允许的字符分作保留字符与未保留字符。保留字符是那些具有特殊含义的字符。例如，斜线字符用于URL (或者更一般的，URI)不同部分的分界符。未保留字符没有这些特殊含义。百分号编码把保留字符表示为特殊字符序列。上述情形随URI与URI的不同版本规格会有轻微的变化。
URL 编码（百分号编码）

保留字符有特殊意义，如果需要表示一个保留字符，必须使用百分号编码方式。未保留字符是不需要进行 URL 编码转换的，这没有任何意义。如果 URL 中包含中文这些非 ASCII 字符，必须使用 URL 编码来表示。具体的编码规则：将要转义的字符转换为与之对应的 UTF-8 序列，然后在每个字节（每两个十六进制数）前面添加%百分号即可。比如，&的百分号编码为%26，中的百分号编码为%E4%B8%AD，中文的百分号编码为%E4%B8%AD%E6%96%87。

RGB 颜色
RGB 全称 red-green-blue，即红绿蓝三色。每个颜色的取值范围为 0~255，十六进制表示为 0~FF。现代浏览器支持 140 种颜色名，但是只有 16 种颜色名被 HTML4.01 规范支持：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。如下图所示：
HTML 4.01 spec 规定的 16 种标准颜色名

在 CSS 中，有以下几种常用的颜色表示方式：
1. color-name：以上 16 种标准的颜色名
2. #RRGGBB：所有浏览器均支持，其中 RR、GG、BB 为十六进制颜色码，0~FF
3. rgb(rrr,ggg,bbb)：所有浏览器均支持，其中 rrr、ggg、bbb 为十进制颜色码，0~255
4. rgb(rr%,gg%,bb%)：所有浏览器均支持，其中 rr、gg、bb 为十进制百分比值，0~100

表单
form 表单，用于搜集不同类型的用户输入，点击提交后，浏览器将表单数据以 name1=value1&name2=value2 的形式提交（GET或POST）给指定的表单处理程序（form-handler）。

表单在网页中主要负责的是数据采集功能，一个表单基本由三部分组成：

比如一个简单的登录界面：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>login page</title>
  6.   </head>
  7.   <body>
  8.     <form action="login.php" method="post">
  9.       username: <input type="text" name="username" /><br />
  10.       password: <input type="password" name="password" /><br />
  11.       <input type="submit" value="登录" />
  12.     </form>
  13.   </body>
  14. </html>

form 元素由两个重要属性：

  1. action：表单处理程序的 URL 地址，一般为 php、asp 动态页面，如果表单处理程序为当前页面，则不需要填写 action 属性；
  2. method：将数据传输给表单处理程序使用的 HTTP 请求方式，有两种取值：GET、POST，前者用于少量数据提交（如简单的查询），后者用于大量数据提交（如上传文件）。

<input> 元素是最重要的表单元素。<input> 根据不同的 type 属性有很多种形态。input 标签有三个常用属性：type数据类型、name提交给表单处理程序使用的名称、value初始值或者为预定值（看情况）。type 属性的取值有：

除了 type 属性外，还有一些其他常用且有用的属性：

当然，除了 input 表单元素（自闭合标签）外，还有其他的表单元素，比如普通按钮、下拉框、文本域（多行文本输入）等。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注