HTML超文本标记语言

WWW 是“World Wide Web”（全球广域网）的缩写，简称为Web，中文又称为“万维网”。

HTML（Hypertext Markup Language，超文本标记语言）是一种文本类、解释执行的标记语言，用于编写要通过WWW显示的超文本文件，称为HTML文件，也叫Web页面或网页。扩展名为.html或.htm 。

HTML文件的组成包含两部分内容：一是HTML标记；二是HTML标记所设置的内容。

HTML基础

文档类型：规范的HTML/XHTML文档需要以<!DOCTYPE>标记声明开始的。用于指定DTD(说明当前这个html版本)
HTML文件的基本结构: 头部(head)，标题(title)，页面主体(body)
HTML标记: html文件的开始和结束标签：<html></html>

html中标签的大致写法：

由开始标签和结束标签组成,空标签写法为：<标签名/>,双标签<标签名></标签名>
标签名不区分大小写，但在XHTML中必须小写
标签具有属性，属性用来表示标签的性质和特征，属性在一开始的标签中指定

页面的头部标记

HTML头部标记

<title>: 设定显示在浏览器标题栏中的内容
<meta>: 定义网页的字符集、关键字、描述信息等内容
<style>: 设置CSS层叠样式表的内容
<link>: 对外部文件的链接
<script>: 设置页面脚本或链接外部脚本文件

元信息标记

定义文件编码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

搜索引擎优化-关键字

<meta name="keywords" content="关键字1，关键字2，…" />

搜索引擎优化-描述

<meta name="description" content="内容介绍" />

设置页面刷新或者跳转

<!--设置页面每隔3s刷新一次-->
<meta http-equiv="refresh" content="3">
<!--在当前页面停留3s后，自动跳转到百度首页-->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

网页标题栏图标

<!--在网页标题栏左侧显示-->
<link rel="icon" href="图标地址" type="image/x-icon">
<!--也可以在收藏夹显示图标-->
<link rel="shortcut icon" href="图标地址" type="image/x-icon">

页面的主题标记`<body>`

一个网站的三大元素: 图片，超链接，文字
添加网页背景图片

默认情况下，背景图片会随着页面的滚动而滚动，设置<body>标记的bgproperties="fixed",可以使背景图片固定不动。

<body background="images/***.jpg" bgproperties="fixed">

3. 设置网页链接文字颜色

link属性设置未访问链接文字颜色；alink属性设置正在访问链接文字颜色；vlink属性设置访问过后的链接文字颜色

<body link="颜色值" alink="颜色值" vlink="颜色值">

4. 设置网页边距

设置网页与浏览器边框的间距

<body leftmargin="边距值" rightmargin="边距值" topmargin="边距值" bottommargin="边距值">

HTML的注意事项和建议

凡是标签都应该闭合！
凡是标签都应该小写！
文件编码跟设置的编码保持一致！
标签属性加引号(英文输入法下的引号)
HTML缩进统一使用tab键

文字与段落标记 #{tagSymbol}

标题字 h1~h6

h1的字最大，递减至 h6 最小

<h2 align="对齐方式">标题字</h2>

2. 空格

在HTML里面，浏览器不能解析源代码中使用的Enter键，所有的空格，换行符，水平制表符等等。无论你打再多个，都会视为一个空格。

3. 字体标签<font>

<font face="字体名称" size="字号" color="颜色值">文字内容</font>

属性	说明
`color`	颜色,默认黑色
`size`	默认字号为3号字。取值范围1~7，可+1到+7，-1到-7(正负取值相对于页面默认字号)，超出取值范围，与取值范围的最近的值效果相同。
`face`	默认宋体[黑体,微软雅黑...]

4. 字体格式化标签

标签	意义	标签	意义
`<i></i>`	italic,斜体	`<em></em>`	斜体
`<b></b>`	blod,加粗	`<strong></strong>`	粗体
`<big></big>`	大字号	`<small></small>`	小字号
`<u></u>`	underline,下划线	`<s></s>`	删除线
`<strike></strike>`	删除线	`<del></del>`	删除线
`<q></q>`	引用""	`<dfn></dfn>`	举例
`<mark></mark>`	高亮	`<sup></sup>`	上标字
`<sub></sub>`	下标字	`<ruby></ruby>`	注释
`<rt></rt>`	注释	`<rp></rp>`	注释

举例：

<ruby>OJ<rp>(<rt>Orange Juice<rp>)</ruby>

OJ(Orange Juice)

(x+y)<sup>2</sup> = x<sup>2</sup> + y<sup>2</sup> + 2xy

(x+y)² = x² + y² + 2xy

5. 注释语句

语法： 

为了提高代码的维护性和可读性，常常在源代码中添加注释语句，用于对代码进行说明。注释语句并不显示在浏览器中。

6. 实体字符
实体名称对大小写敏感！

HTML 中有用的字符实体

实体字符	描述	实体名称	实体编号	实体字符	描述	实体名称	实体编号
	空格	`&emsp;` 这个兼容性比较好			空格	` ` 有些浏览器不能使用
<	小于号	`<`	<	>	大于号	`>`	>
"	引号	`"`	"	'	撇号	`'` (IE不支持)	'
&	和号	`&`	&	¥	元 yen	`¥`	¥
x	乘号	`×`	×	÷	除号	`÷`	÷
©	版权	`©`	©	®	商标	`®`	®

html特殊符号对照表

7. 段落标记

段落标签 <p> 全称: paragraph

语法说明：在HTML中即可使用单标记也可使用双标记,但XHTML只能用双标记。
区别是双标记会与上下文同时产生一空行的间隔,而单标记只与上文产生一空行间隔

换行标签 <br />
居中标记 <center></center>
缩排标记 <blockquote></blockquote>
预格式化标记 <pre></pre>
水平线标签 <hr align="center" width="50%" size="2" noshade /> noshade 实心的不带阴影的效果

超链接a标签

属性

属性	描述
`href`	规定链接指向的页面的 URL。
`title`	指定元素的提示文本。
`name`	规定锚的名称。
`download`	规定被下载的超链接目标。
`target`	规定在何处打开链接文档。

<a> 标签的 target 属性

属性值	描述
`_seft`	默认。在相同的框架中打开被链接文档。
`_blank`	在新窗口中打开被链接文档。
`_parent`	在上一级窗口中打开，一般在框架页面中经常使用。
`_top`	在浏览器的整个窗口中打开，忽略任何框架。
`framename`	在指定的框架窗口中打开链接文档。

链接类型

引用外部链接: <a href="http://www.baidu.com">超级链接</a>
引用内部链接: <a href="同一网站内部网页名称">内部链接是指在同一个网站内部，不同网页之间的链接关系</a>
锚点，也叫书签链接。锚点需要满足两个条件。锚点名，锚链接

<a name="top"></a><!--锚点名-->
<!-- 一大段内容 -->
<a href="#top">点击跳转到顶部</a>
<!--这个是内部书签链接即链接到同一页面的书签，若要外部则为<a href="地址#书签名">...</a>-->

4. 图片链接 <a href="图片链接目标"><img src="图片文件路径"></a>

5. foxmail发邮箱的软件,发送邮箱,比较少用 <a href="mailto:chenha0qiang@163.com">联系我们</a>

6. skype手机调试，在移动端很有用。

<a href="tel:159157*****">拨打</a>
<a href="sms:159157*****">发短信</a>

7. 脚本链接 <a href="javascript:alert('您好，欢迎访问我的站点！')">欢迎访问</a>

8. 下载链接：当<a>连接的href加载的是浏览器无法打开的文件，比如zip,rar。是会提供下载的
<a href="01.zip">下载</a>

链接路径

在当前目录下，直接写文件名 (默认 ./ 当前目录)
<a href="readme.txt">本地文件</a>
当文件在当前目录的某个(dir)文件夹下，这么来写
<a href="dir/readme.txt">本地文件</a>
当文件在当前目录的上一级，这么来写 (使用 ../ 返回上一层)
<a href="../readme.txt">本地文件</a>
绝对路径
<a href="E:/image/img2.png">用绝对路径打开图片</a>

图片标签

属性

属性	描述
`src`	图片的来源，路径。(source)
`alt`	图片加载失败的说明文字。建议写图片标签的时候都加上，有利于SEO优化。
`width`	宽度(如果只设置一个宽度或高度，那么对应得高度或宽度会等比例放大缩小)
`height`	高度(如果只设置一个宽度或高度，那么对应得高度或宽度会等比例放大缩小)
`hspace`	设置图片与周围对象的水平间距
`vspace`	设置图片与周围对象的垂直间距
`title`	提示信息。
`border`	图片的边框。(后面课程中会经常用到)
`align`	设置图片与周围对象的对齐方式(可取值有:top、bottom、middle、left、right)

图像热区

概念：图片映射是指源端点为图片热区的超链接。一幅图像被切分成不同的区域，每一个区域可以链接到不同的地址，这些区域称为图像的热区。

基本语法：

<img src="URL" usemap="#map 名称">
<map name="map 名称">
    <area shape="rect" coords="x1,y1,x2,y2" href="链接地址1" />
    <area shape="circle" coords="x,y,r" href="链接地址2" />
    <area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="链接地址3" />
</map>

area标签属性	描述	类型shape属性值	描述
`shape`	类型	`rect`	矩形（2个坐标）
`coords`	坐标	`circle`	圆形（1个）
`href`	跳转地址	`poly`	多边形（N个）

链接属性href(a标签和area标签中可使用该属性)：当链接到不可解析的文件时会提示下载信息

什么地方用图像热区呢？
一般如果图片很大，很长，只取某部分，那就使用图像热区。

图像热区超级不好调试的，会以目标图片的左上角为原点，就是占位大小不包括margin，占位大小有占位宽和站位高。
占位宽=width+border+padding;
站位高=height+border+padding;
而这个可以使用photoshop找到坐标，使用到标尺等工具。使用photoshop打开图片->将鼠标放在坐标上->在控制面板查看坐标信息

列表

有序列表

<ol type="A">
  <li>这里是第1个li</li>
  <li>这里是第2个li</li>
  <li>这里是第3个li</li>
</ol>

ol属性：

type : 数字(1); 大小写字母(A,a); 大小写罗马数字(I,i)
start: "起始编号位序"表示列表项的开始编号所处的位置序号，即li前面开始的数值 --> <ol type="a" start="3">

无序列表

<ul type="square">
  <li>这里是第1个li</li>
  <li>这里是第2个li</li>
  <li>这里是第3个li</li>
</ul>

ul属性：

type : 实心圆(disc); 空心圆(circle); 实心矩形(square) 该属性顺序是li中继续包含ul后的type默认属性,后面默认为实心矩形

[!danger] 无论是有序列表还是无序列表，ul和ol能接的标签只能是li，但li中可以添加任意标签

定义列表

<dl>
    <dt>html是什么</dt>
    <dd>HyperText Markup Languagehtml
    <br/>
    是一种超文本标记语言
    </dd>
</dl>

dd标签相当于其他列表中的li标签，可以在其中添加任意标签，不过建议只放dt和dd标签，
一般情况下使用标签+样式实现文本的解析，不使用多个dd或dt标签

定义列表的应用场景

做网站尾部的相关信息
做图文混排

嵌套列表

<ul> -->无序列表
  <li>
    <ol> -->有序列表
      <li>...</li>          -->无序列表中嵌套了一个有序列表
    </ol>

</ul>

表格

表格标签

标签	描述	标签	描述	标签	描述
`<table>`	定义表格	`<th>`	定义表格的表头
`<caption>`	定义表格标题	`<colgroup>`	定义表格列的组	`<col>`	定义用于表格列的属性
`<thead>`	定义表格的页眉	`<tbody>`	定义表格的主体	`<tfoot>`	定义表格的页脚
`<tr>`	定义表格的行	`<td>`	定义表格单元

表格属性

属性	描述	属性	描述	属性	描述
`width`	宽	`height`	高	`summary`	摘要
`title`	提示信息	`bgcolor`	背景颜色	`background`	背景图片
`align`	水平方向对齐	`valign`	垂直方向对齐	`cellspacing`	单元格之间的空白(默认2px)
`cellpadding`	内容与单元格的空白	`colspan`	表示横向合并单元格	`rowspan`	表示纵向合并单元格
`border`	规定表格边框的宽度。	`frame`	规定外侧边框的哪个部分是可见的。	`rules`	规定内侧边框的哪个部分是可见的。

对齐属性

align: 水平方向对齐,值为left,center,right. 适用于table,tr,td
valign: 垂直方向对齐。值为top,middle,bottom. 适用于tr,td
cellspacing : 单元格之间的空白(默认2px) 适用于table
cellpadding : 内容与单元格的空白适用于table

bgcolor、background 两个属性也适用与表格。(table,tr,td)
在表格里面给宽度并不能真正的限制死表格的宽度，如果内容超出表格的实质宽高，依然会将表格的单元格甚至整个表格撑开

summary 属性规定表格内容的摘要。summary 属性不会对普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。

frame和rules属性，可以控制边框的显示。frame属性控制着表格最外围的四条边框的可见性，而rules则控制着表格内部边框的可见性。

frame属性可取的值及含义如下：

属性值	描述	属性值	描述
`above`	显示上部的外侧边框	`below`	显示下部的外侧边框
`lhs`	显示左边的外侧边框	`rhs`	显示右边的外侧边框
`hsides`	显示上部和下部的外侧边框	`vsides`	显示左边和右边的外侧边框
`void`	默认值，表示不显示表格最外围的边框	`box`	在所有四个边上显示外侧边框
`border`	在所有四个边上显示外侧边框

rules 属性可取的值有五个，分别是：

none - 默认值，无边框
rows - 为行加边框
cols - 为列加边框
groups - 为行组或列组加边框
all - 为所有行列（单元格）加边框

table的三个基本组成部分：行，列，单元格

表格标题标记：<caption align="水平对齐方式(左中右)" valign="垂直对齐(上下)"></caption>
表格可以分成表头、主体和表尾三部分，在HTML语言中分别用<thead>、<tbody>、<tfoot>表示
[!danger|label: 这里有三个注意点]
1. <thead>和<tfoot>在一张表中都只能有一个，而<tbody>可以有多个。
2. <tfoot>必须出现在<tbody>前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要。
3. <thead>、<tbody>和<tfoot>里面都必须使用<tr>标签。

3. CSS中的table-layout语句：table { table-layout: fixed/auto/inherit }

auto表示单元格的大小由内容决定。
fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定；如果所有单元格都没有指定大小，则由第一个单元格的默认大小决定；如果单元格中的内容超出单元格的大小，则用CSS中的overflow命令控制。微软公司声称使用这个命令，表格的显示速度可以加快100倍。
inherit表示从父元素继承table-layout属性的值，任何版本的IE都不支持。

4. <tbody>可以用来对行进行分组，而<colgroup>则用来对列进行分组。比如，下面的代码表示前40列为一组，每列的宽度为20像素。<colgroup span="40" width="20"></colgroup>
span属性，可以指定colgroup标签能够影响到的列数。在colgroup标签内部，可以使用col标签为这一列组中的每一列指定属性。
比如，下面的代码表示列组中每一列的段度为为不同宽度：<colgroup><col width="20"><col width="50"><col width="30"></colgroup>
代码示例：

<table border="1" width="600" frame="hsides" rules="groups">
    <caption>专业表格</caption>
    <colgroup span="1" width="200"></colgroup>
    <colgroup span="3" width="400"></colgroup>
    <thead>
        <tr><td>cell 1-1</td><td>cell 1-2</td><td>cell 1-3</td><td>cell 1-4</td></tr>
    </thead>
    <tfoot>
        <tr><td>cell 4-1</td><td>cell 4-2</td><td>cell 4-3</td><td>cell 4-4</td></tr>
    </tfoot>
    <tbody>
        <tr><td>cell 2-1</td><td>cell 2-2</td><td>cell 2-3</td><td>cell 2-4</td></tr>
        <tr><td>cell 3-1</td><td>cell 3-2</td><td>cell 3-3</td><td>cell 3-4</td></tr>
    </tbody>
</table>

显示效果如下：

@[colgroup对列分组]{../../demo/demo.html?demoname=colgroup} ../../images/home/html.png

5. 合并单元格colspan和rowspan

代码示例：

<table border="1" summary="这个表格给出了一些关于果蝇的统计数据:平均身高和体重，红眼睛的比例(雄性和雌性)。">
　<caption><em>a test table with merged cells</em></caption>
　<tr><th rowspan="2"></th><th colspan="2">average</th>
　<th rowspan="2">red<br>eyes</th></tr>
　<tr><th>height</th><th>weight</th></tr>
　<tr><th>males</th><td>1.9</td><td>0.003</td><td>40%</td></tr>
　<tr><th>females</th><td>1.7</td><td>0.002</td><td>43%</td></tr>
</table>

显示效果如下：

@[合并单元格]{../../demo/demo.html?demoname=table-merge-cells} ./images/table.gif "rect"

表单

form表单标记

<form name="表单名称" method="提交方法" action="处理程序">……</form>

表单属性

action 用于指定表单的服务端程序,规定当提交表单时，向何处发送表单数据。action取值为:第一，一个URL（绝对URL/相对URL），一般指向服务器端一个程序，程序接受到表单提交过来的数据（即表单元素值）作相应处理。比如：

当用户提交这个表单时，第一，服务器将执行网址http://i.blog.sina.com.cn//上的名为reg.ashx的一般处理程序。
第二，使用mailto协议的URL地址，这样会将表单内容以电子邮件的形式发送出去。这种情况比较少见的，因为它要求访问者的计算机上安装和正确设置好了邮件发送程序。
第三，空值，如果action为空或不写，表示提交给当前页面。

method 该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。最常用的是get和post，默认时使用get方法。

get 与 post 有什么区别呢？

数据的查询：比如浏览论坛时，URL一般包含了分类、页码数、每页记录数等信息。 get方式，能一目了然的看到所要查询的信息(条件)。 post 因为隐藏掉了这些信息，不方便进行检验查询条件。
敏感数据的提交(安全性)：对一项记录，进行更改、添加操作时，比如注册用户、更改用户资料等。get 方式附加在URL上，会泄露掉敏感的消息。 post 方式，能隐藏掉敏感的信息。下面各用个例子说明一下：
- 用get方式点击提交后：URL变为：http://localhost:4778/ashx/login.ashx?login_username=admin&login_pswd=123456
- 用post方式点击提交后：URL变为：http://localhost:4778/ashx/login.ashx 可以看到只是action指定的URL，参数并没有附加在URL后面。
大数据文本传递：get虽然方便查询，但由于是附加在URL上，各浏览器对URL也有个长度限制。IE:2048字符。Chrome、FF好像是 8182字符。post好像没此限制。
onsubmit 用于指定处理表单的脚本函数
enctype 设置MIME类型，默认值为application/x-www-form-urlencoded。需要上传文件到服务器时，应将该属性设置为multipart/form-data

input输入标记

多数表单元素都可使用input定义,为了标识每一个数据，我们需要给表单元素添加name属性，所以name为必设属性，name="域名称"

`<input>`文本框的主要属性:

width 宽度 height 高度
name 名称，在脚本中可作为标识获取数据
maxlength 设置在文本框中最多可输入的字符数
max 规定输入字段的最大值。min 规定输入字段的最小值。max和min属性配合使用，来创建合法值的范围。
size 文本框长度，大约以字节为单位
value 指定文本框的默认值，是在浏览器第一次显示表单或者用户单击重置按钮之后在文本框中显示的值
placeholder 规定帮助用户填写输入字段的提示
autofocus 规定输入字段在页面加载时是否获得焦点
readonly 只读属性，当设置readonly属性后，文本框可以获得焦点，但用户不能改变文本框中的value
disabled 禁用，当文本框被禁用时，不能获得焦点，当然，用户也不能改变文本框的值。并且在提交表单时，浏览器不会将该文本框的值发送给服务器
required 指示输入字段的值是必需的
pattern 规定输入字段的值的模式或格式，例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字
type 规定input元素的类型，下面详细介绍

`type`属性规定`input`元素的类型

文本框text: 输入信息以明文显示

用户名: <input type="text" name="user" />

密码框password: 以"*"或"●"符号回显所输入的字符，从而起到保密的作用
```
密码: <input type="password" name="pwd" />
```
隐藏域hidden: 隐藏域不会被浏览者看到，它主要用于在不同页面传递域中所设定的值
```
<input type="hidden" name="hid" value="域值">
```
文件域file: 文件域可以将本地文件上传到服务器端,文件上传没有默认值,利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。否则无法上传文件内容
```
<input type="file" name="photo">
```
单选按钮radio: 在一组选项中进行单项选择，以一个圆框表示
使用方式：要实现单选功能，name值必须相等。使用name相同的一组单选按钮，不同radio设定不同的value值，这样通过取指定name的值就可以知道谁被选中了，不用单独的判断。单选按钮的元素值由value属性显式设置，表单提交时，选中项的value和name被打包发送，不显式设置value。
```
性别: 男:<input type="radio" name="gender" value="female" checked="checked"> 
   女:<input type="radio" name="gender" value="male"/>  
```

复选按钮checkbox: 在一组选项中进行多项选择，以一个方框表示

爱好: <input type="checkbox" name="hobby[m1]" value="music"/>音乐
   <input type="checkbox" name="hobby[m2]" value="trip"/>旅游
   <input type="checkbox" name="hobby[m3]" value="reading"/>阅读

提交按钮submit: 用于将表单内容提交到指定服务器处理程序或指定客户端脚本进行处理
```
<input type="submit" name="按钮名称" value="按钮显示文本">
```

普通按钮button: 用于激发提交表单动作，配合JavaScript脚本对表单执行处理操作

<!--suppress JSUnresolvedVariable -->
<input type="button" value="按钮显示文本" onclick="javascript函数名" name="按钮名称">

重置按钮reset: 用于清楚表单中所输入的内容，将表单内容恢复成默认的状态
```
<input type="reset" name="按钮名称" value="按钮显示文本">
```
图像按钮image: 按钮外形以图像表示，功能与提交按钮一样，具有提交表单内容的作用
```
<input type="image" name="按钮名称" src="图像路径" width="宽" height="高">
```

select选择列表标记

选择列表

一次可以选择多个列表选项，且一次可以显示1个以上列表选项的选择列表
select 标记用于声明选择列表，option标记用于设置各个选项

<select name="列表名称" size="显示的选项数目(默认为1)" multiple="multiple"><!-- multiple设置列表中的项目可多选 -->
    <option value="banana" selected="selected">香蕉</option><!-- selected设置默认选项，可设置多个 -->
    <option value="apple">苹果</option>
    <option value="watermelon" selected="selected">西瓜</option>
    <option value="grape" selected="selected">葡萄</option>
</select>

下拉列表

一次只能选择一个列表选项，且一次只能显示一个列表选项的选择列表，即size默认1不能设置 size和 multiple属性

<select name="area">
    <optgroup label="国外"> <!-- <optgroup> 标签用于组合选项，即给选项分组类别,属性为label,指定选项组合名称 -->
        <option value="1">华盛顿</option>
        <option value="2">旧金山</option>
    </optgroup>
    <optgroup label="国内">
        <option value="3">广州</option>
        <option value="4">湛江</option>
    </optgroup>
</select>

textarea文本域标记

一般用于给用户填写备注信息或留言信息的多行多列文本区域

<textarea name="文本区域名称" rows="行数" cols="字符数">
    ...(此处输入的为默认文本，比如)请在此处输入备注信息
</textarea>

label标签：为input元素定义标注

lable元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

[!danger] "for"属性可把label绑定到另外一个元素。请把"for"属性的值设置为相关元素的id属性的值。即为下面说的隐式的联系。

隐式和显式的联系

标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为<label>标签下的for属性命名一个目标表单id，这样就是显式形式。

显式的联系

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

隐式的联系

<label>Date of Birth: <input type="text" name="DofB" /></label>

fieldset标签

把表单中元素组合起来，通俗的讲就是把表单围起来，顺便给个标题注释，看起来更规整。

基本语法：<fieldset> <legend>...</legend> <form>...</form> </fieldset>

demo

<fieldset>
    <legend>我最喜爱的:</legend>
    <label for="computer">计算机</label> <input type="checkbox" value="1" id="fav" name="fav" />
    <label for="trval">旅游</label> <input type="checkbox" value="2" id="fav" name="fav" />
    <label for="buy">购物</label> <input type="checkbox" value="3" id="fav" name="fav" />
</fieldset>

显示效果

我最喜爱的: 计算机旅游购物

框架

框架概述

框架的作用，就是把浏览器窗口划分成若干个小窗口，每个小窗口可以分别显示不同的网页。这样在一个页面中可以同时显示不同网页内容，不同窗口的内容相互独立。框架的主要用途是导航，通常会在一个窗口中显示导航条，另外一个窗口则作为内容窗口，用于显示导航栏目的目标页面内容，窗口的内容会根据导航栏目的不同而动态变化。

html框架集与body同级,因此不能同时出现。框架的基本结构主要分为框架集<frameset>和框架<frame>两个部分。

基本语法如下：

<frameset>
    <frame/> <!-- 一个框架集中可以包括多个框架，每个框架窗口显示的页面由框架的 src 属性指定。 -->
    <frame/>
    ...
</frameset>

框架集标记frameset

定义浏览器窗口的分割方式、各分割窗口（框架）的大小以及设置框架边框的颜色和粗细等属性。主要属性有：

属性	说明	属性	说明	属性	说明
border	边框宽度，框架粗细	frameborder	是否显示边框（取值1, 0或yes，no）	rows	上下分割窗口
bordercolor	边框颜色	framespacing	边框间距	cols	左右分割窗口

<frameset>标记对浏览器窗口的分割存在不同的方式，主要分为以下几种类型：

cols左右（水平）分割 <frameset cols="80,*">
rows上下（垂直）分割 <frameset rows="80,*"> cols把框架分成左右两半,上下分割使用rows(分成上下两半)。每个框架的大小使用逗号隔开，最后一个使用*会把剩下的都分配给它

嵌套分割：左右上下分割都有。<frameset>里面再嵌套一个<frameset>标记.

<frameset rows="100,*">
  <frame/>
  <frameset cols="20%,*">
  <frame/>
  </frameset>
</frameset>

效果图如下：

框架标记frame

<frameset>分割得到的每个子窗口都需要显示不同的页面内容，这些页面内容由<frame>标记来设置。
<frame>是个单标记，它必须放在框架集frameset中，<frameset>分割了几个子窗口就必须对应几个<frame>标记。

基本语法：

<frame src="01.html" name="test" /> <!-- src 框架的源文件地址，name 框架名(命名框架，以便超链接使用它作为目标窗口) -->

<frame>标记的常用属性有：

属性	属性值	说明	属性	说明
scrolling	yes、no、auto	是否显示滚动条	noresize	禁止改变框架的尺寸大小
border		边框宽度，框架粗细	bordercolor	边框颜色
marginwidth		设置内容与框架窗口左右边框的距离	marginheight	设置内容与框架窗口上下边框的距离
src		显示页面的URL地址

浮动框架标记iframe（也有叫“内嵌框架”的）

浮动框架时一种特殊的框架页面，主要体现在这个框架时嵌套在一个HTML页面中，作为页面的一个组成部分。具有和<frame>一样的属性，也有自己的属性： <iframe src="源文件地址" name="名" width="宽" height="高" align="对齐方式">

不支持框架标记noframes

当用户浏览器版本太低不支持框架时，浏览器制作人员无法改变这一现象，所能做的只是告诉用户事实，把显示给用户看的文本信息放在<body></body>标记对之间；而<noframes>放在</frameset>标记后面。如：

<frameset cols="130,*"><frame src="menu.html"/><frame src="introduce.html"/></frameset>
<noframes>
    <body>抱歉，您的浏览器版本太低，不支持框架，无法看到页面内容，请使用较新的浏览器来浏览。</body>
</noframes>

当用户浏览器版本太低不支持框架时，浏览器窗口将显示<body></body>标记对之间的文本内容，否则将显示<frameset></frameset>中各个框架的页面内容。

框架与超链接

一般情况下在框架中的a链接使用target属性实现框架内文件跳转时：

href 一直不变，即指向打开的文件路径不需要变
_self 自己框架页面打开
_blank 新页面打开
_top 顶级框架页面打开
_parent 到其父级框架页面打开
_framename 将我们想要打开的页面在指定的框架中打开

HTML颜色

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

1600 万种不同颜色
三种颜色红，绿，蓝的组合从 0 到 255，一共有 1600 万种不同颜色 (256 x 256 x 256)。您可以在编程测试中练习使用 RGB 红色表达方式！
在下面的颜色表中你会看到不同的结果，从 0 到 255 的红色，同时设置绿色和蓝色的值为 0 ，随着红色的值变化，不同的值都显示了不同的颜色。

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

在网页中嵌入多媒体内容

现在在制作网页时，除了可以在网页中放置文本、图片外，还可以在页面中嵌入声音、视频、动画等多媒体内容，使得页面看上去更加丰富多彩、动感十足。

设置滚动字幕marquee

属性          属性值                             说明
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————
demo：`<marquee direction="up">文字从下往上循环滚动</marquee>`
              up(从下往上)down(从上往下)
direction     left(从右往左，默认滚动方向)       设置滚动字幕的滚动方向
(滚动方向)     right(从左往右)
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————
demo：`<marquee behavior="alternate">设置文字循环交替往返进行滚动</marquee>`
behavior      scroll      设置文字循环往复滚动(默认行为)
(滚动行为)     slide       设置文字只进行一次滚动
              alternate   设置文字循环交替往返进行滚动
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————
demo：`<marquee scorllamount="滚动速度值" scrolldelay="延迟时间">滚动文字</marquee>`
scorllamount  设置文字滚动速度，取值为某个数字，越大滚动越快，默认的速度值是6
scrolldelay   设置文字在每一次滚动后，延迟一段时间后再进行下一次滚动，value以毫秒为单位，值越小越快，默认值是100ms
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————
设置字幕的滚动区域、背景颜色、与周围对象的间距等
width         设置文字滚动区域的宽度，可以是数字像素或百分比数值%
height        设置文字滚动区域的宽度，可以是数字像素或百分比数值%
bgcolor       设置文字滚动区域的背景颜色
hspace        水平间距
vspace        垂直间距
———————————————————————————————————————————————————————————————————————————————————————————————————————————————————

设置背景音乐bgsound

<bgsound src="路径/文件名称" loop="循环次数">
<!--loop默认情况下，背景音乐播放一次；如果取值为-1，则表示背景音乐循环不断地播放-->

嵌入音视频文件embed

<embed src="路径/文件名称"></embed>

属性	说明
src	文件路径
width	以像素为单位定义嵌入式对象的宽度
height	以像素为单位定义嵌入式对象的宽度
loop	设置嵌入式对象的播放是否循环不断，取值true时循环不断，否则只播放一次，默认值是false
hidden	设置多媒体播放软件的可视性，默认值是false

嵌入Flash动画object

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="300" id="一个字" >
    <param name="movie" value="一个字.swf">
    <param name="FlashVars" value="prizeResult=3">
    <param name="quality" value="high">
    <param name="menu" value="false">
    <param name="wmode" value="transparent">
    <param name="allowScriptAccess" value="always" />
    <embed src="./images/一个字.swf" FlashVars="prizeResult=3" allowScriptAccess="always" wmode="transparent" menu="false" quality="high" width="500" height="300" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/cn/flashplayer/" name="一个字"/>
</object>

其中 OBJECT 的classid和codebase的值是必须这么写的，告诉浏览器自动下载flash player的地址,OBJECT标签是用于windows平台的IE浏览器的，EMBED是用于windows和Macintosh平台下的Netscape Navigator浏览器以及Macintosh平台下的IE浏览器，就是所谓的非IE浏览器。windows平台的IE利用Activex控件来播放flash而其它的浏览器则使用Netscape插件技术来播放flash。

嵌入Java Applet（扩展）

Applet 是用 Java开发的一种小程序，不能独立运行，必须嵌入HTML文件中，并通过支持Java的浏览器来运行。
基本语法： <applet code="XXX.class" width="区域宽度" height="区域高度"></applet>
语法说明： XXX.class表示所嵌入的applet类文件，width、height属性用来设置applet文件显示区域，单位是像素。