HTML 总结.docx

1、HTML 总结第1章（HTML的基本标签）1HTML文件的基本结构完整的HTML文件至少包括标签、标签、标签、和标签，并且这些标签都是成对出现的。开头标签为，结束标签为，在这两个标签之间添加内容。通过这些标签中的相关属性可以设置页面的背景颜色、背景图像。2HTML文档部分HTML文档部分由3部分组成： /HTML部分 /头部部分 /主体部分标签不区分大小写。3标签标签出现在网页的标题部分。是一个特殊的HTML标签，提供有关的网页信息。 charset属性 用于设置网页的编码语系。如果网页出现了乱码可能是charset属性没有设置正确的编码语系。简体中文网页使用charset= gb2312，繁

2、体中文使用charset=big5，纯英文网页使用iso-8859-1，或者不设编码也可。4页面背景色或背景图像bgcolor属性可以改变网页的背景色。background属性可以把网页的背景设为图片。语法 hello! 经验：为了使页面美观大方，网页背景要尽量的浅 5文本相关标签a)字体、字号相关标签i.标题标签HTML提供了六级标签，为最大，为最小。例：一级标题二级标题三级标题四级标题ii.标签标签用于控制网页上文本的显示外观。文本大小、字体类型和颜色等属性都可以使用标签指定。例：size 属性用来设置字体的大小，可以为字体指定的大小范围为17。最大为7最小为1。默认字体大小为3，如果si

3、ze=+4将使大小增加到7，size=-1将使大小减到2。color属性用于指定字体的颜色，可以指定颜色名称或十六进制值。face属性用于指定字体的类型。iii.特殊符号用于显示特殊字符的字符实体特殊字符转 义 码示 例空格 移动 |  100| 联通大于（）>If A > B Then A = A +1小于（）<If A < B Then A = A +1引号（”）""淘宝网"版权号（）©Copyright © 2007转义码各字符间不能有空格；转义码必须以“；”结束；单独的&不

4、能被认为是转义开始。6行的控制相关标签a)段落标签段落标签用于标记段落的开始。 一般省略段落结束标记还可以设置段落的align属性，设置段落的对齐方式，如左对齐、居中、右对齐b)换行标签只要在文本中放入标签，就会强制换行。7图像标签a)图像的基本语法标签用于在HTML文档中插入图像，该标签可以放在要显示图像的位置。标签不含任何内容，它使用src属性指定图像源文件所在的路径。语法：其中，src参数用来设置图像文件所在的位置，width和height属性用来指定图像的宽度和高度，alt属性有两个作用：1在网页中，如果图像没有被下载，在图像位置上出现提示文字；2如果图像下载完，将鼠标放在该图像上，在

5、鼠标旁边出现的提示文字。b)图像与文本的对齐align属性用于调整图像对于周围文本的对齐方式align可取的值：top、bottom、middle、left或right。c)文字布局可以使用标签对文本内容进行分割，使用列表对文本内容进行整齐排列。使用标签让指定的文本内容以指定的格式在网页中显示。d)使用标签（水平线）标签用于在页面上绘制水平线。只有开始标签，没有结束标签。语法：size用来指定水平线的高度，以像素为单位；color可用来设置水平线的颜色。width用于改变水平线的宽度，可以以像素为单位，也可以是窗口的百分比。e)使用列表不同类型的列表：无序列表1.无序列表就是“项目列表”，列表

6、项前面带有项目符号，包含无序列表标签内。列表中每项都用列表标签,其中LI表示列表项，结束标签为可选项。语法： 如何激活会员号？ 如何注册淘宝会员？ .type属性决定了列表开始的符号，它可以去disc（默认值，表示实心圆点）、circle（空心圆环）、square（空心正方形）这3个值。ii.有序列表1.有序列表包含.标签内。也显示列表项。区别在于有序列表的列表项以自动生成的顺序显示。语法 填写信息 收电子邮件 .type属性决定有序列表的序号类型，它可以取如下5个值：1、a、A、i、I。分别表示数字序列、小写英文字母序列、大写英文字母序列、小写罗马数字序列、大写罗马数字序列。8使用预格式文本

7、标签标签用于显示预先在HTML代码中已定义好格式的文本。当文本显示在浏览器中时，会遵循已在HTML源文档中定义的格式。9页面链接标签标签用于超链接。语法：免费注册href属性用来指定要链接的地址。“免费注册”是热点文本。 绝对路径名：指定从根目录到文件的完整路径。 相对路径名：指定相对于当前文件的文件位置。10链接到本页面作用是 未来了方便用户阅读过长的页面内容，可以使用锚点链接。 主题名称 标签的 name属性用于创建锚记。 主题名称 超链接名称前面的符号“#”告诉浏览器当前链接是文档中的一个锚记点。11电子邮件链接用户可以从网页发送电子邮件。要做到这一点，可在链接标签中插入“mailto：

8、邮箱地址”例：站长信箱12滚动标签此标签不仅可以移动文字，还可以移动图片。语法 滚动文字或图像 scrolldelay:表示滚动延迟时间，默认值为 90 ms。direction ：表示滚动的方向。默认为从右向左。可以取：up、down、left、right。当图片含有超链接时：图片外面会有边框，设置图片的border属性为0，可以使边框消失。 设置align属性为 middle可以使图片居中。13如果想让鼠标所指的位置出现 类似超链接的小手，则设置style属性。设置cursor为hand。例：style=cursor:hand;”第2章（表格基础）1在HTML语言中 ，表格至少由 、这3个

9、标签组成。a)用于创建表格。b)用于创建表格行。c)用于创建每一行又有若干个表格单元格。border属性用于指定边框的厚度，如果其值设置为零（0），则不显示边框。2如何创建表格语法： 单元格内容3跨多行多列的表格 colspan属性用于创建跨多列的单元格。rowspan属性用于创建跨多行的单元格。a)跨多列的表格语法： 单元格内容 b)跨多行的表格语法： 单元格内容 c)跨多行多列的表格将上面两个结合运用。经验：一般情况下在设置表格行和列的时候，为了保证在表格里不出现空白区域，可以将跨多列或跨多行的单元格看成多个单元格，而单元格的个数就是所跨的列数或行数，只要保证各行的单元格列数相同，就不会出

10、现空白区域。4表格的美化a)表格的高度、宽度和边框。b)表格、行、列的背景。c)表格、行、列的对齐方式。d)表格的填充、间距属性。1）设置表格的尺寸和边框如果不指定表格的宽度和高度，浏览器就会根据表格内容的多少自动调整高度和宽度。如果不指定表格的边框宽度（border属性），则浏览器将不显示表格的边框。语法 .表格的宽度和高度可以用像素来表示。也可以用百分比来表示。2）设置表格的背景a)表格背景语法：.b)行背景色语法c)单元格背景色语法：单元格内容d)e)3）设置对齐方式属性align属性为right（右对齐）、center（居中）或left（左对齐），默认为“左对齐”例：单元格内容4）设置

11、填充、间距属性文字与边框距离设置属性cellpadding 表格与表格（表格内框）距离设置属性cellspacing例：.第3章（表单和框架）1表单包含的控件 通常放在标签对之间一起使用。标签属于一个容器标签，表示其他标签需要在它的包围中才有些效。元素的属性属 性说 明action此属性指示服务器上处理表单输出的程序。一般来说，当用户单击表单上的“提交”按钮后，信息发送到web服务器上，有由action属性所指定的程序处理。语法为：action=”URL”method此属性告诉浏览器如何将数据发送给服务器，它指定向服务器发送数据的方法（用post方法还是get方法）。如果值为get，浏览器创建

12、一个请求，该请求包含页面URL、一个问号和表单的值。浏览器会将该请求返回给URL中指定的脚本，以进行处理。如果将值指定为post，表单上的数据会作为一个数据块发送到脚本，而不使用请求字符串。语法为：method=（get|post）一般情况下把method的属性设置为post比较安全。使用get提交表单信息不安全。2表单元素的统一格式表单元素的统一格式：元素的属性属 性说 明type此属性指定表单元素的类型。可用的选项有：text、password、checkbox、radio、submit、reset、file、hidden（隐藏）、image和button。默认选项为textname此属性

13、指定表单元素的名称。例如，如果表单上有几个文本框，可以按名称来标识它们，如text1、text2等。名称属性的作用域为Form元素内value此属性是可选属性，它指定表单元素的初始值。但如果type为radio，则必须指定一个值size此属性指定表单元素的初始宽度。如果type为text或password，则表单元素的大小以字符为单位。对于其他输入类型，宽度以像素为单位maxlength此属性用于指定可在text或password元素中输入的最大字符数。默认值为无限大。checked此属性是boolean属性，指定按钮是否是被选中的。当输入类型为radio或checkbox时，使用此属性3列表

14、框是通过和标签来实现的。标签用于显示可供用户选择的下拉列表。每个选项由一个标签标识。标签必须包含至少一个标签。语法：.size确定列表中可同时看到的行数；selected表示该选项在默认情况下是被选中的。4按钮在HTML中按钮分为3种：分别是普通按钮（button）、提交按钮（submit）、重置按钮（reset）。普通按钮主要用来响应onClick事件，提交按钮用来提交表单信息。重置按钮用来清除表单中已填信息。语法：若type=”buttom”表示是普通按钮；若type=”submit”表示是提交按钮；若type=”reset”表示是重置按钮。name是用来给按钮起名字。value用来设置显

15、示在按钮上的文字。5多行文本框 文本内容cols用来指定多行文本框的列数，rows用来指定多行文本框的行数。此标签不能使用value属性来赋值。6框架一个框架结构是由两部分组成的：1）框架（Frame）：是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分中所显示内容无关的网页文件。2）框架集（Frameset）：是一个网页文件，它将一个窗口通过横向或纵向的方式分割成多个框架，每个框架中要显示的都是不同的网页文件。不同的网页文件可以通过超链接联系起来。7框架的基本结构框架集（Frameset）页面的结构是通过属性rows和cols来设置的。语法： .FrameSet是一个框架的集合。 Fr

16、ame标签可以提供对单独HTML文档URL引用，每个html文档占据一个框架。cols将页面沿垂直方向分割为几个窗口。rows将页面沿水平方向分割为几个窗口。src指定框架窗口的源文件。对其中一个页面再次分割时需要使用标签代替标签。例： 如果一个页面有标签存在，就不能有标签存在。8设置窗口连接的显示位置a)使用标签中的name属性和标签的target属性target目标窗口分为两类：一类是框架页面之间的链接；另一类是4个特殊窗口的超链接。1）框架页面之间的链接需要两步：1设计好框架集页面，并为每个框架窗口定义名称。如2设置导航栏中的超链接的target目标窗口属性，使其值为框架窗口的名字。如：

17、target属性主要用于超链接标签中使用2）4个特殊的窗口语法：target目标窗口的打开方式 属 性 值 说 明_blank新启一个窗口打开链接_self在同一个窗口中打开，默认取值（指没有设置target属性值时的情况）_paremt在上一级窗口中打开（框架页面中使用较多）_top在整个浏览器窗口中打开第4章（CSS样式表）1CSS样式表主要是基于以下几点原因：1）HTML标签的外观样式比较单一。2）样式表的作用相当于华丽的衣服。2样式表的基本结构为：Pcolor:red;font-size:30px;font-family:隶书;.文档样式表一般位于HTML文件的头部，即和标签之间，定义

18、的样式规则就可应用到当前页面中。3样式表按类型可以分为：标签样式、类样式、ID样式。定义标签样式时 必须写标签名放在中，在文本中直接调用。定义类样式时 必须在类名前加“.”名字可以随便命名。 在文本中需要在标签中加“class=类名”。语法内容4常用的样式属性具体的属性在此不再详细例举可以用Dreamweaver网页制作工具进行查看。 在设置背景图片是 文件地址要写在url后面的“()”中 设置样式background-image:url(images/type_back.jpg);CSS控制超链接样式超链接样式说 明A:linkcolor:red未被访问的链接样式，红色A:visitedco

19、lor:green已被访问过的链接样式，绿色A:hovercolor:yellow鼠标悬浮在链接上时的样式，黄色A:activecolor:blue鼠标正在按下时链接文字的样式，蓝色5制作图片按钮例： .picButton background-image:url(images/back.jpg); margin:0px; border:0px; padding:0px; height:23px; width:82px; font-size:14px;6样式表的3个应用方式内嵌样式表只对某张网页起作用；如果希望某张网页中部分内容“与众不同”，那么就得采用行内样式；如果让网站中所有的网页都拥有一

20、致性的风格，那就必须使用外部样式表文件。外部样式表文件是一个以 .CSS为后缀的CSS文件，这个样式文件可以被多个网页引用，从而保证多个网页具有统一风格。7外部样式表文件根据样式 文件与网页的关联方式，又分为两种：链接外部样式表 和 导入样式表1）链接外部样式表链接外部样式表是指通过HTML的LINK（链接）标签，把样式文件和网页建立关联，这是早期浏览器的用法， 格式如下： 其中，rel=”stylesheet”表示在网页中使用这个外部样式表，type=”text/css”表示文本类型的样式，href=newstyle.css”指定样式文件。2）导入样式表使用import方法导入样式表。 im

21、port 样式表文件.css; 经验：如果有多个样式规则作用域同一个页面时，样式规则起作用的优先级是：行内样式表（写在标签内的）内嵌样式表（写在文档头部的）外部样式表（在外部文件中）。第5章（使用DreamWeaver制作网页）1创建锚记1）在“文档”窗口的“设计”视图中，将插入点放在需要命名锚记的地方。2）执行下列操作之一：选择菜单“插入”“命名锚记”命令。按下Ctrl +Alt + A组合键。在插入栏的“常用”类别中， 单击“命名锚记”按钮。3）为锚记命名。链接到命名锚记，4）在“文档”窗口的“设计”视图中，选择要从其创建链接的文本或图像。5）在“属性”检查器的“链接”文本框中，输入一个数字符号（#）和锚记名称。 注：在“链接”文本框中输入的名称必须与锚记的名称完全一致。2换行，换段a)将插入点放置在文本块的任一位置。b)然后“属性”检查器中的“格式”下拉列表框中选择“段落”选项。或者 选择“文本” “段落格式” “段落”命令。c)将插入点放置在该文本块的需要换行的位置d)然后按下Shif