HTML基础总结

来源：互联网发布：清朝留辫子原因知乎编辑：程序博客网时间：2024/06/07 03:08

===============================
           第一章   HTML基础
       ===============================

HTML是网页超文本标记语言，属于一种描述性的标记语言。
HTML的文件都是以后缀名.html命名的。

HTML的基本框架
<html>
   <head>
       <title></title>
   </head>
   <body>
   </body>
</html>

       ===============================
           第二章   HTML基本标记
       ===============================

一个完整的HTML文档必须包括3个部分：
1.由<html>元素定义的文档版本信息。
2.由<head>定义各项声明的文档头部。
3.由<body>定义的文档主体部分。

2.1   头部标记head

语法：<head>...</head>

1.一般包括标题，基础信息和元信息，作用范围是整篇文档。
2.在<head>元素中可以有<meta>元信息定义，文档样式表定义和脚本等。
3.定义在HTML头部的内容不会再网页上直接显示。

2.2 标题标记title

语法：<title>...</title>

1.用来说明页面的用途，显示在浏览器的标题栏中。
2.放置在<head></head>之间。

2.3 元信息标记meta

语法：<meta ...>

1.meta提供的信息不显示在页面中，一般用来定义页面信息的说明、关键字、刷新等。
2.在一个HTML页面中可有多个meta元素。
3.meta的属性有name和http-equiv。name主要用于描述网页，以便于搜索引擎查找，分类。

2.3.1 设置页面关键字

   在搜索引擎中检索信息都是通过输入关键字来实现的。当用关键字搜索网站时，若网页中有包含关键字，则就可在结果中显示。

语法：<meta name="keywords" content="输入具体的关键字">
   name为属性名称，设置关键字其name的值为keywords，content的值为具体的关键字。

2.3.2 设置页面说明

   用来详细说明网页的内容，页面说明在网页中不显示，

语法：<meta name="description" content="设置页面说明">
       name为属性名称，设置关键字其name的值为description，content的值为具体的描述。

2.3.3 定义编辑工具

   说明用的什么编辑工具。

语法：<meta name="generator" content="编辑工具">

2.3.4 设置作者信息

   设置作者名。

语法：<meta name="author content="作者名">

2.3.5 设置网页文字及语言

   解决网页中文乱码

语法：<meta http-equiv="content-type" content="text/html"; charset="编码格式"/>或<meta charset="utf-8">
   http-equiv用于传送http通信协议的标头，content是具体的属性值。charset用于设置网页的内码语系。国内常用的是GB码，即charset="gb2312"(简体中文)，或者用utf-8

2.3.6 设置网页的定时跳转

   使用<meta/>标记可使网页经过一定时间自动刷新。将http-equiv值设为refresh，content的值为更新的时间。

语法：<meta http-equiv="refresh" content="跳转的时间;URL=跳转到的地址">
   refresh表示网页的刷新，content中设置刷新的时间和刷新后的链接地址，时间和链接地址之间用分号相隔。默认跳转时间以秒为单位。

补充：

1.<base rel="初始根链接地址" />：用于定义默认链接的根地址，用于设置网页中的所有链接的都是在初始根链接地址的基础上跳转。
   属性：target：设置网页打开方式

2.<pre>内容</pre>：此标签中的内容的格式不会再网页中发生变化。

3.<link rel="文件地址" type="文件类型(text/html|css|javascript)"：链接外部文件

2.4 网页的主体标记body

   网页的主体部分包括要在浏览器中显示处理的所有信息。主体标记属性包括：网页的背景设置，文字设置和链接设置等。

2.4.1 网页背景色bgcolor

   默认为白色或灰白色。

语法：<body bgcolor="背景颜色">
   bgcolor的值可为颜色英文名，也可为16进制的颜色值。

2.4.2 网页背景图片backgroud

   用图片做网页的背景。

语法：<body backgroud="图片的地址">
   图片的地址可以是相对地址，也可是绝对地址。默认可省此属性，图片会按照水平和垂直的方向不断重复出现，铺满整个页面。

2.4.3 文字颜色text

   用text标记设置文字的颜色，在没对文字单独定义时，这属性对页面所有文字起作用。

2.4.4 链接文字属性link

   改变超链接文字的颜色。默认，蓝色为超链接文字的颜色，访问过的文字颜色为暗红色。可通过link参数修改链接文字的颜色,alink可设置正在访问的文字颜色,vlink可设置访问前的链接文字颜色。

语法：<body alink="颜色" vlink="颜色">

2.4.5 边距margin

   设置页面与浏览器边框之间的距离，包括上边距和左边距。

语法：<body topmargin="上边距值" leftmargin="左边距值">
   默认，边距的值以像素为单位。

2.5 页面注释标记

语法：

       ===============================
           第三章   文字与段落标记
       ===============================

3.1 标题字

   HTML包含各种级别的标题，用<h1>到<h6>元素定义。<h1>为最高的，依次递减。

3.1.2 标题字对齐属性align

   默认，标题字为左对齐，用align修改。

语法：<align="对齐方式">
   对齐方式：left(左对齐)、right(右对齐)、center(居中)
   例如：<h1 align="center">居中对齐方式</h1>

3.2 文本基本标记

   <font>标记用来控制字体、字号、颜色等属性。

3.2.1 字体属性face

   用face设置不同的字体，设置的字体在浏览器中要安装，否则设置无效。

语法：<font face="字体样式">...</font>

3.2.2 字体属性size

   设置文字大小。有绝对和相对的方式。从1 ~ 7的整数代表绝对字号，大小由小到大。从-4 ~ +4的整数，相对于3号字体缩小或放大

语法：<font size="文字大小">...</font>

3.2.3 颜色属性color

   设置文字颜色

语法：<font color="字体颜色">...</font>

3.3 文字格式化标记
   一些标记是用来设置文字以特殊的方式显示，如：粗体、斜体、文字上下标等，都是行内标记，可出现在文本中任何位置。

3.3.1 粗体标记b、strong

   设置文字粗体，若没结束标记，则从标记开始的所有文字都是粗体。

语法：<b>...</b>或<strong>...</strong>

3.3.2 斜体标记i、em、cite

   设置斜体，一般斜体用于强调、醒目、区别的作用。

3.3.3 上标标记sup

   应用在数学公式中的次方。若在sup中用sup标记则为“上标的上标”。

语法：<sup>...</sup>

3.3.4 下标标记sub

   应用在化学元素的表示。若在sub中用sub标记则为“下标的下标”。

语法：<sub>...</sub>

3.3.5 大字号标记big

   用来增大文本中字号的大小，所含的文字都会比原来的字号大一级。若多个叠加，则会逐级增加。

语法：<big>...</big>

3.3.6 小字号标记small

   用来缩小文本中字号的大小，所含文字都会比原来的字号小一级。多个叠加，逐级减小。

语法：<small>...</small>

3.3.7 下划线标记u

语法：<u>...</u>

3.4 段落标记

3.4.1 段落标记p

   用来起始一个段落。

语法：<p>...</p>

3.4.2 换行标记br

   在不另起一行的情况下将当前文本强制换行。

语法：<br>

3.4.3 不换行标记nobr

   当一段文字过多时会自动换行，nobr可设置不换行。

语法：<nobr>...</nobr>

3.5 水平线

3.5.1 插入水平线hr

   表示水平分割模式，在浏览器中显示一条线。

语法：<hr>

3.5.2 水平线宽度width

   改变水平线的宽度。可以是像素，也可是百分比。

语法：<hr width="宽度">

3.5.3 水平线高度size

   设置水平线高度，且只能是像素。

语法：<hr size="高度">

3.5.4 水平线去掉阴影noshade

   是否显示水平线阴影。默认为显示，添加noshade则不显示。

语法：<hr noshade>

3.5.5 水平线颜色color

   设置水平线颜色。颜色代码是16进制的数值。

语法：<hr color="颜色">

3.5.6 水平线排列algin

   默认居中对齐。

语法：<hr algin="对齐方式">

3.6 其他标记

        空格
"       “
&       &
⁢       <
>       >
×       X
©
®
™

   =================================
       第四章       使用图像
   =================================

4.1 图像的格式

   图像的格式通常有3种：GIF、HPEG、PNG

4.2 插入图像

4.2.1 插入图像标记img

   插入图像。

   img的相关属性：

   src           图像的源文件
   alt           提示文字
   width        宽度
   height       高度
   border       边框
   vspace       垂直间距
   hspace       水平间距
   align        排列
   dynsrc       设定avi文件的播放
   loop       设定avi文件循环播放次数
   loopdelay   设定avi文件循环播放延迟
   start       设定avi文件播放方式
   lowsrc       设定低分辨率图片
   usemap       映射地图

4.2.2 图片的源文件src

   src指定图像源文件所在路径。可以使相对路径，也可是绝对路径。

语法：<img src="图片地址">

4.2.3 图像的提示文件alt

   提示文字的作用：当鼠标放在图像上，出现提示文字。若图片没显示则会出现提示文字。

语法：<img src="图片地址" alt="提示文字">

4.2.4 图像的宽度和高度width、height
   设置图像宽度、高度。

语法：<img width="宽度" height="高度">

4.2.5 图像的边框border

   默认图像无边框，边框颜色不可设置。当图片无链接，边框颜色与整体文字颜色相同。图像添加链接，边框颜色为深蓝。border的值为像素，值越大，框越宽。

语法：<img src="图像地址" border="图像边框的宽度">

4.2.6 图像的垂直边距vspace

   用来调整图像与文字的垂直边距。单位为像素。

语法：<img src="图像地址" vspace="垂直边距">

4.2.7 图像的水平间距hspace

   调整图像与文字的水平距离。单位为像素。

语法：<img src="图像地址" hspace="水平边距">

4.2.8 图像的排列algin

语法：<img src="图像地址" algin="对齐方式">

对齐方式：

bottom       图片的底部和当前行的文字底部对齐
top        图片的顶端和当前行的文字顶端对齐
middle       图片水平中线和当前行的文字中线对齐
left        图片左对齐
center        图片水平中线和当前行的文字中线对齐
right        图片右对齐

4.3 图像的超链接

   图片可设置超链接，也可设置热区链接(同个图片的不同位置可有不同的链接)。

4.3.1 图片的超链接

   只需将插入图片的代码嵌套到链接代码中即可。

语法：<a href="#"><img src="图片地址"></a>

4.3.2 图像热区链接

   将图片划分成多个热点区域，每个区域可链接到不同网页，叫热区链接。
   实质是把一幅图分为不同热点区域，让不同的区域进行超链接，这就是映射地图。
   要先定义映射图像的名称，再引用这个映像图像，在<area>标记中定义了热区的位置和链接，shape参数用来定义热区形状，coords参数用来设置区域坐标。

语法：
   1.首先在图片文件中设置映像图片名，在图形的属性中使用<usemap>标记添加图形要引用的映射图像：<img src="图片地址" usemap="映像图像名称">
   2.然后需要定义热区图像以及热区的链接属性：<map name="映像图像名称"> <area shape="热区形状" coords="热区坐标" href="链接地址"> </map>

   ================================
       第五章   使用列表
   ================================

5.1 认识列表标记

   HTML有3种列表：无序：由几个符号组成、有序：由字母或数字进行排序、定义列表：产生条件和描述的双重列表。

5.2 有序列表

   每个元素按数字或字母顺序标号。创建一个有序列表时，以打开和关闭<ol>开始，然后在每个列表元素前使用标记<li>标识，标识的结束标记为</li>。

语法：<ol> <li>有序列表项></li>

5.2.2 有序列表的序号类型type

   默认，有序列表的序号是数字。可通过type改变序号类型，包括大小字母、阿拉伯数字、大小写罗马数字。

语法：<ol type="序号类型"><li></li></ol>

   type类型：

       l(字母)：数字1.2.3...

       a：小写字母

       A：大写字母

       i：小写罗马数字

       I：大写罗马数字

5.2.3 有序列表的其实数值start

   默认，有序标号从1开始。可用start属性改变。可对所有编号起作用。

语法：<ol start="起始值"><li></li></ol>

5.3 无序列表

5.3.1 无序列表标记<ul>

   无排序标志，衣服好为分项标识。

语法：<ul><li></li></ul>

5.3.2 无序列表的类型type

   默认为实心的圆圈。可通过type改变。

语法：<ul type="符号类型"><li></li></ul>

   type类型：

       Disc       默认，实心圆

       circle       空心圆

       square       正方形

5.3.3 目录列表标记<dir>

   目录列表一般用来创建多列的目录列表。

语法：<dir><li></li></dir>

5.3.4 定义列表标记<dl>

   定义列表由两部分组成：定义条件和定义描述。<dt>用来指定需要解释的名词。<dd>是具体的解释。

语法：<dl><dt>定义条件</dt><dd>定义描述</dd>

5.3.5 菜单列表标记<menu>

   用于设计单列的菜单列表。

语法：<menu><li></li></menu>

   ========================
       第六章   使用表格
   ========================

6.1 创建表格

6.1.1 表格的基本构成table、tr、td

   表格由行、列、单元格组成。表格标记table、行标记tr、列标记td。行是水平间隔，列是垂直间隔。单元格时行与列相交的区域。

语法：<table><tr><td></td></tr>

6.1.2 设置表格的标题caption

   可用<caption>设置标题单元格，表格的标题一般位于整表格的第一行。一个table只能有一个表格标题。

6.1.3 表头th

   表格的表头<th>是td单元格的一种变体，会一以粗体和居中显示。

语法：<table><th></th></table>

6.2 表格基本属性

6.2.1 表格宽度width

   设置表格宽度，若不指定，则会根据表格内容自动调整。单位可为像素，也可为百分比。

语法：<table width="宽度"></table>

6.2.2 表格高度height

   设置表格高度。单位可为像素，也可为百分比。

语法：<table height="高度"></table>

6.2.3 表格对齐方式algin

   设置表格的对齐方式

语法：<table algin="对齐方式">

6.3 表格的边框

   border属性可设置表格边框的效果：宽度、颜色等。

6.3.1 表格边框宽度border

   默认，不显示边框，即border值为0.

语法：<table border="边框宽度"></table>

6.3.2 表格边框颜色bordercolor

   默认，边框颜色为灰色。设置颜色时，边框要有宽度，否则不显示颜色。

语法：<table bordercolor="颜色"></table>

6.3.3 内框宽度cellspacing

   表格内框宽度cellspacing用于设置表格内部每个单元格之间的间隔。

语法：<table cellspacing="内框宽度"></table>

6.3.4 表格内文字与边框间距cellpadding

   默认，单元格中的内容会紧贴表格边框。可用cellpadding设置单元格边框与单元格里的内容之间的距离。

语法：<table cellpadding="距离值"></table>

6.4 表格背景

6.4.1 表格背景颜色bgcolor

语法：<table bgcolor="颜色"></table>

6.4.2 表格背景图像

语法：<table background="图像地址"></table>

6.5 表格的行属性

6.5.1 高度控制height

   设置行的高度

语法：<tr height="高度">

6.5.2 边框颜色bordercolor

语法：<tr bordercolor="颜色">

6.5.3 行背景bgcolor、background

   默认为透明色。

语法：<tr bgcolor="颜色">

语法：<tr background="图像地址">

6.5.4 行文字的水平对齐方式align

   tr的algin属性用来控制当前行的水平对齐方式，不受表格整体对齐方式的影响，却能被单元格的对齐方式覆盖。

语法：<tr algin="对齐方式">

6.5.5 行文字的垂直对齐方式valign

   对齐方式有：top、middle、bottom

语法：<tr valign="对齐方式">

6.6 单元格属性

6.6.1 单元格大小width、height

   默认，单元格宽度和高度会根据内容自动调整。单位是像素。

语法：<td width="宽度" height="高度">

6.6.2 水平跨度colspan

   将多个相邻的单元格组合成一个单元格。

语法：<td cospan="跨度的列数">

6.6.3 垂直跨度rowspan

语法：<td rowspan="跨度的行数">

6.6.4 对齐方式align、valign

语法：<td align="对齐方式" valign="对齐方式">

6.6.5 单元格的背景色

语法：<td bgcolor="颜色">

6.6.6 单元格边框颜色bordercolor

语法：<td bordercolor="颜色">

6.6.7 单元格的亮边框bordercolorrlight

   单元格的亮边框就是单元格边框向光的部分。

语法：<td bordercolorrlight="颜色">

6.6.8 单元格的暗边框bordercolordark

   单元格的暗边框就是单元格边框背光的部分。

语法：<td bordercolordark="颜色">

6.6.9 单元格的背景图像background

语法：<td background="图像地址">

6.7 表格的结构

   表首标记<thead>、表主体标记<tbody>、表尾标记<tfoot>

6.7.1 表格的表首标记thead

   表首就是表的第一行。可用来设置表格最上端表首样式：背景颜色、文字对齐、文字垂直对齐等。

语法：<thead bgcolor="颜色" align="对齐方式">

6.7.2 表格的表主体标记tbody

   除了第一行和最后一行，都是主体。

语法：<tbody bgcolor="颜色" align="对齐方式">

6.7.8 表格的表尾标记tfoot

   表格最后一行就是表尾。

语法：<tfoot bgcolor="颜色" align="对齐方式">

   =========================
       第七章   建立超链接
   =========================

7.1 超链接的基本知识

   每个网页都有一个唯一地址，称为统一资源定位符(URL)。一般不会用完整的URL，而是用相对路径。

7.1.1 绝对路径

   绝对路径是包括服务器规范在内的完全路径，但一般不使用绝对路径。

7.1.2 相对路径

   相对于某个位置来说的路径。

7.2 内部链接

   内部链接就是链接的对象在同一个网站的资源。

7.2.1 认识内部链接

语法：<a href="链接地址">链接文字</a>

7.2.2 链接的目标窗口

   默认，是在原来的浏览器中新开一个标题。

语法：<a href="链接地址" target="目标窗口打开方式">

   target的取值：

   _seft       当前页面中打开链接

   _blank       一个全新的空白窗口中打开链接

   _top       在顶层框架中打开链接，即在根框架中打开链接。

   _parent       在当前框架的上一层中打开链接。

7.3 锚点链接

7.3.1 建立锚点

   锚点就是指在给定名称的一个网页中的某一位置，在创建锚点链接前首先要建立锚点。

语法：<a name="锚点名字"></a>

7.3.2 链接同一网页的锚点

   建立了锚点后，用#号以及锚点名作为href属性值。

语法：<a href="#锚点名">...</a>

7.3.3 链接到其他页面中的锚点

语法：<a href="链接地址#锚点名称">...</a>

7.4 外部链接

7.4.1 链接到外部网站

语法：<a href="http://...">...</a>

7.4.2 链接到E-mail

   当单击E-mail链接时，可打开浏览器默认的E-mail处理程序，收件人的邮件地址有E-mail超链接中指定的地址自动更新，无需输入。

语法：<a href="mailto:邮件地址">...</a>

7.4.3 链接到FTP

   FTP是指文件传输协议，一个FTP站点通常包含一些容易上传和下载文件的文件目录，大部分的FTP网站需要用户名和密码进入网站。

语法”<a href="ftp://FTP地址">...</a>

7.4.4 链接到Telnet

   Telnet常常用来登录一些BBS网站，也是一种远程登录方式。

语法：<a href="telnet://地址">...</a>

7.4.5 下载文件

   若要想下载文件，则需要为文件提供下载链接，单击链接就能自动下载。

语法：<a href="文件地址">...</a>

   ============================
       第八章   添加多媒体
   ============================

8.1 设置滚动效果

8.1.1 滚动标记marquee

   使用marquee可以移动文字、图片、表格。

语法：<marquee>...</marquee>

8.1.2 滚动方向direction

   默认，从右向左滚动。

语法：<marquee direction="滚动方向">...</marquee>

   滚动方向：up(向上)、down(向下)、left(向左)、right(向右)

8.1.3 滚动方式behavior

   滚动方式就是滚动的规则，如：循环，滚动一次等。

语法：<marquee behavior="滚动方式">...</behavior>

   滚动方式：

       scroll       循环滚动，默认

       slide       滚动一次

       alternate   来回滚动

8.1.4 滚动速度scrollamount

   设置滚动速度。实际上设置的是每次滚动时移动的长度，以像素为单位。值越大越快。

语法：<marquee scrollamount="速度值">...</marquee>

8.1.5 滚动延迟scrolldelay

   设置滚动的时间间隔。单位为毫秒。时间长会产生走走停停的效果。

语法：<marquee scrolldelay="时间间隔">...</marquee>

8.1.6 滚动循环loop

   默认，不断的循环。loop可设置滚动次数。若为0则无限循环。

语法：<marquee loop="次数">...</marquee>

8.1.7 滚动范围width、height

   默认，以文字同高宽。单位为像素。

语法：<marquee width="宽度" height="高度">...</marquee>

8.1.8 滚动背景颜色bgcolor

语法：<marquee bgcolor="颜色">...</marquee>

8.1.9 空白空间hspace、vspace

   默认，滚动对象周围的文字或图像是与滚动背景连接的，使用hsapce和vspace设置空白空间。其实就是设置滚动特效所在位置。

语法：<marquee hspace="范围值" vspace="范围值">...</marquee>

8.1.10 鼠标放置与离开onmousemove、onmouseout

   onmousemove：属性值为this.stop()时，鼠标放到滚动区域上时，则滚动停止。
   onmouseout：属性值为this.start()时，鼠标离开滚动区域时，滚动开始。

8.2 插入多媒体文件

8.2.1 插入Flash动画

语法：<embed src="文件地址" width="宽度" height="高度" charset="utf-8" />

8.2.2 插入音频和视频文件

语法：<embed src="文件地址" width="宽度" height="高度"></embed>

8.3 插入背景音乐

8.3.1 背景音乐

语法：<bgsound src="文件地址">

8.3.2 循环次数loop

语法：<bgsound src="文件地址" loop="次数">

8.4 插入Java Applet

语法：<applet code="Lake.class" width="宽度" height="高度"><param name="文件夹名" value="图片名"></applet>

   =============================
       第九章   使用框架结构
   =============================

9.1 框架的基本概念

   框架是浏览器窗口的一个区域，可显示与浏览器窗口的其余部分中所显示的内容无关的HTML文档。
   框架集是HTML文件，定义了一组框架的布局和属性，包括框架的数目、框架的大小和位置，以及在每个框架中初始显示的页面的URL。
   框架集文件本身不包含要在浏览器中显示的HTML内容，但noframes部分除外。
   框架集文件只是向浏览器提供应如何显示一组框架，以及在这些框架中应显示哪些文档的有关信息。

   框架结构是将两个或两个以上的网页组合起来，在同一窗口中打开的网页结构。

   框架把一个网页分为几个单独的区域，每个区域为一个单独的HTML文件。显示时，每个区域像一个单独的网页，也可有自己的滚动条、背景、标题。

   框架最常见的用途是导航。一组框架通常包括一个含有导航条的框架和另一个显示主要内容的框架。

9.2 设置框架集的属性frameset

       框架页面的结构是在框架集中设置，可分割方式：水平分割、垂直分割、嵌套分割

9.2.1 水平分割窗口rows

   rows可取多个值，由逗号分割的像素值或百分比。

语法：<frameset rows="框架窗口高度,高度..."><frame></frame></frameset>

9.2.2 垂直分割窗口cols

   cols可去多个值，每个值表示一个框架窗口的水平宽度，单位可为像素或百分比。

语法：<frameset cols="框架窗口宽度,宽度..."><frame></frame></frameset>

9.2.3 嵌套分割窗口

   即水平窗口和垂直分割可以嵌套。

9.2.4 框架的边框frameborder

   默认，给每一个框架结构加上一条明显宽度的边框，可通过frameborder控制是否显示。取值只能为yes、no或1、0。

9.2.5 框架的边框宽度framespacing

   默认，边框宽度为1。边框宽度就是在页面中各个边框之间的线条宽度，以像素为单位。边框宽度只能对框架集使用，对单个框架无效。

语法：<frameset framespacing="边框宽度">

9.2.6 框架的边框颜色bordercolor

语法：<frameset bordecoor="颜色">

9.3 设置窗口属性frame

   frame是用来定义每一个单独的框架页面。

9.3.1 页面源文件src

   框架结构中每个页面都是一个单独的文件，通过src指定一个初始文件地址。源文件可以是网页文件，也可是一张图片。地址可是相对或绝对或带锚点的链接地址。

语法：<frame src="页面文件地址">

9.3.2 页面名称name

   页面名称用于查找和链接的属性。

语法：<frame src="页面文件地址" name="页面名称">

9.3.3 禁止调整窗口的尺寸noresize

   添加之后就不能拖动边框

语法：<frame src="页面文件地址" noresize>

9.3.4 边框与页面内容的水平边距marginwidth

   设置框架边框与页面内容的水平边距。用于设置页面的左右边缘与框架边框的距离。

语法：<frame src="页面文件地址" marginwidth="水平边距">

9.3.5 边框与页面内容的垂直边距marginheight

   设置边框与页面内容的垂直边距。设置页面的上、下边缘与框架边框的距离。

语法：<frame src="页面文件地址" marginheight="垂直边距">

9.3.6 控制框架滚动条显示scrolling

   默认，在右侧或下方显示滚动条。scrolling可控制滚动条的显示。

语法：<frame src="页面文件地址" scrolling="是否显示">

   scrolling的值：yes、no、auto

9.3.7 不支持框架标记noframes

   若不支持框架结构的浏览器，则<noframes>来设置替换的内容。

语法：<noframes>替换显示内容</noframes>

9.4 浮动框架iframe

   浮动框架是嵌套在窗口中的子窗口。

9.4.1 页面源文件src

   指定浮动框架页面的文件地址。

语法：<iframe src="浮动框架的文件"></iframe>

9.4.2 浮动框架的宽和高width、height

   单位是像素。

语法：<iframe src="文件地址" width="宽度" height="高度"></iframe>

9.4.3 浮动框架的对齐方式align

   align的取值：left、right、middle(居中)、bottom。

语法：<iframe src="文件地址" align="对齐方式"></iframe>

9.4.4 浮动框架滚动条显示属性scrolling

   3种情况：no:不显示、yes:总是显示、auto:根据需要显示。

语法：<iframe src="文件地址" scrolling="是否显示滚动条"></iframe>

9.5 创建框架链接

9.5.1 普通的框架结构的链接。

   普通的框架结构之间通过target互相链接。一般会有一个框架窗口作为导航页面，其中添加了对另一个框架内容的链接设置，而这些链接通过target来实现。

9.5.2 浮动框架的链接

   与普通框架类似。

   =========================
       第十章   使用表单
   =========================

10.1 表单标记form

   在网页中<form></form>标记用来创建表单，即定义表单的开始和结束位置。标记之间的一切都属于表单内容。

   表单的基本属性：表单名称、处理程序、传送方法。一般的，处理程序action和传送方法method是必不可少的参数。

10.1.1 提交表单action

   用于指定表单数据提交到哪个地址进行处理。表单处理程序是表单要提交的地址，可以使绝对，也可是相对，还可是其他形式的地址。

语法：<form action="处理程序"></form>

10.1.2 表单名称name

   给表单命名。用于防止表单提交到后台处理程序时出现混乱。

语法：<form name="表单名字"></form>

10.1.3 传送方法method

   用于指定在数据提交到服务器时使用哪种HTTP提交方法，取值为get或post。
   get：表单数据被传送到action属性指定的URL，然后这个新URL被传送到处理程序上。
   post：表单数据被包含在表单主体中，然后送到处理程序上。

语法：<form method="传送方法"></form>

10.1.4 编码方式enctype

   表单中的enctype属性用于设置表单信息提交的编码方式。

   enctype的取值：

   application/x-www-form-urlencoded       默认编码

   multipart/form-data                       MIME编码，上传文件的表单必须选择该项

语法：<form enctype="编码方式"></form>

10.1.5 目标显示方式target

   用来指定目标窗口打开的方式。表单的目标窗口用来显示表单的返回信息。
   取值：_self、_blank、_top、_parent

语法：<form target="窗口打开方式"></form>

10.2 插入表单对象

   表单元素：文字字段、单选按钮、复选按钮、菜单、列表、按钮。

10.2.1 文字字段text

   用户可在文字字段中输入文字。
   文字字段的参数含义：

   type       指定哪种表单元素，text则为文字字段。

   name       文字字段的名字，区分大小写

   value       定义文本框的默认值

   size       确定文本框在页面中的长度，字符为单位。

   maxlength   设置最多输入的字符数

语法：<input type="text" name="控件名" value="文字字段默认值" size="控件长度" maxlength="最长字符数">

10.2.2 密码域passwd

   密码域是特殊的文字字段，属性相同，但输入时以特殊字符显示。

语法：<input type="password">

10.2.3 单选按钮radio

   单选按钮value必须设置，单选按钮组中只有一个按钮是可设置为checked。单选按钮组中有多个时，name、value取值都要相同，才能有单选的效果。
   checked属性是默认勾选的，如：男、女。默认勾选是男的话，在“男”按钮代码加此属性。

语法：<input type="radio" name="名字" value="按钮取值" checked />

10.2.4 复选框chekbox

语法：<input type="checkbox" name="名字" value="取值" checked="checked">

10.2.5 普通按钮button

   value是按钮上的文字，onclick可实现一些特殊功能。

语法：<input type="button" name="名字" value="取值" onclick="处理程序" />

10.2.6 提交按钮submit

   提交按钮是一种特殊按钮，实现表单内容的提交。

语法：<input type="submit" name="名字" value="取值" onclick="处理程序" />

10.2.7 重置按钮reset

   清除用户在页面上的输入。

语法：<input type="reset" name="名字" value="取值" />

10.2.8 图像域image

   可用图像作为按钮。

语法：<input type="image" name="名字" src="图像路径" />

10.2.9 隐藏域hidden

   用于传送一些对用户不可见的数据，可通过隐藏域传送。

语法：<input type="hidden" name="名字" value="取值" />

10.2.10 文件域file

   用于上传文件。

语法：<input type="file" name="名字" size="长度" maxlength="最长字符" />

10.3 菜单和列表

   通过<select></select>标记实现。

10.3.1 下拉菜单

   selecred是用来指定默认的。

语法：<select name="名字"><option value="取值" selected="selected">内容</option></select>

10.3.2 列表项

语法：<select name="名字" size="显示的列表项数"><option value="取值">内容</option></select>

10.4 文本域标记textarea

   输入多行文本时，要用到文本域。

语法：<textarea name="名字" cols="列数" rows="行数">内容</textarea>

10.5 id标记

   id标记是一个特殊的标记。主要用于标识一个唯一的元素。

语法：<id="元素ID">

===========================
       第12章   使用CSS样式表
   ===========================

12.1 认识CSS

   CSS(层叠样式表)是一种制作网页的新技术。
   样式表的首要目的是为网页上的元素精确定位，还可包网页上的内容结构和格式控制分离。
   文件后缀名为.css。

12.2 使用CSS

12.2.1 CSS的基本语法

   CSS语法有三部分构成：选择符、样式属性、值。

   选择符：这组样式编码要针对的对象。可以是标记，也可是定义的ID或class。

   属性：样式的颜色、大小等属性。

   值：属性的值。形式有：1.指定范围的值。2.数值(px)或数字单位。定义多个属性时，用分号隔开。

语法：选择符{样式属性：值；样式属性：值...}

12.2.2 添加CSS的方法

   添加CSS的方法有4种：链接外部样式表、内部样式表、导入外部样式表、内嵌样式。

   1.链接外部样式表

       链接外部样式表就是在网页中调用已经定义好的样式表来实现样式表的应用，它是一个单独的文件，在页面中用<link>标记链接到这个样式表文件。
       <link>标记必须放到页面的<head>标记中。
       这种方法适用大型网站的CSS样式定义，一个样式表可应用多个页面。

   语法：<head>....<link rel="stylesheet" href="样式表文件名.css">...</head>

   2.内部样式表

       内部样式表一般在HTML文件的头部，即<head></head>标记中，以<<style></style>包含。

   语法：<head>...<<style type="text/css">样式表的定义</style>...</head>

   3.导入外部样式表

       导入外部样式表是指在内部样式表的<style>里导入一个外部样式表。导入时用@import。

   语法：<head>...<style type="text/css"> @import 样式表名.css</style>...</head>

   4.内嵌样式

       内嵌样式就是混合在HTML标记中使用。

       使用方法：直接在HTML标记中添加style参数，而style参数的内容就是CSS的属性和值。

   语法：<HTML标记 style=属性:值;...>

12.3 字体属性

12.3.1 字体font-family

   设置字体样式，和font中的face一样。

   若定义了多种字体，则会由前到后选择字体。即浏览器不支持字体1，则采取字体2，直到支持。若都不支持，则采用系统默认。

语法：font-family:"字体1","字体2",...

12.3.2 字号font-size

   设置字体大小。

   取值：

   xx-small       绝对字体尺寸，最小

   x-small           绝对字体尺寸，较小

   small            绝对字体尺寸，小

   medium           绝对字体尺寸，正常默认值。

   large           绝对字体尺寸，大

   x-large           绝对字体尺寸，较大

   xx-large       绝对字体尺寸，最大

   larger           相对字体尺寸，相对于父对象的字体尺寸，增大

   smaller           相对字体尺寸，相对于父对象的字体尺寸，减小

   length           采用百分比(50%)或长度值(12px)，不可为负值。百分比是基于父对象字体的尺寸。

语法：font-size:值

12.3.3 字体风格font-style

   设置字体的风格，如：斜体。
   取值：normal：默认、italic：斜体、oblique：偏斜体

语法：font-style:值

12.3.4 加粗字体font-weight

   取值范围：normal：正常、bold：粗体、bolder：特粗体、lighter：特细体、number(数字表示):范围100~900，一般都是整百数且后面不加px。

语法：font_weight:值

12.3.5 小写字母转为大写font-variant

   将小写英文转为大写。
   取值：normal：正常显示、small-caps：将小写转为大写且字体较小。

语法：font-variant

12.3.6 字体复合属性

   设置font的复合属性，用来简化CSS代码。

   复合属性包括：字体族科(样式)、字体大小、字体风格、加粗等，各值之间用空格相连。

语法：font:字面取值。

   例子：font:"宋体" 12px bold

12.4 颜色和背景属性

12.4.1 颜色属性color

   指定颜色，取值为单词或16进制RGB值。

语法：color:值

12.4.2 背景颜色background-color

   可设置网页的背景颜色，还可设置文字的背景颜色。

语法：background-color:颜色

12.4.3 背景图像background-image

语法：background-image:url(图像地址)

12.4.4 背景重复background-repeat

   可设置背景图像是否平铺，并且可以设置如何平铺。

   取值范围：

   no-repeat：背景不平铺

   repeat：背景平铺满整个网页

   repeat-x：背景水平平铺

   repeat-y：背景垂直平铺

语法：background-repeat:取值

12.4.5 背景附件background-attchment

   设置背景图像是否随对象滚动，即相对于所属的对象，如：属于页面，若拖动滚动条，是否滚动。scroll：默认值，滚动。fixed：固定。

语法：background-attachment:取值

12.4.6 背景位置background-position

   设置背景图像位置，只适用于块级元素和替换元素。
   替换元素：img、input、textarea、select、object

   位置取值：
       1.数字

           X(数值)       网页横向位置，单位可是所有尺度单位。

           Y(数值)       网页纵向位置，单位可是所有尺度单位。

       2.关键字描述：top、bottom、left、right。4个关键字结合使用，组成不同位置。
       如：
           top left       左上位置

           top center       靠上居中

           top right       右上位置

       3.百分比：百分比1 百分比2   。百分比1设置X坐标，百分比2设置Y坐标。

语法：bakcground-position:位置取值

12.4.7 背景复合属性

   取值范围：背景颜色、背景图像、背景重复、背景附件、背景位置。各值之间用空格相连。

语法：background:取值

12.5 段落属性

   包括：单词间隔、字符间隔、文字修饰、纵向排列、文本转换、文本排列、文本缩进、行高等。

12.5.1 单词间隔word-spacing

   取值可以是normal：正常间隔，也可使用长度值px。可取负值。

语法：word-spacing:取值

12.5.2 字符间隔letter-spacing

语法：letter-spacing:取值

12.5.3 文字修饰text-decoration

   设置下画线、删除线等。
   normal：默认，不修饰。

   underline：添加下画线。

   overline：添加上划线。

   line-through：添加删除线

   blink：文字闪烁效果

语法：text-decoration：取值

12.5.4 垂直对齐方式vertical-align

   取值范围：

   baseline       默认的对齐方式

   sub            文字的下标

   super            文字的上标

   top               垂直靠上对齐

   text-top       元素和上级元素的字体向上对齐

   middle           垂直居中对齐

   text-bottom       元素和上级元素的字体向下对齐

语法：vertical-align:排列方式

12.5.5 文本转换text-transform

   用来转换英文大小写。
   取值：

   none           使用原始值

   capitalize       每个单词的第一个字母大写

   uppercase       所有字母大写

   lowercase       所有字母小写

语法：text-transform：转换值

12.5.6 水平对齐方式text-align

   设置文本水平对齐方式。

   取值：

   left       左对齐

   right       右对齐

   center       居中

   justify       两端对齐

语法：text-align:排列值

12.5.7 文本缩进text-indent

   默认不缩进，只能设置向右缩进。可控制段落的首行缩进以及缩进的距离。可是长度值或百分比。

语法：text-indent:缩进值

12.5.8 文本行高line-height

   设置文本行的高度。

语法：line-height:取值

12.5.9 处理空白white-space

   设置页面内空白的处理方式。
   取值：

   nonrmal       默认，连续的空格合并。

   pre        源代码中的空格和换行符保留(在IE6中才能正确显示)

   nowrap       强制在同一行显示

语法：white-space:取值

12.5.10 文本反排unicode-bidi、direction

   这两个属性经常一起使用。

   1.unicode-bidi

       取值：

           bidi-override       严格按照direction属性的值重排序

           normal               默认

           embed                对象打开附加的嵌入层

   语法：unicode-bidi:取值

   2.direcrtion

       取值：

           ltr           从左到右顺序阅读

           rtl           从右到左顺序阅读

           inherit       文本流的值不可继承

12.6 外边距与内边距属性

   外边距属性可设置：元素周围的边界宽度，包括上下左右的距离。
   内边距属性可设置：边框和元素内容之间的间距，包括上下左右的边距值。
   这两个属性的值都是数值，可为长度，也可为百分比。

   CSS盒子模式：Content(内容)、padding(内边距)、border(边框)、margin(外边距)。

           ---------------------------------------------------------------------
           |                       margin-top                                   |
           |       ------------------------------------------------           |
           |       |                   border                       |           |
           |       |       --------------------------------       |           |
           |       |       |           padding               |       |           |
           |       |       |   ----------------------       |       |           |
           |       |       |   |                      |       |       |           |
           | left |       |   |                      |       |       | right   |
           |       |       |   |       centent          |       |       |           |
           |       |       |   |                      |       |       |           |
           |       |       |   |                      |       |       |           |
           |       |       |   ----------------------       |       |           |
           |       |       |                               |       |           |
           |       |       --------------------------------       |           |
           |       |                                               |           |
           |       ------------------------------------------------           |
           |                           bottom                                   |
           ---------------------------------------------------------------------

   Centent(内容区)：是盒子的主要信息内容，可是文本、图片等。内容区是必选的。

   padding(内边距)：内容区和边框之间的距离，可看作内容区的背景区域。属性：top、bottom、left、right。快捷内边距属性：padding。

   border(边框)：属性：border-style、border-width、border-color。快捷属性：border。

   margin(外边距)：位于盒子的最外围，不是一条线，而是添加外边框外围的空间。使元素盒子之间不必紧凑连接，是CSS布局的重要手段。属性：top、bottom、left、right。快捷内边距属性：margin。

12.6.1 上边距margin-top

   也叫顶端边距，可设置元素的上边界，可用长度值或百分比。

   长度值相当于设置顶端的绝对边距值，包括数字和单位。

   百分比是设置相对于上级元素的宽度的百分比，允许负值。

   auto是自动取值，即元素的默认值。

   left、right、bottom用法一样。

语法：margin-top:边距值

12.6.2 外边距复合属性margin

   设置1个值：应用于4个边界

   设置2或3个值：则省略的值与对边相等

   设置4个值：对应上下左右

语法：margin:长度值|百分比|auto

12.6.3 内边距padding

   设置边框与内容间的间隔。用法和margin相同，但在快捷属性中没auto取值。

12.7 边框属性

   3个属性：1.宽度 2.颜色 3.样式

12.7.1 边框样式border-style

   用此属性时必须指定可见的边框。

   可分别设置：上(border-top-style)、下(border-bottom-style)、左(border-left-style)、右(border-right-style)的边框。

   样式值：

   none           默认，无边框

   dotted           点线边框

   dashed           虚线边框

   solid           实线边框

   double           双实线边框

   groove           边框具有立体感的沟槽

   ridge           边框成脊形

   inset           整个边框凹陷，即在边框内嵌一个立体边框

   outset           整个边框凸起，即在外边框嵌入一个立体边框

语法：border-top-style:值

12.7.2 边框宽度border-wigth

   设置元素边框的宽度。

   border-width取值：

       medium       默认宽度

       thin       小于默认

       thick       大于默认

   单方向的取值为长度值，不能为负。

语法：
   border-wigth:值

   border-top-width:值

   border-right-width:值

   border-bottom-width:值

   border-left-width:值

12.7.3 边框颜色border-color

   设置边框颜色，用单词或RGB值。

语法：
   border-top-color:值

   border-bottom-color:值

   border-left-color:值

   border-right-color:值

12.7.4 边框属性border

   设置元素的边框样式、宽度、颜色。

语法：

   border:宽度样式颜色值

   border-top|bottom|left|right:设置单个边框

12.8 定位属性

   设置元素的位置，包括相对定位和绝对定位。

   相对定位：允许元素相对于文档布局的原始位置上进行偏移。

   绝对位置：允许元素与原始文档布局分离并任意定位。

12.8.1 定位方式position

   设置定位方式。

   取值：

       static           默认值

       absolute       绝对定位，需要left、right、top、bottom等属性进行绝对定位。

       fixed           表示当页面滚动时，元素不随滚动。

       relative       采用相对定位，对象不可层叠。

12.8.2 元素位置top、bottom、left、right

   元素位置和定位方式共同设置元素的具体位置。

语法：top|bottom|left|right:auto|长度值|百分比

12.8.3 层叠顺序z-index

   可设置层的先后顺序和覆盖关系。

   默认，z-index值为1，表示该层位于最底层

   auto遵从其父对象的定位。数字必须是无单位的整数值，可取负值。

语法：z-index:auto|数字

12.8.4 浮动属性float

   设置文字在某个元素的周围，能应用于所有的元素。

   取值：

       none       默认，表示对象浮动

       left       文字浮动在元素的右边

       right       文字浮动在元素的左边

语法：float：none|left|right

12.8.5 清除属性clear

   用于指定一个元素是否允许有其他元素漂浮在其周围。

   取值：

       none       允许两边都有浮动对象，默认

       left       不允许左边有浮动对象

       right       不允许右边有浮动对象

       both       不允许有浮动对象

语法：clear：none|left|right|both

12.8.6 可视区域clip

   可以限定只显示裁切出的区域，形状为矩形。

   只要设置两点即可，一个是矩形左上角的顶点，由top和left设置完成，另一个是右下角的顶点，由bottom和right设置完成。

   auto表示对象不裁剪，默认。

   rect(数字、数字、数字、数字)：表示上下左右顺序，也可用auto替换，表示不裁切。

语法：clip：auto|rect(数字、数字、数字、数字)

12.8.7 层的宽度和高度width、height

语法：width|height：auto|长度值

12.8.8 超出范围overflow

   设置当层内的内容超出层所能容纳的范围时的显示方式。

   取值：

       visible           层的大小和内容自动显示出来

       auto           只在内容超出的层的范围时显示滚动条

       hidden           隐藏超出层范围的内容

       scroll           总是显示滚动条

语法：overflow：visible|auto|hidden|scroll

12.8.9 可见属性visibility

   针对嵌套层的设置，嵌套层是插入在其他层中的层，分为嵌套的层和被嵌套的层。

   取值：

       inherit       继承父对象的可见性，默认

       visible       无论父层对象是否可见，子层都可见

       hidden       无论父层是否可见，子层都隐藏。

12.9   列表属性

   设置列表项的样式、包括符号、缩进。

语法：visibility：inherit|visible|hidden

12.9.1 列表符号list-style-type

   设置列表项所使用的符号类型。

   取值：

       disc           默认，实心圆

       circle           空心圆

       square           实心方块

       decimal           阿拉伯数字

       lower-roman       小写罗马数字

       upper-roman       大写罗马数字

       lower-alpha       小写字母

       upper-alpha       大写字母

       none           不使用任何项目符号或编号

语法：list-style-type：值

12.9.2 图像符号list-style-image

   使用图像作为列表符号。

   取值：none：不指定图像     url使用图像

语法：list-style-image:none|url(图像地址)

12.9.3 列表缩进list-style-position

   设置列表缩进的程度。

   outside       列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

   inside       列表项目标记放置在文本以内，且环绕文本根据标记对齐。

语法：list-style-position：outside|inside

12.9.4 列表复合属性list-style

   当list-style-image和list-style-type都被指定时，list-style-image优先，除非list-style-image设置为none或指定url的图片不能显示。

语法：list-style：list-style-image|list-style-position|list-style-type

12.10 光标属性cursor

   设置在对象上移动时鼠标指针采用的光标形状。

   取值：

       default               默认，通常是一个箭头

       hand               竖起一只手指的手型光标

       crosshair           简单的十字线光标

       text               大写I的形状

       help               带有问号的箭头

       wait               用于标示程序忙，用户需等待的光标

       e-resize           向东的箭头

       ne-resize           东北的箭头

       n-resize           向北的箭头

       nw-resize           西北的箭头

       w-resize           向西的箭头

       sw-resize           西南的箭头

       s-resize           向南的箭头

       se-resize           东南的箭头

       auto               默认。根据当前情况自动确定光标类型

12.11 滤镜属性

   可对网页的对象进行特效处理。

12.11.1 不透明度alpha

   设置对象内容的透明度，使图像产生透明渐变效果。

   参数：

       opacity               开始时的透明度，取值：0~100。默认为0，完全透明。

       finishopacity       结束时的透明，取值：0~100

       style                渐变的样式，0：无渐变，1：直线渐变，2：圆形渐变，3：矩形渐变

       startx               设置透明渐变开始点的水平坐标，数值为对象宽度的百分比处理，默认为0

       starty               设置透明渐变开始点的垂直坐标

       finshx               设置透明渐变结束点的水平坐标

       finishy               设置透明渐变结束点的垂直坐标

语法：filter：alpha(参数1=值，参数2=值，...)

12.11.2 动感模糊blur

   设置对象的动态模糊效果。

   属性取值：

       add               设置是否显示原始图片

       direction       设置动态模糊的方向，按顺时针的方向以45度为单位进行累积。

       strength       设置动态模糊的强度，只能用整数指定，默认为5个。

语法：filter：blur(add=值，direction=值，strength=值)

12.11.3 对颜色进行透明处理chroma

   将图片中的某种颜色转换为透明色，产生透明效果。

语法：filter：chroma(color=颜色)

12.11.4 阴影效果dropShadow

   设置在指定的方向和位置上产生阴影效果。

   取值：

       color           控制阴影的颜色

       offX和offY       设置阴影相对于原图移动的水平和垂直距离。

       positive       阴影是否透明

语法：dropShadow(color=阴影颜色，offX=值，offY=值，positive=值)

12.11.5 对象翻转flipH、flipV

   flipH设置沿水平方向翻转对象

   flipV设置沿垂直方向翻转对象

语法：filter：flipH|flipV

12.11.6 发光效果 glow

   设置在对象周期产生发光的效果。
   color：设置发光的颜色
   strength：设置发光的强度，取值：1~255，默认为5.

语法：filter：Glow(color=颜色，strength=强度值)

12.11.7 灰度处理gray

   把彩色图片的色彩去掉，转为黑白图。

语法：filter：gray

12.11.8 反相invert

   设置对象反相，可将图片的颜色、饱和度、亮度完全反过来。

语法：filter：invert

12.11.9 X光片效果xray

   制作类似X光片的效果。

语法：filter：xray

12.11.10 遮罩效果mask

   为对象产生遮罩效果，可做出向印象一样的效果。

   color：设置外围遮盖的颜色，可是单词或RGB值。

语法：filter：mask(color=颜色)

12.11.11 波形滤镜wave

   为对象内容创建波纹扭曲效果。

   取值：

       add               设置是否要把对象按照波形样式打乱

       freq           设置图片上的波浪数

       lightstrength   设置波浪的光照强度，取值：0~100

       phase           设置波浪的起始位置

       strength       设置波浪的强度大小

语法：filter：wave(add=值，freq=值，lightstrength=值，phase=值，strength=值)

13.1 Web标准与CSS布局

   Web标准是W3C和其他标准化组织制定的一套规范集合。主要有3部分：结构、表现、行为。

   1.结构

       用于对网页中用到的信息进行分类与整理。主要用到技术：HTML、XML、XHTML。

   2.表现

       用于对信息进行版式、颜色、大小等控制，主要用到技术：CSS层叠样式表。

   3.行为

       文档内部的模型定义及交互行为的编写，用于编写交互式的文档，主要技术：DOM\ECMAScript。

       DOM(文档对象模型)：浏览器与内容结构之间沟通的接口，使浏览器可访问页面的标准组件。

       ECMAScript脚本语言：用于实现具体界面上对象的交互操作。

阅读全文

0 0