html 复习
通过几次修改网页的经历，发现相关基础知识之薄弱，不得不再次花时间复习一遍。希望这是最后一次。
一 通用声明
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">
二 网页中的注释和水平线
<!-- 这是一个注释,注释在浏览器中不会被显示-->
<hr />
三 格式化标签
html 使用标签<b>与<i>对输出的文本进行格式 粗体与斜体
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
下标<sub>2</sub>
上标<sup>8</sup>
<big>大</big>
<small>小</small>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
地址
<address>
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
缩写和首字母缩写
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
文字方向
<p>This paragraph will go left-to-right.</p>
<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>
块引用
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
删除文字效果和出入文字效果
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
HTML 文本格式化标签
| 标签 |
描述 |
| <b> |
定义粗体文本 |
| <em> |
定义着重文字 |
| <i> |
定义斜体字 |
| <small> |
定义小号字 |
| <strong> |
定义加重语气 |
| <sub> |
定义下标字 |
| <sup> |
定义上标字 |
| <ins> |
定义插入字 |
| <del> |
定义删除字 |
HTML "计算机输出" 标签
| 标签 |
描述 |
| <code> |
定义计算机代码 |
| <kbd> |
定义键盘码 |
| <samp> |
定义计算机代码样本 |
| <var> |
定义变量 |
| <pre> |
定义预格式文本 |
HTML 引文, 引用, 及标签定义
| 标签 |
描述 |
| <abbr> |
定义缩写 |
| <address> |
定义地址 |
| <bdo> |
定义文字方向 |
| <blockquote> |
定义长的引用 |
| <q> |
定义短的引用语 |
| <cite> |
定义引用、引证 |
| <dfn> |
定义一个定义项目。 |
创建电子邮箱链接
1
<p>
This is an email link:
<a href="mailto:[email protected]?Subject=Hello%20again" target="_top">
Send Mail</a>
</p>
2
<p>
This is another mailto link:
<a href="mailto:[email protected][email protected]&[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a>
</p>
使用 <base> 定义页面中所有链接默认的链接目标地址。
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
这个东西太好了。如
<base href="http://www.w3cschool.cc/images/" target="_blank"> 是图片目标链接
<img src="stickman.gif" width="24" height="39">
这个在页面显示的链接是http://www.runoob.com/images/stickman.gif
使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Ståle Refsnes">
<meta charset="UTF-8">
<meta http-equiv="refresh" content="30"> 刷新页面
HTML head 元素
| 标签 |
描述 |
| <head> |
定义了文档的信息 |
| <title> |
定义了文档的标题 |
| <base> |
定义了页面链接标签的默认链接地址 |
| <link> |
定义了一个文档和外部资源之间的关系 |
| <meta> |
定义了HTML文档中的元数据 |
| <script> |
定义了客户端的脚本文件 |
| <style> |
定义了HTML文档的样式文件 |
四 使用css
分为三种
1内联样式——在HTML元素中使用"style" 属性
2内部样式表——在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
3外部引用——使用外部 CSS 文件
<p>点击太阳或其他行星，注意变化：</p>
创建图像映射
本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
HTML 图像标签
| 标签 |
描述 |
| <img> |
定义图像 |
| <map> |
定义图像地图 |
| <area> |
定义图像地图中的可点击区域 |
五 表格
带标题的表格
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
单元格边距 cellpadding——单元格内容与其边框之间的空白。
单元格间距 cellspacing——单元格之间的距离。
HTML 表格标签
| 标签 |
描述 |
| <table> |
定义表格 |
| <th> |
定义表格的表头 |
| <tr> |
定义表格的行 |
| <td> |
定义表格单元 |
| <caption> |
定义表格标题 |
| <colgroup> |
定义表格列的组 |
| <col> |
定义用于表格列的属性 |
| <thead> |
定义表格的页眉 |
| <tbody> |
定义表格的主体 |
| <tfoot> |
定义表格的页脚 |
六 列表
<p/>
无序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p/>
有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML 列表标签
| 标签 |
描述 |
| <ol> |
定义有序列表 |
| <ul> |
定义无序列表 |
| <li> |
定义列表项 |
| <dl> |
定义定义列表 |
| <dt> |
自定义列表项目 |
| <dd> |
定义自定列表义的描述 |
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
HTML <span> 元素是内联元素，可用作文本的容器 <span> 元素也没有特定的含义。
HTML 分组标签
| 标签 |
描述 |
| <div> |
定义了文档的区域，块级 (block-level) |
| <span> |
用来组合文档中的行内元素， 内联元素(inline) |
七Html表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
HTML 表单标签
New : HTML5新标签
| 标签 |
描述 |
| <form> |
定义供用户输入的表单 |
| <input> |
定义输入域 |
| <textarea> |
定义文本域 (一个多行的输入控件) |
| <label> |
定义了 <input> 元素的标签，一般为输入标题 |
| <fieldset> |
定义了一组相关的表单元素，并使用外框包含起来 |
| <legend> |
定义了 <fieldset> 元素的标题 |
| <select> |
定义了下拉选项列表 |
| <optgroup> |
定义选项组 |
| <option> |
定义下拉列表中的选项 |
| <button> |
定义一个点击按钮 |
| <datalist>New |
指定一个预先定义的输入控件选项列表 |
| <keygen>New |
定义了表单的密钥对生成器字段 |
| <output>New |
定义一个计算结果 |
八html 框架
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
height 和 width 属性用来定义iframe标签的高度与宽度。
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
使用iframe来显示目录链接页面
iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性，如下实例:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
HTML iframe 标签
| 标签 |
说明 |
| <iframe> |
定义一个内联的iframe |
九 颜色
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 |
按颜色名排序
按十六进制的值排序
单击一个颜色名或者 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 颜色值
颜色由红(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<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
JavaScript处理 HTML 样式:
document.getElementById("demo").style.color="#ff0000";
HTML 脚本标签
| 标签 |
描述 |
| <script> |
定义了客户端脚本 |
| <noscript> |
定义了不支持脚本浏览器输出的文本 |
HTML字符实体
| 实体名称对大小写敏感！ |
| 显示结果 |
描述 |
实体名称 |
实体编号 |
|
|
空格 |
|
  |
| < |
小于号 |
< |
< |
| > |
大于号 |
> |
> |
| & |
和号 |
& |
& |
| " |
引号 |
" |
" |
| ' |
撇号 |
' (IE不支持) |
' |
| ￠ |
分 |
¢ |
¢ |
| £ |
镑 |
£ |
£ |
| ¥ |
日元 |
¥ |
¥ |
| € |
欧元 |
€ |
€ |
| § |
小节 |
§ |
§ |
| © |
版权 |
© |
© |
| ® |
注册商标 |
® |
® |
| ™ |
商标 |
™ |
™ |
| × |
乘号 |
× |
× |
| ÷ |
除号 |
÷ |
÷ |
查看本站完整的HTML实体：请点击 HTML 实体参考手册。
十一 html 统一资源定位器
URL - 统一资源定位器
Web浏览器通过URL从Web服务器请求页面。
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
一个统一资源定位器(URL) 用于定位万维网上的文档。
一个网页地址实例: http://www.w3cschool.cc/html/html-tutorial.html 语法规则:
scheme://host.domain:port/path/filename
说明:
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 w3cschool.cc
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
常见的 URL Schemes
以下是一些URL scheme：
| Scheme |
访问 |
用于... |
| http |
超文本传输协议 |
以 http:// 开头的普通网页。不加密。 |
| https |
安全超文本传输协议 |
安全网页。解密所有信息交换。 |
| ftp |
文件传输协议 |
用于将文件下载或上传至网站。 |
| file |
|
您计算机上的文件。 |
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="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:[email protected]">发送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）
< 等同于 <
> 等同于 >
© 等同于 ©
