通过几次修改网页的经历，发现相关基础知识之薄弱，不得不再次花时间复习一遍。希望这是最后一次。
一 通用声明
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:webmaster@example.com">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 文本格式化标签
|
标签 |
描述 |
|
定义粗体文本 |
|
|
定义着重文字 |
|
|
定义斜体字 |
|
|
定义小号字 |
|
|
定义加重语气 |
|
|
定义下标字 |
|
|
定义上标字 |
|
|
定义插入字 |
|
|
定义删除字 |
HTML "计算机输出" 标签
|
标签 |
描述 |
|
定义计算机代码 |
|
|
定义键盘码 |
|
|
定义计算机代码样本 |
|
|
定义变量 |
|
|
定义预格式文本 |
HTML 引文, 引用, 及标签定义
|
标签 |
描述 |
|
定义缩写 |
|
|
定义地址 |
|
|
定义文字方向 |
|
|
定义长的引用 |
|
|
定义短的引用语 |
|
|
定义引用、引证 |
|
|
定义一个定义项目。 |
创建电子邮箱链接
1
<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
Send Mail</a>
</p>
2
<p>
This is another mailto link:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&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 元素
|
标签 |
描述 |
|
定义了文档的信息 |
|
|
定义了文档的标题 |
|
|
定义了页面链接标签的默认链接地址 |
|
|
定义了一个文档和外部资源之间的关系 |
|
|
定义了HTML文档中的元数据 |
|
|
定义了客户端的脚本文件 |
|
|
定义了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 图像标签
|
标签 |
描述 |
|
定义图像 |
|
|
定义图像地图 |
|
|
定义图像地图中的可点击区域 |
五 表格
带标题的表格
<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 表格标签
|
标签 |
描述 |
|
定义表格 |
|
|
定义表格的表头 |
|
|
定义表格的行 |
|
|
定义表格单元 |
|
|
定义表格标题 |
|
|
定义表格列的组 |
|
|
定义用于表格列的属性 |
|
|
定义表格的页眉 |
|
|
定义表格的主体 |
|
|
定义表格的页脚 |
六 列表
<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 列表标签
|
标签 |
描述 |
|
定义有序列表 |
|
|
定义无序列表 |
|
|
定义列表项 |
|
|
定义定义列表 |
|
|
自定义列表项目 |
|
|
定义自定列表义的描述 |
HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
HTML <span> 元素是内联元素，可用作文本的容器 <span> 元素也没有特定的含义。
HTML 分组标签
|
标签 |
描述 |
|
定义了文档的区域，块级 (block-level) |
|
|
用来组合文档中的行内元素， 内联元素(inline) |
七Html表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
HTML 表单标签
New : HTML5新标签
|
标签 |
描述 |
|
定义供用户输入的表单 |
|
|
定义输入域 |
|
|
定义文本域 (一个多行的输入控件) |
|
|
定义了 <input> 元素的标签，一般为输入标题 |
|
|
定义了一组相关的表单元素，并使用外框包含起来 |
|
|
定义了 <fieldset> 元素的标题 |
|
|
定义了下拉选项列表 |
|
|
定义选项组 |
|
|
定义下拉列表中的选项 |
|
|
定义一个点击按钮 |
|
|
<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 |
九 颜色
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 |
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 |
十 脚本
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 脚本标签
|
标签 |
描述 |
|
定义了客户端脚本 |
|
|
定义了不支持脚本浏览器输出的文本 |
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: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）
< 等同于 <
>
等同于 >
©
等同于 ©
