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

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>
  14. <p><strong>无序列表</strong>
  15. <ul> <!-- unordered list -->
  16. <li>Baidu</li>
  17. <li>Google</li>
  18. <li>Facebook</li>
  19. </ul>
  20. <p><strong>定义列表</strong>
  21. <dl> <!-- definition list -->
  22. <dt>Baidu</dt> <!-- 项目名称 -->
  23. <dd>https://www.baidu.com</dd> <!-- 项目内容 -->
  24. <dt>Google</dt>
  25. <dd>https://www.google.com</dd>
  26. <dt>Facebook</dt>
  27. <dd>https://www.facebook.com</dd>
  28. </dl>
  29. </body>
  30. </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 表单元素(自闭合标签)外,还有其他的表单元素,比如普通按钮、下拉框、文本域(多行文本输入)等。

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