HTML教程

第一章 HTML基础知识

Web页是由HTML（Hypertext Markup Language，超文本标记语言）组织起来的，由浏览器解释显示的一种文件。

最初的HTML语言功能极其有限，仅能够实现静态文本的显示，人们远远不满足于死板的类似于文本文件的Web页。后来增强的HTML语言扩展了对图片、声音、视频影像的支持。通过浏览器访问到的Web页面，通常是基于HTML的基础上所形成的。

一、HTML的概述

HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档HTTP的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年来HTML就一直被用作ＷＷＷ（是World Wide Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。

所谓超文本，是它可以加入图片、声音、动画、影视等内容，HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接。如下所示：

通过HTML可以表现出丰富多彩的设计风格：

图片调用：<IMG SRC="文件名"> 文字格式： <FONT SIZE="+5 " COLOR="#00FFFF">文字</FONT>

通过HTML可以实现页面之间的跳转：

页面跳转：〈A HREF="文件路径/文件名"></A>

通过HTML可以展现多媒体的效果：

声频：<EMBED SRC="音乐地址" AUTOSTART=true> 视频：<EMBED SRC="视频地址" AUTOSTART=true>

从上面HTML超文本文件时需要用到的一些标签。在HTML中每个用来作标签的符号都是一条命令、它告诉浏览器如何显示文本。这些标签均由"<"和">"符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“<标签名字属性>”来表示。

HTML只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存THML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。

二、HTML的基本结构：

一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置， HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。下面是一个最基本的html文档的代码:

<HTML></HTML>在文档的最外层，文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有 <html>标签，也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。

<HEAD></HEAD>是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公共属性。若不需头部信息则可省略此标记，良好的习惯是不省略。

<title>和</title>是嵌套在<HEAD>头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。

<BODY> </BODY>标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。

三、 HTML的标签与属性

对于刚刚接触超文本，最大的障碍就是一些用“<”和 “>”括起来的句子，我们称它为标签，是用来分割和标签文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。属性是标志里的参数的选项，HTML的标签分单标签和成对标签两种。成对标签是由首标签<标签名> 和尾标签</标签名>组成的，成对标签的作用域只作用于这对标签中的文档。单独标签的格式<标签名>，单独标签在相应的位置插入元素就可以了，大多数标签都有自己的一些属性, 属性要写在始标签内，属性用于进一步改变显示的效果, 各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下：

<标签名字属性1 属性2 属性3 … >内容</标签名字>

作为一般的原则，大多数属性值不用加双引号。但是包括空格、％号，＃号等特殊字符的属性值必须加入双引号，对属性值加双引号。如：

注意事项：输入始标签时，一定不要在“<”与标签名之间输入多余的空格，也不能在中文输入法状态下输入这些标签及属性，否则浏览器将不能正确的识别括号中的标志命令，从而无法正确的显示你的信息。

第二章 HTML标签格式

一、基本标记

基本标记是用来定义页面属性的一些标记语言。通常一份HTML网页文件包含3个部分：标头区<HEAD>„„</HEAD>、内容区<BODY>„„</BODY>和网页区<HTML>„„</HTML>。

<!DOCTYPE>

作用:声明是文档中的第一成分，位于标签之前。

1．<html>„„</html>

作用:此元素可告知浏览器其自身是一个HTML文档。

属性:manifest:值(url)为脱机使用定义缓存信息。

<html>标志用于HTML文档的最前边，用来标识HTML文档的开始。而</html>标志恰恰相反，它放在HTML文档的最后边，用来标识HTML文档的结束，两个标志必须一块使用。

2．<head>„„</head>

作用:标签用于定义文档的头部，它是所有头部元素的容器。

属性:profile:值(URL)一个有空格分隔的URL列表，这些URL包含着有关页面的元数据信息。

<head>和</head>构成HTML文档的开头部分，在此标志对之间可以使用<title></title>、<script></script>等标志对。这些标志对都是用来描述HTML文档相关信息的，<head>和</head>标志对之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。

3．<body>„„</body>

作用:元素定义文档的主体。

属性:alink:值(rgb(x,x,x),#xxxxxx,colorname)不赞成使用，请使用样式取代它。规定文档中活动链接(active link)的颜色。

background:值(URL)不赞成使用。请使用样式取代它。规定文档的背景图像。

bgcolor:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。规定文档中的背景颜色。

link:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。规定文档中未访问链接的默认颜色。

text:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。规定文档中所以文本的颜色。

vlink:值(reb(x,x,x),#xxxxxx,colorname)不赞成使用。规定文档中已被访问链接的颜色。

<body>和</body>是HTML文档的主体部分，在此标志对之间可包含<p>„„</p>、<h1>„„</h1>、<br>、<hr>等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。

引号内的rrggbb用6个十六进制数表示的RGB（即红、绿、蓝3色的组合）颜色，如#ff0000对应为红色。

4．<title>„„</title>

作用:元素可定义文档的标题。

属性:dir:值(rtl,ltr)规定元素中内容的文本方向。

lang:值(language_code)规定元素中内容的语言代码。

xml:lang:值(language_code)规定XHTML文档中元素内容的语言代码。

使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的主题。要将网页的主题显示到浏览器的顶部其实很简单，只要在<title></title>标志对之间加入需要显示的文本即可。下面是一个简单的网页实例。通过该实例，读者便可以了解以上各个标志对在一个HTML文档中的布局或所使用的位置。

<html>

<head>

<title>显示在浏览器窗口最顶端中的文本</title>

</head>

</body>

</html> 

注意：<title></title>标志对只能放在<head></head>标志对之间。

二、格式标记

这里所介绍的格式标记都是用于<body></body>标志对之间的。

1．<p>„„</p>

作用:标签定义段落。

属性:align:值(left,center,right,justify)不推荐使用。请使用样式取代它。规定标题中文本的排列方式。

<p></p>标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。<p>标志还可以使用align属性，它用来说明对齐方式，语法如下所示。

Align的参数可以是Left（左对齐）、Center（居中）和Right（右对齐）3个值中的任何一个。

例如<p align="center"></p>表示标志对中的文本使用居中的对齐方式。

2．<br>

作用:可插入一个简单的换行符。

属性:没有可选属性。

<br>是一个很简单的单标记指令，它没有结束标志，因为它用来创建一个回车换行，即标记文本换行。 注意：如果把<br>加在<p></p>标志对的外边，将创建一个大的回车换行，即<br>前边和后边的文本的行与行之间的距离比较大。若放在<p></p>的里边则<br>前边和后边的文本的行与行之间的距离将比较小。

3．<blockquote>„„</blockquote>

在<blockquote></blockquote>标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。

4．<dl>„„</dl>、<dt>„„</dt>、<dd>„„</dd>

<dl></dl>用来创建一个普通的列表；

作用:标签定义了定义列表。标签用于结合<dt>(定义列表中的项目)和<dd>(描述列表中的项目)。

属性:没有可选属性。

<dt></dt>用来创建列表中的上层项目；

作用:标签定义了定义列表中的项目。

属性:没有可选属性。

<dd></dd>用来创建列表中最下层项目。

作用:在定义列表中定义条目的定义部分。

属性:没有可选属性。

<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。通过下面的实例

<html>

<head>

<title>一个普通列表</title>

</head>

</dl>

</body>

</html>

5．<ol>„„</ol>、<ul>„„</ul>、<li>„„</li>

<ol></ol>标志对用来创建一个标有数字的列表。

作用:标签定义有序列表。

属性:compact:值(compact)HTML5 中不支持。HTML4.01 中不赞成使用。规定列表呈现的效果比正常情况更小巧。 reversed:值(reversed)规定列表顺序为降序。(9,8,7…) ;start:值(number)规定有序列表的起始值。

type:值(1,A,a,I,i)规定在列表中使用的标记类型。

<ul></ul>标志对用来创建一个标有圆点的列表。

作用:标签定义无序列表。

属性:compact:值(compact)不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。 type:值(disc,square,circle)不赞成使用。请使用样式取代它。规定列表的项目符号的类型。

作用:标签定义列表项目。<li>标签可使用在有序列表（<ol>）和无序列表（<ul>）中。

属性:type:值(A,a,I,i,1,disc,square,circle)不赞成使用。请使用样式代替它。规定使用哪种项目符号。value:值(number)不赞成使用。请使用样式代替它。规定列表项目的数字。

<li></li>标志对只能在<ol></ol>或<ul></ul>标志对之间使用，此标志对用来创建一个列表项，若<li></li>放在<ol></ol>之间，则每个列表项加上一个数字；若放在<ul></ul>之间，则每个列表项加上一个圆点。示例如下所示：

<html>

<head>

</head>

<body text="blue"

<ol>

</ol>

<ul>

</ul>

</body>

</html>

6．<div>„„</div>

<div></div>标志对用来排版大块HTML段落，也用于格式化表，此标志对的用法与<p></p>标志对非常相似，同样有align对齐方式属性。

三、文本标记

文本标记主要针对文本的属性设置进行标记说明，如斜体、黑体字、加下划线等。

1．<pre>„„</pre>

<pre></pre>标志对用来对文本进行预处理操作。

2．<h1></h1>„„<h6></h6>

作用:<h1>-<h6>标签了定义标题。<h1>定义最大的标题，<h6>定义最小的标题。

属性:align:值(left,center,right,justify)不推荐使用。请使用样式取代它。规定标题中文本的排列。

HTML语言提供了一系列对文本中的标题进行操作的标志对：<h1></h1>、<h2></h2>、„„、<h6></h6>。<h1></h1>是最大的标题，而<h6></h6>则是最小的标题。如果在HTML文档中需要输出标题文本，可用这6对标题标志对中的任何一对。

3．<b>„„</b>、<i>„„</i>、<u>„„</u>

经常使用Word的人对这3个标志对一定很快就能掌握。<b></b>用来使文本以黑体字的形式输出；<i></i>用来使文本以斜体字的形式输出；<u></u>用来使文本以下加一划线的形式输出。

4．<tt>„„</tt>、<cite>„„</cite>、<em>„„</em>、<strong>„„</strong>

这些标志对的用法和上边的一样，差别只是在于输出的文本字体不太一样而已。<tt></tt>用来输出打字机风格字体的文本；<cite></cite>用来输出引用方式的字体，通常是斜体；<em></em>用来输出需要强调的文本（通常是斜体加黑体）；<strong></strong>则用来输出加重文本（通常也是斜体加黑体）。

5．<font>„„</font>

<font></font>可对输出文本的字体大小、颜色进行随意的改变。这些改变主要是通过对它的两个属性size和color的控制来实现的。size属性用来改变字体的大小，它可以取值为-1、1和+1；而color属性则用来改变文本的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。

文本标记的具体用法如以下代码所示：

<html>

<head>

<title>文本标记的综合示例</title>

</head>

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

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

<p><b>黑体字文本</b> </p>

<p><i>斜体字文本</i> </p>

<p><u>下加一划线文本</u> </p>

<p><tt>打字机风格的文本</tt></p>

<p><cite>引用方式的文本</cite></p>

<p><em>强调的文本</em></p>

<p><strong>加重的文本</strong></p>

<p><font size="+1" color="red">size取值“+1”、color取值“red”时的文本</font></p>

</body>

</html>

四、图像标记

再简单朴素的网页如果只有文字而没有图像将失去许多活力，图像在网页制作中是非常重要的一个方面，HTML语言也专门提供了<img>标志来处理图像的输出。

1．<img>

作用:img元素向网页中嵌入一幅图像。

属性:必需的属性:src属性:值(URL)规定显示图像的URL和alt属性:值(text)规定图像的代替文本。

可选属性:align:值(top,bottom,middle,left,right)不推荐使用。规定如何根据周围的文本来排列图像。

border:值(pixels)不推荐使用。定义图像周围的边框。

height:值(pixels %)定义图像的高度。

hspace:值(pixels)不推荐使用，定义图像左侧和右侧的空白。

ismap:值(URL)将图像定义为服务器端图像映射。

longdesc:值(URL)指向包含长的图像描述文档的URL。

usemap:值(URL)将图像定义为客户器端图像映射。

vspace:值(pixels)不推荐使用。定义图像顶部和底部的空白。

width:值(pixels %)设置图像的宽度。

<img>标志并不是真正地把图像加入到HTML文档图1-31 文本标记执行效果图中，而是将标志对的src属性赋值。这个值是图像文件的文件名，其中包括路径，这个路径可以是相对路径，也可以是网址。所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前文件的相对位置所形成的路径。

假如网站的HTML文件与图像文件（文件名假设是logo.gif）在同一个目录下，则可以将代码写成 <img src="logo.gif">。假如网站的图像文件放在当前的HTML文档所在目录的一个子目录（子目录名假设是images）下，则代码应为<img src="images/logo.gif">。 

注意：通常图像文件都会放在网站中一个独立的目录里。必须注意一点，src属性在<img>标志中是必须赋值的，是标志中不可缺少的一部分。

除此之外，<img>标志还有alt、align、border、width和height属性。align是图像的对齐方式，在上边已经提到过。border属性是图像的边框，可以取大于或者等于0的整数，默认单位是像素。width和height属性是图像的宽和高，默认单位也是像素。alt属性是当光标移动到图像上时显示的文本。

2．<hr>

作用:标签在HTML页面创建一条水平线。

属性:align:值(center,left,right)不赞成使用。请使用样式取代它。规定hr元素的对齐方式。

noshade:值(noshade)不赞成使用。请使用样式取代它。规定hr元素的颜色呈现为纯色。

size:值(pixels)不赞成使用。请使用样式取代它。规定hr元素的高度(厚度)。

width:值(pixels %)不赞成使用。请使用样式取代它。规定hr元素的宽度。

<hr>标志是在HTML文档中加入一条水平线。它可以直接使用，具有size、color、width和noshade属性。 size用来设置水平线的厚度，而width用来设定水平线的宽度，默认单位是像素。noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线，不加入此属性水平线将有阴影。图像标记的使用如以下代码所示

<html>

<head> <title>图像标记的综合示例</title>

</head>

<body>

</body>

</html>

五、表格标记

表格标记对于制作网页是很重要的，现在很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意地进行背景和前景颜色的设置。

1．<table>„„</table>

作用:标签定义HTML表格。

属性:align:值(left,center,right)不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。

bgcolor:值(rgb(x,x,x),#xxxxxx,colorname)不赞成使用。请使用样式代替。规定表格的背景颜色。

border:值(pixels)规定表格边框的宽度。

cellpadding:值(pixels %)规定单元边沿与其内容之间的空白。

cellspacing:值(pixels %)规定单元格之间的空白。

frame:值(void,above,below,hsides,lhs,rhs,vsides,box,border)规定外侧边框的哪个部分是可见的。

rules:值(none,groups,rows,cols,all)规定内侧边框的哪个部分是可见的。

summar:值(text)规定表格的摘要。

width:值(% pixels)规定表格的宽度。

<table></table>标志对用来创建一个表格。它的属性bgcolor、bordercolor、cellpadding等。具体的属性参数将在使用Dreamweaver整合页面时作详细介绍。

2．<tr>„„</tr>

<tr></tr>标志对用来创建表格中的行。只能在<table></table>标志之间使用，而此标志间加入文本无效。

作用:标签定义HTML表格中的行。

属性:align:值(right,left,center,justify,char)定义表格行的内容对齐方式。

bgcolor:值(rgb(x,x,x)#xxxxxx,colorname)不赞成使用。请使用样式取而代之。规定表格行的背景颜色。

char:值(character)规定根据哪个字符来进行文本对齐。

charoff:值(number)规定第一个对齐字符的偏移量。

valign:值(top,middle,bottom,baseline)规定表格行内容。

2. 1<td>„„</td>

<td></td>标志对用来创建表格中一行中的每一个表格，此标志对只在<tr></tr>标志对之间才有效的。

作用:标签定义了定义列表中的项目。td元素内的文本通常是左对齐。

属性:abbr:值(text)规定单元格中内容的缩写版本。

align:值(left,right,center,justify,char)规定单元格内容的水平对齐方式。

axis:值(category_name)对单元进行分类。

bgcolor:值(rgb(x,x,x),#xxxxxx,colorname)不赞成使用。请使用样式取而代之。规定单元格的背景颜色。

char:值(character)规定根据哪个字符来进行内容的对齐。

charoff:值(number)规定对齐字符的偏移量。

colspan:值(number)规定单元格可横跨的列数。

headers:值(header_cells’_id)规定与单元格相关的表头。

height:值(pixels %)不赞成使用。请使用样式取而代之。规定表格单元格的高度。

nowrap:值(nowrap)不赞成使用。请使用样式取而代之。规定单元格中的内容是否折行。

rowspan:值(number)规定单元格可横跨的行数。

scope:值(col,colgroup,row,rowgroup)定义将表头数据与单元数据相关联的方法。

valign:值(top，middle，bottom，baseline)规定单元格内容的垂直排列方式。

width:值(pixels %)不赞成使用。请使用样式取而代之。规定表格单元格的宽度。

3．<th>„„</th>

作用:定义表格内的表头单元格。<th>元素内部的文本会呈现为居中的粗体文本。

属性:abbr:值(text)规定单元格中内容的缩写版本。

align:值(left,right,center,justify,char)规定单元格内容的水平对齐方式。

axis:值(category_name)对单元格进行分类。

bgcolor:值(rgb(x,x,x),#xxxxxx,colorname)不推荐使用。请使用样式代替它。规定表格单元格的背景颜色。

char:值(character)规定根据哪个字符来进行内容的对齐。

charoff:值(number)规定对齐字符的偏移量。

colspan:值(number)设置单元格可横跨的列数。

headers:值(idrefs)有空格分隔的表头单元格ID列表，为数据单元格提供表头信息。

height:值(pixels %)不推荐使用。请使用样式代替它。规定表格单元格的高度。

nowrap:值(nowrap)不推荐使用。请使用样式替代它。规定单元格中的内容是否折行。

rowspan:值(number)规定单元格可横跨的行数。

scope:值(col,colgroup,row,rowgroup)定义将表头数据与单元数据相关联的方法。

valign:值(top,middle,bottom,baseline)规定单元格内容的垂直排列方式。

width:值(pixels %)不推荐使用。请使用样式取而代之。规定表格单元格的宽度。

<th></th>标志对用来设置表格头，通常是黑体居中文字。表格标记使用如下代码示例。

<html>

<head>

<title>表格标记的综合示例</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

<td width="16%" align="center">桑普多利亚</td>

<td width="17%" align="center">皇家马德里</td>

</tr>

<tr>

<td width="17%" align="center">米德尔斯堡</td>

<td width="17%" align="center">马德里竞技</td>

</tr>

</table>

</body>

</html>

4.<caption>

作用:标签定义表格的标题。<caption>标签必须直接放置到<table>标签之后。

属性:align:值(left,right,top,bottom)不赞成使用。请使用样式取而代之。规定标题的对齐方式。

六、链接标记

链接是HTML语言的一大特色，正因为有了链接，网站内容的浏览才能够具有灵活性和网络性。

作用:标签定义超链接，用于从一张页面链接到另一张页面。<a>元素最重要的属性是href属性，它指示链接的目标。

属性:charset:值(char_encoding)HTML5中不支持。规定被链接文档的字符集。

coords:值(coordinates)HTML5中不支持。规定链接的坐标。

download:值(filename)规定被下载的超链接目标。

href:值(URL)规定链接指向的页面的URL。

hreflang:值(language_code)规定被链接文档的语言。

media:值(media_query)规定被链接文档是为何种媒介/设备优化的。

name:值(section_name)HTML5中不支持。规定锚的名称。

rel:值(text)规定当前文档与被链接文档之间的关系。

rev:值(text)HTML5中不支持。规定链接文档与当前文档之间的关系。

shape:值(default,rect,circle,poly)HTML5中不支持。规定链接的形状。

target:值(_blank,_parent,_self,_top,framename)规定在何处打开链接文档。

type:值(MIME type)规定被链接文档的的MIME类型。

1．<a href="„„">„„</a>

该标志对的属性href是无论如何不可缺少的，标志对之间加入需要链接的文本或图像（链接图像即加入<img src="">标志）。

href的值可以是URL形式，即网址或相对路径，也可以是mailto:形式，即发送E-mail形式。当href为URL时，语法为<a href="URL"></a>，这样就构成一个超文本链接了。

<a href="http://xld.home.chinaren.net/">这是我的网站</a>

当href为邮件地址时，语法为<a href="mailto:EMAIL"></a>，这就创建了一个自动发送电子邮件的链接，mailto:后边紧跟想要自动发送的电子邮件的地址（即E-mail地址）。

例如：<a href="mailto:xiaolida@263.net">这是我的电子信箱（E-mail信箱）</a>

此外，<a href=""></a>还具有target属性，此属性用来指明浏览目标帧。

2．<a name="„„">„„</a>

<a name=""></a>标志对要结合<a href=""></a>标志对使用才有效果。<a name=""></a>标志对用来在HTML文档中创建一个标签（即做一个记号），属性name是不可缺少的，它的值即是标签名。例如：<a name="标签名">此处创建了一个标签</a>。

创建标签是为了在HTML文档中创建链接，以便找到同一文档中有标签的位置。必须使用<a href=""></a>标志对。

例如要找到“标签名”这个标签，代码：<a href="#标签名">单击此处将使浏览器跳到“标签名”处</a>。

注意：href属性赋的值若是标签的名字，必须在标签名前边加一个“#”号。

七、帧标记

帧它可用来向浏览器窗口中装载多个HTML文件。每个HTML文件占据一个帧，而多个帧可以同时显示在同一个浏览器窗口中，它们组成了一个最大的帧。帧通常的使用方法是在一个帧中放置目录，然后将HTML文件显示在另一个帧中。

1．<frameset>„„</frameset>

<frameset></frameset>标志对用来定义主文档中有几个帧并且各个帧是如何排列的。此标志对放在帧的主文档的<body></body>标志对的外边，也可以嵌在其他帧文档中，并且可以嵌套使用。

它具有rows和cols属性，使用<frameset>标志时这两个属性至少必须选择一个，否则浏览器只显示第一个定义的帧，<frameset></frameset>标志对也就没有起到任何作用了。

rows用来规定主文档中各个帧的行定位，而cols用来规定主文档中各个帧的列定位。这两个属性的取值可以是百分数、绝对像素值或星号“*”，其中星号代表那些未被说明的空间，如果同一个属性中出现多个星号，则将剩下的未被说明的空间平均分配。

2．<frame> <frame>

标志放在<frameset></frameset>之间，用来定义某一个具体的帧。<frame>标志具有src和name属性，这两个属性都是必须赋值的。

src是此帧的源HTML文件名（包括网络路径，即相对路径或网址），浏览器将会在此帧中显示src指定的HTML文件。name是此帧的名字，这个名字是用来供超文本链接标志<a href="" target="">中的target属性指定链接的HTML文件将显示在哪一个帧中。

例如定义了一个帧，名字是main，在帧中显示的HTML文件名是jc.htm，则代码是<frame src="jc.htm" name="main">。当单击这个链接后，文件new.htm将要显示在名为main的帧中，则代码为<a href="new.htm" target="main">需要链接的文本</a>。

此外，<frame>标志还有scrolling和noresize属性，scrolling用来指定是否显示滚动轴，取值可以是“yes”（显示）、“no”（不显示）或“auto”（若需要则会自动显示，不需要则自动不显示）。noresize属性直接加入标志中即可使用，不需赋值，它用来禁止用户调整一个帧的大小。

3．<noframes></noframes>

<noframes></noframes>标志对也是放在<frameset></frameset>标志对之间，用来在那些不支持帧的浏览器中显示文本或图像信息。在此标志对之间先紧跟<body></body>标志对，然后才可以使用前面所讲过的任何标志。

八、表单标记

表单在Web网页中用来给访问者填写信息，从而获得用户信息，使网页具有交互的功能。

1．<form>„„</form>

作用:标签用于为用户输入创建HTML表单。

属性:accept:值(MIME_type)HTML5中不支持。

accept-charset:值(charset_list)规定服务器可处理的表单数据字符集。

action:值(URL)规定当提交表单时向何处发送表单数据。

autocomplete:值(on,off)规定是否启用表单的自动完成功能。

method:值(get,post)规定用于发送form-data 的http方法。

name:值(form_name)规定表单的名称。

target:值(_blank,_self,_parent,_top,foamename)规定在何处打开 action URL。

<form></form>标志对用来创建一个表单，即定义表单的开始和结束位置，在标志对之间的一切都属于表单的内容。<form>标志具有action、method和target属性。

action的值是处理程序的程序名（包括网络路径：网址或相对路径）。例如：<form action="http://xld. home.chinaren.net/counter.cgi">，当用户提交表单时，服务器将执行网址http://xld.home.chinaren.net/上的名为counter.cgi的CGI程序。

method属性用来定义处理程序从表单中获得信息的方法，可取值为GET和POST。GET方法是从服务器上请求数据，POST方法是发送数据到服务器。两者的区别在于GET方法所有参数会出现在URL地址中，而POST方法的参数不会出现在URL中。通常GET方法限制字符的大小，POST则允许传输大量数据。

事实上POST方法可以没有时间限制地传递数据到服务器，用户在浏览器端是看不到这一过程的，所以POST方法比较适合用于发送一个保密或者比较大量的数据到服务器。而GET方法会将所要传输的数据附在网址后面，然后一起送达服务器，因此传送的数据量就会受到限制，但是执行效率却比POST方法好。

target属性用来指定目标窗口或目标帧。

2．<input type="">

作用:标签用于收集用户信息。

属性:accept:值(mime_type)规定通过文件上传来提交的文件的类型。

align:值(left,right,top,middle,bottom)不赞成使用。规定图像输入的对齐方式。

alt:值(text)定义图像输入的替代文本。

autocomplete:值(on,off)规定是否使用输入字段的自动完成功能。

autofocus:值(autofocus)规定输入字段在页面加载时是否获得焦点。

checked:值(checked)规定此input元素首次加载时应当被选中。

disabled:值(disabled)当input元素加载时禁用此元素。

form:值(formname)规定输入字段所属的一个或多个表单。

formaction:值(url)覆盖表单的action属性。

height:值(pixels %)定义input字段的高度。

list:值(datalist-id)引用包含输入字段的预定义选项的datalist。

max:值(number,date)规定输入字段的最大值。

maxlength:值(number)规定输入字段中的字符的最大长度。

min:值(number,date)规定输入字段的最小值。

name:值(field_name)定义input元素的名称。

readonly:值(readonly)规定输入字段为只读。

size:值(number_of_char)定义输入字段的宽度。

type:值(button,checkbox,file,hidden,image,password,radio,reset,submit,text)规定input元素的类型。

value:值(value)规定input元素的值。

width:值(pixels,%)定义input字段的宽度。

<input type="">定义一个用户输入区，输入信息。必须放在<form></form>标志对之间。<input type="">标志中共提供了8种类型的输入区域，具体是哪一种类型由type属性来决定。

3．<select>„„</select>

作用:元素可创建单选或多选菜单。

属性:data:值(url)供自动插入数据。

disabled:值(true,false)当该属性为true时，会禁用该菜单。

form:值(true,false)定义select字段所属的一个或多个表单。

multiple:值(true,false)当该属性为true时，规定可一次选定多个项目。

name:值(unique_name)定义下拉列表的唯一标识符。

size:值(number)定义菜单中可见项目的数目。

<select></select>标志对用来创建一个下拉列表框或可以复选的列表框。此标志对用于<form></form>标志对之间。<select>具有multiple、name和size属性。

multiple属性不用赋值，直接加入标志中即可使用，加入了此属性后列表框就成为可多选的了；name是此列表框的名字，它与上边讲的name属性作用是一样的；size属性用来设置列表框的高度，默认时值为1，若没有设置multiple属性，显示的将是一个弹出式的列表框。

3．1．<option>

作用:元素定义下拉列表中的一个选项。

属性:disabled:值(disabled)规定次选项应在首次加载时被禁用。

label:值(text)定义使用<optgroup>时所使用的标注。

selected:值(selected)规定选项表现为选中状态。

value:值(text)定义送往服务器的选项值。

<option>标志用来指定列表框中的一个选项，它放在<select></select>标志对之间。此标志具有selected和value属性：selected用来指定默认的选项；value属性用来给<option>指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用<select>区域的名字的value属性来获得该区域选中的数据项的。

4．<textarea>„„</textarea>

作用:标签定义多行的文本输入控件。

属性:autofocus:值(autofocus)规定在页面加载后文本区域自动获得焦点。

cols:值(number)规定文本区内的可见宽度。

disabled:值(disabled)规定禁用该文本区。

form:值(form_id)规定文本区域所属的一个或多个表单。

maxlength:值(number)规定文本区域的最大字符数。

name:值(name_of_textarea)规定文本区的名称。

placeholder:值(text)规定描述文本区域预期值的简短提示。

readonly:值(readonly)规定文本区为只读。

rows:值(number)规定文本区域的可见行数。

<textarea></textarea>用来创建一个可以输入多行的文本框，此标志对用于<form></form>标志对之间。<textarea>具有name、cols和rows属性。cols和rows属性分别用来设置文本框的列数和行数，这里列与行是以字符数为单位的。

5．<button>

作用:标签定义一个按钮。

属性:disabled:值(disabled)规定应该禁用该按钮。

form:值(form_name)规定按钮属于一个或多个表单。

name:值(button_name)规定按钮的名称。

type:值(button,reset,submit)规定按钮的类型。

value:值(text)规定按钮的初始值。

6．<optgroup>

作用:标签定义选项组。

属性:label:值(text)为选项组规定描述。

disabled:值(disabled)规定禁用该选项组。

7．表单域

{

　　单行文本域：<input type=”text” />

　　密码文本域：<input type=”password” />

　　单选按钮：<input type=”radio” />

　　多选按钮：<input type=”checkbox” />

　　隐藏域：<input type=”hidden” />

　　提交按钮：<input type=”submit” />

　　重置按钮：<input type=”reset” />

　　自定义按钮：<input type=”button” />

　　文件上传：<input type=”file”/>

　　多行文本域：<textarea />

　　下拉列表域：<select />

}

九、其它标签

1.<!– –>

作用:注释标签用于在源文档中插入注释。

属性:没有可选属性。

2.<nav>

作用:标签定义导航链接的部分。

属性:没有可选属性。

3.<audio>

作用:元素能够播放声音文件或者音频流。

属性:autoplay:值(autoplay)如果出现该属性，则音频在就绪后马上播放。

controls:值(controls)如果出现该属性，则向用户显示控件，比如播放按钮。

loop:值(loop)如果出现该属性，则每当音频结束时重新开始播放。

muted:值(muted)规定视频输出应该被静音。

preload:值(preload)如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用”autoplay”,则忽略该属性。

src:值(url)要播放的音频URL。

4.<video>

作用:HTML5规定了一种通过video元素来包含视频的标准方式。

属性:autoplay:值(autoplay)如果出现该属性，则视频在就绪后马上播放。

controls:值(controls)如果出现该属性，则向用户显示控件，比如播放按钮。

height:值(pixels)设置视频播放器的高度。

loop:值(loop)如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload:值(preload)如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用”autoplay”,则忽略该属性。

src:值(url)要播放的视频的url。

width:值(pixels)设置视频播放器的宽度。

5.<source>

作用:标签为媒介元素，定义媒介资源。

属性:media:值(media query)规定媒体资源的类型。

src:值(url)规定媒体文件的URL。

type:值(numeric value)规定媒体资源的MIME类型。

第三章 WEB标准

     WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。我们来简单了解一下这些标准:

1.结构标准语言
(1)XML
    XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0,参考(www.w3.org/TR/2000/REC-XML-20001006)。和HTML一样,XML同样来源于SGML,但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了,网上有很多资料,也有很多书籍可以参考。

(2)XHTML
    XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0(参考http://www.w3.org/TR/xhtml1)。XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还为时过早。因此,我们在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。简单的说,建立XHTML的目的就是实现HTML向XML的过渡。

2. 表现标准语言
    CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2(参考http://www.w3.org/TR/CSS2/)。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。

3.行为标准
(1)DOM
    DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范(http://www.w3.org/DOM/),DOM是一种与浏览器,平台,语言的接口,使得你可以访问页面其他的标准组件。简单理解,DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。

(2) ECMAScript
    ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JAVAScript)。目前推荐遵循的是ECMAScript 262(http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM)。

这些技巧主要讲meta标签设置的,其实与符合web标准关系不大,只要注意在最后加"/"关闭标签就可以,但是既然是入门教程,就写得详细一点吧。
收藏夹小图标
    首先制作一个16x16的icon图标,命名为favicon.ico,放在根目录下。然后将下面的代码嵌入head区:
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
为搜索引擎准备的内容
    代码如下,替换成你自己站点的内容就可以: 允许搜索机器人搜索站内所有链接。如果你想某些页面不被搜索,推荐采用robots.txt方法 :<meta content="all" name="robots" />
设置站点作者信息: <meta name="author" content=" aliyunzixun@xxx.com,阿捷" />
设置站点版权信息 ：<meta name="Copyright" content="www.yzci.com,自由版权,任意转载" />
站点的简要介绍(推荐)
<meta name="description" content="新网页设计师。web标准的教程站点,推动web标准在中国的应用" />
站点的关键词(推荐)
<meta content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie" name="keywords" />

第四章CSS属性大全

一、CSS 属性:字体样式(Font Style)
序号中文说明标记语法
1.字体样式 {font:font-style font-variant font-weight font-size font-family}
2.字体类型 {font-family:"字体1","字体2","字体3",...}
3.字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4.字体风格 {font-style:inherit|italic|normal|oblique}
5.字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
6.字体颜色 {color:数值;}
7.阴影颜色 {text-shadow:16位色值}
8.字体行高 {line-height:数值|inherit|normal;}
9.字间距 {letter-spacing:数值|inherit|normal}
10.单词间距 {word-spacing:数值|inherit|normal}
11.字体变形 {font-variant:inherit|normal|small-cps }
12.英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13.字体变形 {font-size-adjust:inherit|none}
14.字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

二、文本样式(Text Style)
序号中文说明标记语法
1.行间距 {line-height:数值|inherit|normal;}
2.文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}
3.段首空格 {text-indent:数值|inherit}
4.水平对齐 {text-align:left|right|center|justify}
5.垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6.书写方式 {writing-mode:lr-tb|tb-rl}

三、背景样式（background）
序号中文说明标记语法
1.背景颜色 {background-color:数值}
2.背景图片 {background-image: url(URL)|none}
3.背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4.背景固定 {background-attachment:fixed|scroll}
5.背景定位 {background-position:数值|top|bottom|left|right|center}
6.背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}

四、框架样式(Box Style)
序号中文说明标记语法
1.边界留白 {margin:margin-top margin-right margin-bottom margin-left}
2.补白 {padding:padding-top padding-right padding-bottom padding-left}
3.边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}
宽度值: thin|medium|thick|数值
4.边框颜色 {border-color:数值数值数值数值} 数值:分别代表top、right、bottom、left颜色值
5.边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6.边框 {border:border-width border-style color}
上边框 {border-top:border-top-width border-style color}
右边框 {border-right:border-right-width border-style color}
下边框 {border-bottom:border-bottom-width border-style color}
左边框 {border-left:border-left-width border-style color}
7.宽度 {width:长度|百分比| auto}
8.高度 {height:数值|auto}
9.漂浮 {float:left|right|none}
10.清除 {clear:none|left|right|both}

五、分类列表（list）
序号中文说明标记语法
1.控制显示 {display:none|block|inline|list-item}
2.控制空白 {white-space:normal|pre|nowarp}
3.符号列表

{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4.图形列表 {list-style-image:URL}
5.位置列表 {list-style-position:inside|outside}
6.目录列表 {list-style:目录样式类型|目录样式位置|url}
7.鼠标形状

{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

第五章网页理论

一、浏览器访问网页原理

1.当我们利用浏览器访问网页时，有真是的物理文件传输。浏览器先将网页上的内容存储到本地文件夹中，再渲染出来呈现用户查看。

2.第二次访问网页较快。

3.缓存文件夹中除了图片之外，还缓存了.js,.css.html等文件。即网页越复杂，组成网页的文件就越多。

二、浏览器请求数据的过程

浏览器发送网址（请求报文）给服务器--》服务器处理完毕返回一个（响应报文）给浏览器。然后由浏览器进行解析后呈现给用户。

请求报文=请求行+请求头+空行+请求体 requet

响应报文=响应行+响应头+响应体 response

三、什么是URL

我们在地址栏输入的地址就是一个URL。

URL格式：

http://127.0.0.1/index.html(浏览器会自动添加：80)

http://127.0.0.1:80/index.html（完整的格式）

URL拆分：

http:// 127.0.0.1 :80 URL（http://）协议类型；（127.0.0.1）服务器IP地址；（：80）相当于生活中的地址，服务器的端口号，生活的门牌号码

index.html 需要访问的资源名称

服务器ip地址和端口号的作用是告诉浏览器我们需要访问的那台服务器的详细地址是什么。

index.html作用：当我们通过IP地址和端口号找到对应的服务器之后，需要通过资源名称告诉服务器，我们需要获取服务器上的哪个资源

四、网络协议http

http协议是 HyperText Transfer Protocol超文本传输协议

什么是协议？

现实生活中有很多协议：像买卖，租房，共同点就是约束某一类事物。

http协议就是用来规范哪类事物呢？

假设两个不同国家的人沟通并且不会说彼此的语言，解决办法找翻译。就是规范浏览器和服务器之间规定，两者都遵循这个规定

五、HTML作用

用来描述文本的语义的。这些用于描述其他文本语义的文本，我们称之为标签。并且这些描述其他文本语义‘，的标签是不会被显示出来的。我们称这些文本为”超文本“，而这些文本又叫做标签，所以HTML被称之为”超文本标记语言“

注意事项：虽然我们利用<h1>描述一段文本后，这段文本在浏览器中显示出来会被放大和加粗，看上去我们是利用HTML的标签修改了被描述的那段文本的样式，但HTML的作用只有一个，它专门用来给文本添加语义的（添加了让他变成标题的语义（自动扩大加粗）），而不是用来修改文本的样式的。

六、HTML 执行原理

1.输入网址的信息到浏览器

2.浏览器提交网址信息到服务器：以请求报文的形式传递数据信息

3.服务器查找信息

4.把查找的信息以HTML文件提交给浏览器

5.览器解析收到的标签信息，并依据标签信息做相应的动作（请求IMG资源等）显示信息到客户端浏览器

当页面发生变化是需要重新渲染(reflow) 或者重绘(rePaint) 操作，一般情况下,重绘比重新渲染节约时间。reflow问题是可以优化的：比如载入一个图片时，可以设置宽度和高度，这样浏览器就知道预留空间，从而节约速度。只要不改变布局，就会引起重绘操作，相对应，改变页面的布局就会产生重新渲染的操作。

HTML基础教程

六、HTML 执行原理

推荐阅读