HTML入门教程一口气讲完！（下）\^o^/

爱编程的鱼2024-10-13 12:33

HTML 表单

HTML 表单和输入

HTML 表单用于收集不同类型的用户输入。

在线实例

创建文本字段 (Text field)

本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。

创建密码字段

本例演示如何创建 HTML 的密码域。

（在本页底端可以找到更多实例。）

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。

表单使用表单标签 <form> 来设置:

<form>

.

input elements

.

</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。您可以在编程测试中创建文本输入框！

实例

<form>

姓名: <input type="text" name="firstname"><br>

电话号码: <input type="text" name="lastname">

</form>

尝试一下 >>

浏览器显示如下：

姓名:

电话号码:

**注意:**表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是 20 个字符。

密码字段

密码字段通过标签 <input type="password"> 来定义:

实例

<form>

密码: <input type="password" name="pwd">

</form>

尝试一下 >>

浏览器显示效果如下:

密码:

**注意:**密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项。在编程测试中练习使用单选按钮！

实例

<form>

<input type="radio" name="sex" value="male">男<br>

<input type="radio" name="sex" value="female">女

</form>

尝试一下 >>

浏览器显示效果如下:

男

女

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。在实战测试中学习使用复选框！

实例

<form>

<input type="checkbox" name="vehicle" value="Bike">我有自行车<br>

<input type="checkbox" name="vehicle" value="Car">我有小车

</form>

尝试一下 >>

浏览器显示效果如下:

我有自行车

我有小车

提交按钮 (Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

实例

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

尝试一下 >>

尝试一下 >>

浏览器显示截图效果如下:

假如您在文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

更多实例

单选按钮 (Radio buttons)

本例演示如何在 HTML 中创建单选按钮。

复选框 (Checkboxes)

本例演示如何在 HTML 页中创建复选框。用户可以选中或取消选取复选框。

简单的下拉列表

本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。

预选下拉列表

本例演示如何创建一个简单的带有预选值的下拉列表。

文本域 (Textarea)

本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。

创建按钮

本例演示如何创建按钮。你可以对按钮上的文字进行自定义。

表单实例

带边框的表单

本例演示如何在数据周围绘制一个带标题的框。

带有输入框和确认按钮的表单

本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。

带有复选框的表单

此表单包含两个复选框和一个确认按钮。

带有单选按钮的表单

此表单包含两个单选框和一个确认按钮。

从表单发送电子邮件

此例演示如何从表单发送电子邮件。

HTML 表单标签

New : HTML5 新标签

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签，一般为输入标题
<fieldset> 定义了一组相关的表单元素，并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> New 指定一个预先定义的输入控件选项列表
<keygen> New 定义了表单的密钥对生成器字段
<output> New 定义一个计算结果

HTML 框架

HTML 框架

<iframe>标签规定一个内联框架。

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

**　iframe 语法：**
<iframe src="URL"></iframe>

该URL指向不同的网页，将窗口内容显示为URL地址指向页面。

Iframe - 设置高度与宽度

height和width属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%").

实例

<iframe src="demo_iframe.htm" width="80%" height="80%"></iframe>

尝试一下 >>

Iframe - 移除边框

frameborder属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框:

实例

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

尝试一下 >>

使用 iframe 来显示目录链接页面

iframe可以显示一个目标链接的页面

目标链接的属性必须使用iframe的属性，如下实例：

实例

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3cschool.cn" target="iframe_a">W3CSCHOOL.CN</a></p>

尝试一下 >>

HTML iframe 标签

标签 说明
<iframe> 定义一个内联的 iframe

iframe 标准属性

属性 说明
class 规定元素的类名（classname）
id 规定元素的唯一 id
style 规定元素的行内样式（inline style）
title 规定元素的额外信息（可在工具提示中显示）

HTML <frameset>标签 - HTML5 不支持

<frameset>标签在一个页面中设置一个或多个框架，用<frameset>``</frameset>代替了<body>``</body>，不能出现在body标签里。

**　<frameset> 语法：**
<frameset>

<frame src="menu.html">

<frame src="content.html">

</frameset>

  • frameset- 建立框架的标记，将在其中定义各个框架。
  • frame src- 指示框架显示内容URL地址。

<frameset> - 设置行列比例

<frameset>标签中我们使用rows设置行的占页面的百分比；cols设置列的所占百分比。

实例

<frameset rows="20%,*">

<frame src="title.html">

<frameset cols="30%,*">

<frame src="menu.html">

<frame src="content.html">

</frameset>

</frameset>

尝试一下 >>

  • frameset cols- 确定每个框架列所占百分比。在前面的示例中，我们已经确定第一框架将占据所示区域的 30％，并且我们使用"*"符号来指示剩余百分比。
  • frameset rows- 确定将显示的每个框架行所占百分比。在前面的示例中，我们选择第一框架为 20％，剩下的剩余空间将在menu.html和content.html之间划分。

<frameset> - 设置边框

框架有一些边框线，大多数时候都不需要。<frameset>标签中我们使用frameborder和framespacing属性可以擦除它们。
注意： frameset和frameborder是相同的属性。

实例

<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">

<frame src="title.html">

<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">

<frame src="menu.html">

<frame src="content.html">

</frameset>

</frameset>

尝试一下 >>

  • frameborder-设置边框， 0 值表示没有边框
  • border- 修改边框的粗细（由 Netscape 浏览器使用）
  • framespacing- 修改边框的粗细（由 Internet Explorer 浏览器使用）

<frame> - 设置名字 - HTML5 不支持

<frame>标签中我们使用name属性命名每个框架，而不是内容页面。

实例

<frameset rows="20%,*">

<frame name="title" src="title.html">

<frameset cols="30%,*">

<frame name="menu" src="menu.html">

<name="content" src="content.html">

</frameset>

</frameset>

尝试一下 >>

<frame> - 设置滚动

<frame>标签中我们使用noresize设置禁止用户拖拉框架大小；scrolling用于设置滚动条是否显示。

实例

<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">

<frame src="title.html" noresize scrolling="no">

<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">

<frame src="menu.html" scrolling="auto" noresize>

<frame src="content.html" scrolling="yes" noresize>

</frameset>

</frameset>

尝试一下 >>

  • noresize- 不允许用户更改其尺寸。
  • scrolling- 设置滚动条是否显示。

HTML 颜色

HTML 颜色

HTML 颜色采用的是 RGB 颜色，是通过对红 (R)、绿 (G)、蓝 (B) 三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB 即是代表红、绿、蓝三个通道的颜色。

Color Values

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果：

颜色值

颜色(Color) 颜色十六进制 (Color HEX) 颜色 RGB (Color RGB)
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

尝试一下 >>

1600 万种不同颜色

三种颜色 红，绿，蓝的组合从 0 到 255，一共有 1600 万种不同颜色 (256 x 256 x 256)。您可以在编程测试中练习使用 RGB 红色表达方式！

在下面的颜色表中你会看到不同的结果，从 0 到 255 的红色，同时设置绿色和蓝色的值为 0 ，随着红色的值变化，不同的值都显示了不同的颜色。

Red Light Color HEX Color RGB
#000000 rgb(0,0,0)
#080000 rgb(8,0,0)
#100000 rgb(16,0,0)
#180000 rgb(24,0,0)
#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104,0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
#B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)

灰暗色调

以下展示了灰色到黑色的渐变

Gray Shades Color HEX Color RGB
#000000 rgb(0,0,0)
#080808 rgb(8,8,8)
#101010 rgb(16,16,16)
#181818 rgb(24,24,24)
#202020 rgb(32,32,32)
#282828 rgb(40,40,40)
#303030 rgb(48,48,48)
#383838 rgb(56,56,56)
#404040 rgb(64,64,64)
#484848 rgb(72,72,72)
#505050 rgb(80,80,80)
#585858 rgb(88,88,88)
#606060 rgb(96,96,96)
#686868 rgb(104,104,104)
#707070 rgb(112,112,112)
#787878 rgb(120,120,120)
#808080 rgb(128,128,128)
#888888 rgb(136,136,136)
#909090 rgb(144,144,144)
#989898 rgb(152,152,152)
#A0A0A0 rgb(160,160,160)
#A8A8A8 rgb(168,168,168)
#B0B0B0 rgb(176,176,176)
#B8B8B8 rgb(184,184,184)
#C0C0C0 rgb(192,192,192)
#C8C8C8 rgb(200,200,200)
#D0D0D0 rgb(208,208,208)
#D8D8D8 rgb(216,216,216)
#E0E0E0 rgb(224,224,224)
#E8E8E8 rgb(232,232,232)
#F0F0F0 rgb(240,240,240)
#F8F8F8 rgb(248,248,248)
#FFFFFF rgb(255,255,255)

Web 安全色?

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。

我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色，不过做选择还是你自己。

最初，216 跨平台 Web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

|--------|--------|--------|--------|--------|--------|
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |

HTML 常用颜色代码表

|---|---------|---|---------|---|---------|---|---------|---|---------|
| | #000000 | | #2F0000 | | #600030 | | #460046 | | #28004D |
| | #272727 | | #4D0000 | | #820041 | | #5E005E | | #3A006F |
| | #3C3C3C | | #600000 | | #9F0050 | | #750075 | | #4B0091 |
| | #4F4F4F | | #750000 | | #BF0060 | | #930093 | | #5B00AE |
| | #5B5B5B | | #930000 | | #D9006C | | #AE00AE | | #6F00D2 |
| | #6C6C6C | | #AE0000 | | #F00078 | | #D200D2 | | #8600FF |
| | #7B7B7B | | #CE0000 | | #FF0080 | | #E800E8 | | #921AFF |
| | #8E8E8E | | #EA0000 | | #FF359A | | #FF00FF | | #9F35FF |
| | #9D9D9D | | #FF0000 | | #FF60AF | | #FF44FF | | #B15BFF |
| | #ADADAD | | #FF2D2D | | #FF79BC | | #FF77FF | | #BE77FF |
| | #BEBEBE | | #FF5151 | | #FF95CA | | #FF8EFF | | #CA8EFF |
| | #d0d0d0 | | #ff7575 | | #ffaad5 | | #ffa6ff | | #d3a4ff |
| | #E0E0E0 | | #FF9797 | | #FFC1E0 | | #FFBFFF | | #DCB5FF |
| | #F0F0F0 | | #FFB5B5 | | #FFD9EC | | #FFD0FF | | #E6CAFF |
| | #FCFCFC | | #FFD2D2 | | #FFECF5 | | #FFE6FF | | #F1E1FF |
| | #FFFFFF | | #FFECEC | | #FFF7FB | | #FFF7FF | | #FAF4FF |
| | #000079 | | #000079 | | #003E3E | | #006030 | | #006000 |
| | #000093 | | #003D79 | | #005757 | | #01814A | | #007500 |
| | #0000C6 | | #004B97 | | #007979 | | #019858 | | #009100 |
| | #0000C6 | | #005AB5 | | #009393 | | #01B468 | | #00A600 |
| | #0000E3 | | #0066CC | | #00AEAE | | #02C874 | | #00BB00 |
| | #2828FF | | #0072E3 | | #00CACA | | #02DF82 | | #00DB00 |
| | #4A4AFF | | #0080FF | | #00E3E3 | | #02F78E | | #00EC00 |
| | #6A6AFF | | #2894FF | | #00FFFF | | #1AFD9C | | #28FF28 |
| | #7D7DFF | | #46A3FF | | #4DFFFF | | #4EFEB3 | | #53FF53 |
| | #9393FF | | #66B3FF | | #80FFFF | | #7AFEC6 | | #79FF79 |
| | #AAAAFF | | #84C1FF | | #A6FFFF | | #96FED1 | | #93FF93 |
| | #B9B9FF | | #97CBFF | | #BBFFFF | | #ADFEDC | | #A6FFA6 |
| | #CECEFF | | #ACD6FF | | #CAFFFF | | #C1FFE4 | | #BBFFBB |
| | #DDDDFF | | #C4E1FF | | #D9FFFF | | #D7FFEE | | #CEFFCE |
| | #ECECFF | | #D2E9FF | | #ECFFFF | | #E8FFF5 | | #DFFFDF |
| | #FBFBFF | | #ECF5FF | | #FDFFFF | | #FBFFFD | | #F0FFF0 |
| | #467500 | | #424200 | | #5B4B00 | | #844200 | | #642100 |
| | #548C00 | | #5B5B00 | | #796400 | | #9F5000 | | #842B00 |
| | #64A600 | | #737300 | | #977C00 | | #BB5E00 | | #A23400 |
| | #73BF00 | | #8C8C00 | | #AE8F00 | | #D26900 | | #BB3D00 |
| | #82D900 | | #A6A600 | | #C6A300 | | #EA7500 | | #D94600 |
| | #8CEA00 | | #C4C400 | | #D9B300 | | #FF8000 | | #F75000 |
| | #9AFF02 | | #E1E100 | | #EAC100 | | #FF9224 | | #FF5809 |
| | #A8FF24 | | #F9F900 | | #FFD306 | | #FFA042 | | #FF8040 |
| | #B7FF4A | | #FFFF37 | | #FFDC35 | | #FFAF60 | | #FF8F59 |
| | #C2FF68 | | #FFFF6F | | #FFE153 | | #FFBB77 | | #FF9D6F |
| | #CCFF80 | | #FFFF93 | | #FFE66F | | #FFC78E | | #FFAD86 |
| | #D3FF93 | | #FFFFAA | | #FFED97 | | #FFD1A4 | | #FFBD9D |
| | #DEFFAC | | #FFFFB9 | | #FFF0AC | | #FFDCB9 | | #FFCBB3 |
| | #E8FFC4 | | #FFFFCE | | #FFF4C1 | | #FFE4CA | | #FFDAC8 |
| | #EFFFD7 | | #FFFFDF | | #FFF8D7 | | #FFEEDD | | #FFE6D9 |
| | #F5FFE8 | | #FFFFF4 | | #FFFCEC | | #FFFAF4 | | #FFF3EE |
| | #613030 | | #616130 | | #336666 | | #484891 | | #6C3365 |
| | #743A3A | | #707038 | | #3D7878 | | #5151A2 | | #7E3D76 |
| | #804040 | | #808040 | | #408080 | | #5A5AAD | | #8F4586 |
| | #984B4B | | #949449 | | #4F9D9D | | #7373B9 | | #9F4D95 |
| | #AD5A5A | | #A5A552 | | #5CADAD | | #8080C0 | | #AE57A4 |
| | #B87070 | | #AFAF61 | | #6FB7B7 | | #9999CC | | #B766AD |
| | #C48888 | | #B9B973 | | #81C0C0 | | #A6A6D2 | | #C07AB8 |
| | #CF9E9E | | #C2C287 | | #95CACA | | #B8B8DC | | #CA8EC2 |
| | #D9B3B3 | | #CDCD9A | | #A3D1D1 | | #C7C7E2 | | #D2A2CC |
| | #E1C4C4 | | #D6D6AD | | #B3D9D9 | | #D8D8EB | | #DAB1D5 |
| | #EBD6D6 | | #DEDEBE | | #C4E1E1 | | #E6E6F2 | | #E2C2DE |
| | #F2E6E6 | | #E8E8D0 | | #D1E9E9 | | #F3F3FA | | #EBD3E8 |

PS:这里颜色无法显示，这里附上链接：HTML 颜色_w3cschool

HTML 颜色名

HTML 颜色名

目前所有浏览器都支持以下颜色名。

141 个颜色名称是在 HTML 和 CSS 颜色规范定义的（ 17 标准颜色，再加 124 ）。下表列出了所有颜色的值，包括十六进制值。

提示: 17 标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色。：

按颜色名排序

按十六进制的值排序

单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色。

Color Name HEX Color
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
DarkOrange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGray #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370DB
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #DB7093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32

HTML 颜色值

HTML 颜色值

颜色由红 (R)、绿 (G)、蓝 (B) 组成。

颜色值

颜色值由十六进制来表示红、绿、蓝（RGB）。

每个颜色的最低值为 0 (十六进制为 00 )，最高值为 255 (十六进制为 FF )。

十六进制值的写法为#号后跟三个或六个十六进制字符。

三位数表示法为：#RGB，转换为 6 位数表示为：#RRGGBB。

颜色实例

颜色 3 位十六进制颜色值 6 位十六进制颜色值 RGB
#000 #000000 rgb(0,0,0)
#F00 #FF0000 rgb(255,0,0)
#0F0 #00FF00 rgb(0,255,0)
#00F #0000FF rgb(0,0,255)
#FF0 #FFFF00 rgb(255,255,0)
#0FF #00FFFF rgb(0,255,255)
#F0F #FF00FF rgb(255,0,255)
#888 #888888 rgb(136,136,136)
#FFF #FFFFFF rgb(255,255,255)

尝试一下 >>

通过十六进制（Hex）的颜色值排序

查看以颜色名称排序的颜色列表

Color Name HEX Color
Black #000000
Navy #000080
DarkBlue #00008B
MediumBlue #0000CD
Blue #0000FF
DarkGreen #006400
Green #008000
Teal #008080
DarkCyan #008B8B
DeepSkyBlue #00BFFF
DarkTurquoise #00CED1
MediumSpringGreen #00FA9A
Lime #00FF00
SpringGreen #00FF7F
Aqua #00FFFF
Cyan #00FFFF
MidnightBlue #191970
DodgerBlue #1E90FF
LightSeaGreen #20B2AA
ForestGreen #228B22
SeaGreen #2E8B57
DarkSlateGray #2F4F4F
LimeGreen #32CD32
MediumSeaGreen #3CB371
Turquoise #40E0D0
RoyalBlue #4169E1
SteelBlue #4682B4
DarkSlateBlue #483D8B
MediumTurquoise #48D1CC
Indigo #4B0082
DarkOliveGreen #556B2F
CadetBlue #5F9EA0
CornflowerBlue #6495ED
MediumAquaMarine #66CDAA
DimGray #696969
SlateBlue #6A5ACD
OliveDrab #6B8E23
SlateGray #708090
LightSlateGray #778899
MediumSlateBlue #7B68EE
LawnGreen #7CFC00
Chartreuse #7FFF00
Aquamarine #7FFFD4
Maroon #800000
Purple #800080
Olive #808000
Gray #808080
SkyBlue #87CEEB
LightSkyBlue #87CEFA
BlueViolet #8A2BE2
DarkRed #8B0000
DarkMagenta #8B008B
SaddleBrown #8B4513
DarkSeaGreen #8FBC8F
LightGreen #90EE90
MediumPurple #9370DB
DarkViolet #9400D3
PaleGreen #98FB98
DarkOrchid #9932CC
YellowGreen #9ACD32
Sienna #A0522D
Brown #A52A2A
DarkGray #A9A9A9
LightBlue #ADD8E6
GreenYellow #ADFF2F
PaleTurquoise #AFEEEE
LightSteelBlue #B0C4DE
PowderBlue #B0E0E6
FireBrick #B22222
DarkGoldenRod #B8860B
MediumOrchid #BA55D3
RosyBrown #BC8F8F
DarkKhaki #BDB76B
Silver #C0C0C0
MediumVioletRed #C71585
IndianRed #CD5C5C
Peru #CD853F
Chocolate #D2691E
Tan #D2B48C
LightGray #D3D3D3
Thistle #D8BFD8
Orchid #DA70D6
GoldenRod #DAA520
PaleVioletRed #DB7093
Crimson #DC143C
Gainsboro #DCDCDC
Plum #DDA0DD
BurlyWood #DEB887
LightCyan #E0FFFF
Lavender #E6E6FA
DarkSalmon #E9967A
Violet #EE82EE
PaleGoldenRod #EEE8AA
LightCoral #F08080
Khaki #F0E68C
AliceBlue #F0F8FF
HoneyDew #F0FFF0
Azure #F0FFFF
SandyBrown #F4A460
Wheat #F5DEB3
Beige #F5F5DC
WhiteSmoke #F5F5F5
MintCream #F5FFFA
GhostWhite #F8F8FF
Salmon #FA8072
AntiqueWhite #FAEBD7
Linen #FAF0E6
LightGoldenRodYellow #FAFAD2
OldLace #FDF5E6
Red #FF0000
Fuchsia #FF00FF
Magenta #FF00FF
DeepPink #FF1493
OrangeRed #FF4500
Tomato #FF6347
HotPink #FF69B4
Coral #FF7F50
DarkOrange #FF8C00
LightSalmon #FFA07A
Orange #FFA500
LightPink #FFB6C1
Pink #FFC0CB
Gold #FFD700
PeachPuff #FFDAB9
NavajoWhite #FFDEAD
Moccasin #FFE4B5
Bisque #FFE4C4
MistyRose #FFE4E1
BlanchedAlmond #FFEBCD
PapayaWhip #FFEFD5
LavenderBlush #FFF0F5
SeaShell #FFF5EE
Cornsilk #FFF8DC
LemonChiffon #FFFACD
FloralWhite #FFFAF0
Snow #FFFAFA
Yellow #FFFF00
LightYellow #FFFFE0
Ivory #FFFFF0
White #FFFFFF

HTML 脚本

HTML 脚本

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 使 HTML 页面具有更强的动态和交互性。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

在线实例

插入一段脚本

如何将脚本插入 HTML 文档。

使用 <noscript> 标签

如何应对不支持脚本或禁用脚本的浏览器。

HTML <script> 标签

<script> 标签用于定义客户端脚本，比如 JavaScript。

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出 "Hello World!"：

实例

<script>

document.write("Hello World!")

</script>

尝试一下 >>

**注释：**如果使用 "src" 属性，则 <script> 元素必须是空的。

Tip: 学习更多关于 Javascript 教程，请查看 JavaScript 教程!

HTML<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

实例

<script>

document.write("Hello World!")

</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

尝试一下 >>

Tip: <noscript> 标签支持全局属性，查看完整属性表 HTML全局属性！

JavaScript 体验(来自本站 JavaScript 教程)

JavaScript 实例代码:

JavaScript 可以直接在 HTML 输出:

document.write("<p>This is a paragraph</p>");

尝试一下 >>

JavaScript 事件响应:

<button type="button" onclick ="myFunction()">Click Me!</button>

尝试一下 >>

JavaScript 处理 HTML 样式:

document.getElementById("demo").style.color ="#ff0000";

尝试一下 >>

如何应付老式的浏览器

如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

实例

JavaScript :

<script type="text/javascript">

<!--

document.write("Hello World!")

//-->

</script>

HTML 脚本标签

标签 描述
<script> 定义了客户端脚本
<noscript> 定义了不支持脚本浏览器输出的文本

HTML 字符实体

HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。

HTML 实体

在 HTML 中，某些字符是预留的。您不能使用包含这些字符的文本。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：

&entity_name;

或

&#entity_number;

如需显示小于号，我们必须这样写：&lt; 或**&#60;** 或 &#060;

提示： 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

不间断空格 (Non-breaking Space)

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 **&nbsp;**字符实体。

结合音标符

发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。

变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。

变音符号可以与字母、数字字符的组合来使用。

以下是一些实例:

音标符 字符 Construct 输出结果
̀ a à à
́ a á á
̂ a a&#770; â
̃ a a&#771; ã
̀ O O&#768; Ò
́ O O&#769; Ó
̂ O O&#770; Ô
̃ O O&#771; Õ

HTML 字符实体

实体名称对大小写敏感！
显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号 ' (IE不支持) &#39;
￠ 分 &cent; &#162;
£ 镑 &pound; &#163;
¥ 人民币/日元 &yen; &#165;
€ 欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

查看本站完整的 HTML 实体：请点击 HTML 实体参考手册。

HTML URL

HTML 统一资源定位器 (Uniform Resource Locators)

URL 是一个网页地址。

URL 可以由字母组成，如 "w3cschool.cn"，或互联网协议（IP）地址： 120.79.88.157。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

URL - 统一资源定位器

Web 浏览器通过 URL 从 Web 服务器请求页面。

当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。

一个统一资源定位器 (URL) 用于定位万维网上的文档。

一个网页地址实例: //www.w3cschool.cn/html/html-tutorial.html 语法规则:

scheme://host.domain:port/path/filename

说明:

    • scheme - 定义因特网服务的类型。最常见的类型是 http

    • host - 定义域主机（http 的默认主机是 www ）

    • domain - 定义因特网域名，比如 w3cschool.cn

    • :port - 定义主机上的端口号（http 的默认端口号是 80 ）

    • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

    • filename - 定义文档 / 资源的名称

常见的 URL Schemes

以下是一些 URL scheme：

Scheme 访问 用于...
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页，加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。

URL 字符编码

URL 只能使用 ASCII 字符集。

URL 编码会将字符转换为可通过因特网传输的格式。来通过因特网进行发送，由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

在线实例

实例

如果您点击"提交"按钮，浏览器会在发送输入之前对其进行 URL 编码。服务器上的页面会显示出接收到的输入。

<form name="input" target="_blank" action="form_action.php" method="get">

<input type="text" value="w3cschool.cn" name="text" size="30">

<input type="submit" value="提交">

</form>

尝试一下 >>

点击 "尝试一下" 按钮查看在线实例

提示： JavaScript、PHP、ASP 都提供了对字符串进行 URL 编码的函数。

URL 编码实例

字符 URL 编码
€ %80
£ %A3
© %A9
® %AE
À %C0
Á %C1
 %C2
à %C3
Ä %C4
Å %C5

如需完整的 URL 编码参考，请访问我们的 URL 编码参考手册。

HTML 速查列表

HTML 速查列表

HTML 速查列表. 你可以打印它，以备日常使用。

HTML 基本文档

<!DOCTYPE html>

<html>

<head>

<title>文档标题</title>

</head>

<body> 可见文本... </body>

</html>

基本标签（Basic Tags）

<h1>最大的标题</h1>

<h2> . . . </h2>

<h3> . . . </h3>

<h4> . . . </h4>

<h5> . . . </h5>

<h6>最小的标题</h6>

<p>这是一个段落。</p>

<br> （换行）

<hr> （水平线）

<!-- 这是注释 -->

文本格式化（Formatting）

<b>粗体文本</b>

<code>计算机代码</code>

<em>强调文本</em>

<i>斜体文本</i>

<kbd>键盘输入</kbd>

<pre>预格式化文本</pre>

<small>更小的文本</small>

<strong>重要的文本</strong>

<abbr> （缩写）

<address> （联系信息）

<bdo> （文字方向）

<blockquote> （从另一个源引用的部分）

<cite> （工作的名称）

<del> （删除的文本）

<ins> （插入的文本）

<sub> （下标文本）

<sup> （上标文本）

链接（Links）

普通的链接：<a href="链接地址">链接文本</a>

图像链接： <a href="http://www.example.com/" rel="external nofollow" target="_blank" ><img src="URL" alt="替换文本"></a>

邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>

书签： <a id="tips">

提示部分</a> <a href="#tips">跳到提示部分</a>

图片（Images）

<img src="URL" alt="替换文本" height="42" width="42">

样式/区块（Styles/Sections）

<style type="text/css">

h1 {color:red;}

p {color:blue;}

</style>

<div>文档中的块级元素</div>

<span>文档中的内联元素</span>

无序列表

<ul>

<li>项目</li>

<li>项目</li>

</ul>

有序列表

<ol>

<li>第一项</li>

<li>第二项</li>

</ol>

定义列表

<dl>

<dt>项目 1</dt>

<dd>描述项目 1</dd>

<dt>项目 2</dt>

<dd>描述项目 2</dd>

</dl>

表格（Tables）

<table border="1">

<tr>

<th>表格标题</th>

<th>表格标题</th>

</tr>

<tr>

<td>表格数据</td>

<td>表格数据</td>

</tr>

</table>

框架（Iframe）

<iframe src="demo_iframe.htm"></iframe>

表单（Forms）

<form action="demo_form.php" method="post/get">

<input type="text" name="email" size="40" maxlength="50">

<input type="password">

<input type="checkbox" checked="checked">

<input type="radio" checked="checked">

<input type="submit" value="Send">

<input type="reset">

<input type="hidden">

<select>

<option>苹果</option>

<option selected="selected">香蕉</option>

<option>樱桃</option>

</select>

<textarea name="comment" rows="60" cols="20">

</textarea>

</form>

实体（Entities）

< 等同于 &lt;

> 等同于 &gt;

© 等同于 &copy;

HTML JavaScript

JavaScript 使 HTML 页面更具动态性和交互性

实例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
点击我来显示日期和时间
</button>
<p id="demo"></p>
</body>
</html>

尝试一下

HTML <script> 标签

HTML ​<script>​ 标签用于定义客户端脚本（JavaScript）。

​<script>​ 元素即可包含脚本语句，也可通过 ​src​ 属性指向外部脚本文件。

JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。

如需选取 HTML 元素，JavaScript 最常用 ​document.getElementById()​ 方法。

这个 JavaScript 示例向 id="demo" 的 HTML 元素内写入 "Hello JavaScript!"：

实例

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

提示：您可在我们的 JavaScript教程 中学习更多 JavaScript 知识。

JavaScript 的味道

以下是展示 JavaScript 能力的一些例子：

实例

JavaScript 能够更改内容：

document.getElementById("demo").innerHTML = "Hello JavaScript!";

实例

JavaScript 能够更改样式：

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

实例

JavaScript 能够更改属性：

document.getElementById("image").src = "picture.gif";

HTML <noscript> 标签

HTML ​<noscript>​ 标签定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户：

实例

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>

HTML Script 标签

标签 描述
​<script>​ 定义客户端脚本。
​<noscript>​ 为不支持客户端脚本的用户定义替代内容。

如需所有可用的 HTML 标签的完整列表，请访问我们的 HTML标签手册。

HTML 总结

你已经完成了 HTML 的学习，下一步该学习什么呢？

HTML 总结

本教程已教你如何使用 HTML 创建站点。

HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

HTML 的关键是标签，其作用是指示将出现的内容。

如需更多关于 HTML 的信息，请查看我们的 HTML 教程 和 HTML 参考手册 。

为了能够巩固您对 HTML 的熟练度，您可以进行一些基础的 HTML 测试！

现在，你已学完 HTML，接下来该学习什么呢？

学习 CSS

CSS 被用来同时控制多重网页的样式和布局。

通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。

通过使用 CSS 来我们可以大大提升网页开发的工作效率！

如需学习如何创建样式表，请访问我们的 CSS 教程 。

学习 JavaScript

JavaScript 可以让你的网页更加生动。

如果你只想展示内容，静态网站是很好的展示形象，如果你想与用户进行交换或者让网页更加生动那就需要使用到 Javascript。

JavaScript 是互联网上最流行的脚本语言，目前所有主流浏览器都支持 Javascript。

如果你想学习更多关于Javascript 的知识，可以访问本站的 JavaScript 教程.

站点服务器

在自己的服务器上托管网站始终是一个选项。有几点需要考虑：

硬件支出

如果要运行"真正"的网站，您不得不购买强大的服务器硬件。不要指望低价的 PC 能够应付这些工作。您还需要稳定的（一天 24 小时）高速连接。

软件支出

请记住，服务器授权通常比客户端授权更昂贵。同时请注意，服务器授权也许有用户数量限制。

人工费

不要指望低廉的人工费用。您必须安装自己的硬件和软件。您同时要处理漏洞和病毒，以确保您的服务器时刻正常地运行于一个"任何事都可能发生"的环境中。

使用因特网服务提供商（ISP）

从 ISP 租用服务器也很常见。

大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点：

连接速度

大多数 ISP 都拥有连接因特网的高速连接。

强大的硬件

ISP 的 Web 服务器通常强大到能够由若干网站分享资源。您还要看一下 ISP 是否提供高效的负载平衡，以及必要的备份服务器。

安全性和可靠性

ISP 是网站托管方面的专家。他们应该提供 99% 以上的在线时间，最新的软件补丁，以及最好的病毒防护。

选择 ISP 时的注意事项

24 小时支持

确保 ISP 提供 24 小时支持。不要使自己置于无法解决严重问题的尴尬境地，同时还必须等待第二个工作日。如果您不希望支付长途电话费，那么免费电话服务也是必要的。

每日备份

确保 ISP 会执行每日备份的例行工作，否则您有可能损失有价值的数据。

流量

研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量，那么您要确保不会因此支付额外费用。

带宽或内容限制

研究一下 ISP 的带宽和内容限制。如果您计划发布图片或播出视频或音频，请确保您有此权限。

E-mail 功能

请确保 ISP 支持您需要的 e-mail 功能。

数据库访问

如果您计划使用网站数据库中的数据，那么请确保您的 ISP 支持您需要的数据库访问。

在您选取一家 ISP 之前，请务必阅读 W3Cschool 的 Web 主机教程。

学完本教程之后，W3Cschool 推荐您进行Html实战来巩固你刚学习的新知识。

HTML 文件路径

路径 描述
<img src="logo.jpg"> logo.jpg 位于与当前网页相同的文件夹
<img src="logo/logo.jpg"> logo.jpg 位于当前文件夹的 logo文件夹中
<img src="/logo/logo.jpg"> logo.jpg 位于当前站点根目录的 logo 文件夹中
<img src="../logo.jpg"> logo.jpg 位于当前文件夹的上一级文件夹中

HTML 文件路径

文件路径描述了网站文件夹结构中某个文件的位置。

文件路径会在链接外部文件时被用到：

  • 网页
  • 图像
  • 样式表
  • JavaScript

绝对文件路径

绝对文件路径是指向一个因特网文件的完整 URL：

实例

复制代码

<img src="https://www.w3cschool.cn/statics/img/logo/indexlogo@2x.png" alt="Logo">

<img> 标签以及 src 和 alt 属性在 HTML 图像这一章做了讲解。

相对路径

相对路径指向了相对于当前页面的文件。

在本例中，文件路径指向了位于当前网站根目录中 logo 文件夹里的一个文件：

实例

<img src="/statics/img/logo/indexlogo@2x.png" alt="Logo">

在本例中，文件路径指向了位于当前文件夹中 logo 文件夹里的一个文件：

实例

<img src="statics/img/logo/indexlogo@2x.png" alt="Logo">

在本例中，文件路径指向了位于当前文件夹的上一级文件夹中 logo 文件夹里的一个文件：

实例

<img src="../statics/img/logo/indexlogo@2x.png" alt="Logo">

好习惯

使用相对路径是个好习惯（如果可能）。

如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。

HTML 表情符号

在 HTML 中使用表情符号

表情符号（Emoji）是来自 UTF-8 字符集的字符：😄😍💗

什么是 Emoji？

表情符号（Emoji）类似图像或图标，但它们并不是。

它们是来自 UTF-8 (Unicode) 字符集的字母（字符）。

**提示：**UTF-8 几乎涵盖世界上所有字符和符号。

HTML charset 属性

为了正确显示 HTML 页面，Web 浏览器必须知道页面中使用的字符集。

这是在 <meta> 标签中规定的：

复制代码 
<meta charset="UTF-8">

**提示：**如果未规定，UTF-8 则是 HTML 中的默认字符集。

UTF-8 字符

很多 UTF-8 字符无法在键盘上键入，但始终可以使用数字（被称为实体编号）来显示它们：

  • A 是 65
  • B 是 66
  • C 是 67

实例

复制代码 
<!DOCTYPE html>` `<html>` `<head>` `<meta charset="UTF-8">` `</head>` `<body>` `<p>`我将显示 A B C`</p>` `<p>`我将显示 &#65; &#66; &#67;`</p>` `</body>` `</html>

尝试一下

例子解释

<meta charset="UTF-8"> 元素定义字符集。

字符 A、B、C 由数字 65、66 以及 67 来显示。

为了让浏览器了解您正在显示字符，您必须以 &# 开头并以 ;（分号）结束实体编号。

Emoji 字符

表情符号也是来自 UTF-8 字母的字符：

  • 😄 是 128516
  • 😍 是 128525
  • 💗 是 128151

实例

复制代码 
<!DOCTYPE html>` `<html>` `<head>` `<meta charset="UTF-8">` `</head>` `<body>` `<h1>`我的第一个 Emoji`</h1>` `<p>`&#128512;`</p>` `</body>` `</html>

尝试一下

由于表情符号是字符，因此可以像 HTML 中的其他任何字符一样复制、显示和调整它们的大小。

实例

复制代码 
<!DOCTYPE html>` `<html>` `<head>` `<meta charset="UTF-8">` `</head>` `<body>` `<h1>`放大的表情符号`</h1>` `<p style="font-size:48px">` &#128512; &#128516; &#128525; &#128151; `</p>` `</body>` `</html>

尝试一下

UTF-8 中的一些 Emoji 符号

Emoji 值
🗻 &#128507;
🗼 &#128508;
🗽 &#128509;
🗾 &#128510;
🗿 &#128511;
😀 &#128512;
😁 &#128513;
😂 &#128514;
😃 &#128515;
😄 &#128516;
😅 &#128517;

HTML 字符集

为了正确显示 HTML 页面，Web 浏览器必须知道要使用哪个字符集。

从 ASCII 到 UTF-8

ASCII 是第一个字符编码标准。ASCII 定义了 128 种可以在互联网上使用的字符：数字（0-9）、英文字母（A-Z）和一些特殊字符，比如：! $ + - ( ) @ < >。

ISO-8859-1 是 HTML 4 的默认字符集。此字符集支持 256 个不同的字符代码。HTML 4 同时支持 UTF-8。

ANSI（Windows-1252）是原始的 Windows 字符集。 ANSI 与 ISO-8859-1 相同，不同之处在于 ANSI 具有 32 个额外的字符。

HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集，该字符集涵盖了世界上几乎所有的字符和符号！

HTML charset 属性

为了正确显示 HTML 页面，Web 浏览器必须了解页面中使用的字符集。

这在 ​<meta>​ 标签中指定：

<meta charset="UTF-8">

字符集之间的差异

下表展示了上述字符集之间的区别：

Numb ASCII ANSI 8859 UTF-8 Description
32 space
33 ! ! ! ! exclamation mark
34 " " " " quotation mark
35 # # # # number sign
36 $ $ $ $ dollar sign
37 % % % % percent sign
38 & & & & ampersand
39 ' ' ' ' apostrophe
40 ( ( ( ( left parenthesis
41 ) ) ) ) right parenthesis
42 * * * * asterisk
43 + + + + plus sign
44 , , , , comma
45 - - - - hyphen-minus
46 . . . . full stop
47 / / / / solidus
48 0 0 0 0 digit zero
49 1 1 1 1 digit one
50 2 2 2 2 digit two
51 3 3 3 3 digit three
52 4 4 4 4 digit four
53 5 5 5 5 digit five
54 6 6 6 6 digit six
55 7 7 7 7 digit seven
56 8 8 8 8 digit eight
57 9 9 9 9 digit nine
58 : : : : colon
59 ; ; ; ; semicolon
60 < < < < less-than sign
61 = = = = equals sign
62 > > > > greater-than sign
63 ? ? ? ? question mark
64 @ @ @ @ commercial at
65 A A A A Latin capital letter A
66 B B B B Latin capital letter B
67 C C C C Latin capital letter C
68 D D D D Latin capital letter D
69 E E E E Latin capital letter E
70 F F F F Latin capital letter F
71 G G G G Latin capital letter G
72 H H H H Latin capital letter H
73 I I I I Latin capital letter I
74 J J J J Latin capital letter J
75 K K K K Latin capital letter K
76 L L L L Latin capital letter L
77 M M M M Latin capital letter M
78 N N N N Latin capital letter N
79 O O O O Latin capital letter O
80 P P P P Latin capital letter P
81 Q Q Q Q Latin capital letter Q
82 R R R R Latin capital letter R
83 S S S S Latin capital letter S
84 T T T T Latin capital letter T
85 U U U U Latin capital letter U
86 V V V V Latin capital letter V
87 W W W W Latin capital letter W
88 X X X X Latin capital letter X
89 Y Y Y Y Latin capital letter Y
90 Z Z Z Z Latin capital letter Z
91 [ [ [ [ left square bracket
92 \ \ \ \ reverse solidus
93 ] ] ] ] right square bracket
94 ^ ^ ^ ^ circumflex accent
95 _ _ _ _ low line
96 ` ` ` ` grave accent
97 a a a a Latin small letter a
98 b b b b Latin small letter b
99 c c c c Latin small letter c
100 d d d d Latin small letter d
101 e e e e Latin small letter e
102 f f f f Latin small letter f
103 g g g g Latin small letter g
104 h h h h Latin small letter h
105 i i i i Latin small letter i
106 j j j j Latin small letter j
107 k k k k Latin small letter k
108 l l l l Latin small letter l
109 m m m m Latin small letter m
110 n n n n Latin small letter n
111 o o o o Latin small letter o
112 p p p p Latin small letter p
113 q q q q Latin small letter q
114 r r r r Latin small letter r
115 s s s s Latin small letter s
116 t t t t Latin small letter t
117 u u u u Latin small letter u
118 v v v v Latin small letter v
119 w w w w Latin small letter w
120 x x x x Latin small letter x
121 y y y y Latin small letter y
122 z z z z Latin small letter z
123 { { { { left curly bracket
124 | | | | vertical line
125 } } } } right curly bracket
126 ~ ~ ~ ~ tilde
127 DEL
128 € euro sign
129 NOT USED
130 ‚ single low-9 quotation mark
131 ƒ Latin small letter f with hook
132 „ double low-9 quotation mark
133 ... horizontal ellipsis
134 † dagger
135 ‡ double dagger
136 ˆ modifier letter circumflex accent
137 ‰ per mille sign
138 Š Latin capital letter S with caron
139 ‹ single left-pointing angle quotation mark
140 ΠLatin capital ligature OE
141 NOT USED
142 Ž Latin capital letter Z with caron
143 NOT USED
144 NOT USED
145 ' left single quotation mark
146 ' right single quotation mark
147 " left double quotation mark
148 " right double quotation mark
149 • bullet
150 -- en dash
151 --- em dash
152 ˜ small tilde
153 ™ trade mark sign
154 š Latin small letter s with caron
155 › single right-pointing angle quotation mark
156 œ Latin small ligature oe
157 NOT USED
158 ž Latin small letter z with caron
159 Ÿ Latin capital letter Y with diaeresis
160 no-break space
161 ¡ ¡ ¡ inverted exclamation mark
162 ¢ ¢ ¢ cent sign
163 £ £ £ pound sign
164 ¤ ¤ ¤ currency sign
165 ¥ ¥ ¥ yen sign
166 ¦ ¦ ¦ broken bar
167 § § § section sign
168 ¨ ¨ ¨ diaeresis
169 © © © copyright sign
170 ª ª ª feminine ordinal indicator
171 << << << left-pointing double angle quotation mark
172 ¬ ¬ ¬ not sign
173 ­ ­ ­ soft hyphen
174 ® ® ® registered sign
175 ¯ ¯ ¯ macron
176 ° ° ° degree sign
177 ± ± ± plus-minus sign
178 ² ² ² superscript two
179 ³ ³ ³ superscript three
180 ´ ´ ´ acute accent
181 µ µ µ micro sign
182 pilcrow sign
183 · · · middle dot
184 ¸ ¸ ¸ cedilla
185 ¹ ¹ ¹ superscript one
186 º º º masculine ordinal indicator
187 >> >> >> right-pointing double angle quotation mark
188 ¼ ¼ ¼ vulgar fraction one quarter
189 ½ ½ ½ vulgar fraction one half
190 ¾ ¾ ¾ vulgar fraction three quarters
191 ¿ ¿ ¿ inverted question mark
192 À À À Latin capital letter A with grave
193 Á Á Á Latin capital letter A with acute
194 Â Â Â Latin capital letter A with circumflex
195 Ã Ã Ã Latin capital letter A with tilde
196 Ä Ä Ä Latin capital letter A with diaeresis
197 Å Å Å Latin capital letter A with ring above
198 Æ Æ Æ Latin capital letter AE
199 Ç Ç Ç Latin capital letter C with cedilla
200 È È È Latin capital letter E with grave
201 É É É Latin capital letter E with acute
202 Ê Ê Ê Latin capital letter E with circumflex
203 Ë Ë Ë Latin capital letter E with diaeresis
204 Ì Ì Ì Latin capital letter I with grave
205 Í Í Í Latin capital letter I with acute
206 Î Î Î Latin capital letter I with circumflex
207 Ï Ï Ï Latin capital letter I with diaeresis
208 Ð Ð Ð Latin capital letter Eth
209 Ñ Ñ Ñ Latin capital letter N with tilde
210 Ò Ò Ò Latin capital letter O with grave
211 Ó Ó Ó Latin capital letter O with acute
212 Ô Ô Ô Latin capital letter O with circumflex
213 Õ Õ Õ Latin capital letter O with tilde
214 Ö Ö Ö Latin capital letter O with diaeresis
215 × × × multiplication sign
216 Ø Ø Ø Latin capital letter O with stroke
217 Ù Ù Ù Latin capital letter U with grave
218 Ú Ú Ú Latin capital letter U with acute
219 Û Û Û Latin capital letter U with circumflex
220 Ü Ü Ü Latin capital letter U with diaeresis
221 Ý Ý Ý Latin capital letter Y with acute
222 Þ Þ Þ Latin capital letter Thorn
223 ß ß ß Latin small letter sharp s
224 à à à Latin small letter a with grave
225 á á á Latin small letter a with acute
226 â â â Latin small letter a with circumflex
227 ã ã ã Latin small letter a with tilde
228 ä ä ä Latin small letter a with diaeresis
229 å å å Latin small letter a with ring above
230 æ æ æ Latin small letter ae
231 ç ç ç Latin small letter c with cedilla
232 è è è Latin small letter e with grave
233 é é é Latin small letter e with acute
234 ê ê ê Latin small letter e with circumflex
235 ë ë ë Latin small letter e with diaeresis
236 ì ì ì Latin small letter i with grave
237 í í í Latin small letter i with acute
238 î î î Latin small letter i with circumflex
239 ï ï ï Latin small letter i with diaeresis
240 ð ð ð Latin small letter eth
241 ñ ñ ñ Latin small letter n with tilde
242 ò ò ò Latin small letter o with grave
243 ó ó ó Latin small letter o with acute
244 ô ô ô Latin small letter o with circumflex
245 õ õ õ Latin small letter o with tilde
246 ö ö ö Latin small letter o with diaeresis
247 ÷ ÷ ÷ division sign
248 ø ø ø Latin small letter o with stroke
249 ù ù ù Latin small letter u with grave
250 ú ú ú Latin small letter u with acute
251 û û û Latin small letter with circumflex
252 ü ü ü Latin small letter u with diaeresis
253 ý ý ý Latin small letter y with acute
254 þ þ þ Latin small letter thorn
255 ÿ ÿ ÿ Latin small letter y with diaeresis

ASCII 字符集

ASCII 使用 0 到 31（以及 127）之间的值作为控制字符。

ASCII 使用 32 到 126 的值表示字母、数字和符号。

ASCII 不使用 128 到 255 之间的值。

ANSI 字符集 (Windows-1252)

对于 0 到 127 的值，ANSI 与 ASCII 相同。

ANSI 有一组专有的字符，其值从 128 到 159。

对于 160 到 255 的值，ANSI 与 UTF-8 相同。

ISO-8859-1 字符集

对于 0 到 127 的值，8859-1 与 ASCII 相同。

8859-1 不使用 128 到 159 之间的值。

对于从 160 到 255 的值，8859-1 与 UTF-8 相同。

UTF-8 字符集

对于 0 到 127 的值，UTF-8 与 ASCII 相同。

UTF-8 不使用 12 8到 159 之间的值。

对于 160 到 255 之间的值，UTF-8 与 ANSI 和 8859-1 相同。

UTF-8 从值 256 继续，包含超过 10000 个不同字符。

如需深入研究，请阅读我们完整的 HTML 字符集参考手册。

@charset CSS 规则

您可以使用 CSS @charset 规则来指定样式表中使用的字符编码：

实例

将样式表的编码设置为 Unicode UTF-8：

@charset "UTF-8";

HTML 背景

一个富有美感的背景会让站点看上去更加高级、更有吸引力。本篇为大家来的是 HTML 背景相关内容。

背景（Backgrounds）

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

背景颜色（Bgcolor）

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

复制代码 
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

以上的代码均将背景颜色设置为黑色。

背景（Background）

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

复制代码 
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

提示：如果你打算使用背景图片，你需要紧记一下几点：

  • 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
  • 背景图像是否与页面中的其他图象搭配良好。
  • 背景图像是否与页面中的文字颜色搭配良好。
  • 图像在页面中平铺后，看上去还可以吗？
  • 对文字的注意力被背景图像喧宾夺主了吗？

基本的注意事项 - 有用的提示：

<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。

应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

HTML URL字符编码

Web 浏览器通过 URL 从 web 服务器请求页面。

URL 是网页的地址，比如 http://www.w3cschool.cn。

URL 编码

URL 只能使用 ASCII 字符集来通过因特网进行发送。

由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

亲自试一试

如果您点击下面的"提交"按钮，浏览器会在发送输入之前对其进行 URL 编码。服务器上的页面会显示出接收到的输入。

试着输入一些字符，然后再次点击提交按钮。

URL 编码示例

字符 URL 编码
€ %80
£ %A3
© %A9
® %AE
À %C0
Á %C1
 %C2
à %C3
Ä %C4
Å %C5

HTML 文档类型

<!DOCTYPE> 声明帮助浏览器正确地显示网页。

<!DOCTYPE> 声明

Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

实例

带有 HTML5 DOCTYPE 的 HTML 文档：

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

HTML 版本

从 Web 诞生早期至今，已经发展出多个 HTML 版本：

版本 年份
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

常用的声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
相关推荐
鑫宝Code9 分钟前
【React】React Router：深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh1 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE：基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲3 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•4 小时前
css数据不固定情况下，循环加不同背景颜色
前端·javascript·html
EasyNTS5 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜7 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点7 小时前
【Vue3新工具】Pinia.js：提升开发效率，更轻量、更高效的状态管理方案！
前端·javascript·vue.js·typescript·vue·ecmascript
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作