hr标签的常用属性，分别是：

width属性——设置水平线的长度（属性值可以是像素值，也可以是窗口的百分比）； 

size属性——设置水平线的宽度（属性值只能为像素，直接写数值，不用加单位）；

color属性——设置水平线的颜色；

align属性——设置水平线的对齐方式；

noshade属性——取消水平线的阴影（此属性没有值，只要在hr标签中添加此属性，则水平线就可以取消阴影了）；

8、 插入特殊符号

一般情况下，特殊符号由“前缀&和字母名称和后缀;”组成，想在哪里插入特殊符号，就在那个位置输入特殊符号的代码就可以了。

（1）      插入空格标记——   （注意要加分号）

    要输入多个空格，可以添加多个“ ”。

（2）      其他常用特殊符号及其代码见下表：

特殊符号

符号代码

&

&

< 

<（lessthan的缩写）

> 

>（greaterthan的缩写）

×

×

版权标记©

©  （copyright的缩写）

注册商标®

®  （register的缩写）

商标符号TM

™

（商标符号TM是trademark的缩写，只代表上标符号，不一定注册）

 网页中的图片

（1）       支持的图片格式：

gif、jpeg、png。

（其中png有些浏览器不支持，所以常用前两种）

gif格式的简介：

使用256种颜色，常用于显示色调不连续或具有大面积单一颜色的图像，如：

网页的导航条、按钮、图标等。

    优点：

①可以制作动态图像

          ②以交错的方式将图像呈现出来:

交错显示，即图像还没有下载完成时，浏览器先以马赛克的形式将图像显示出来，使浏览者能够看到图像的大致轮廓。

png格式：

属于无损压缩，具有gif的大部分优点，能够交错显示，支持透明图。

（2）       在网页中插入图像，使用img标签，只有开始标签，没有结束标签

Img标签的常用属性

   ①src属性——设置图像的位置

      Img标签通过src属性来制定图像的位置，格式为：

  【注】：

图像的地址可以用相对路径，还可以用网址作为绝对路径。

  ②alt属性——设置图像提示文字

   作用一：

描述和说明图像，当网页中的图像下载完成，鼠标放在图像上时，我们就可以看到alt属性中的提示文字。

   作用二：

若图像没有被下载成功，在显示图像的位置上就会出现提示文字。

  ③height和width属性——设置图像的高度和宽度、

   属性值都是像素值，直接输入整数即可。

   【注】：

在制作网页时，建议需要多大的图片就设计多大的图片，尽量不要调整其高度和宽度，以免显示失真。

  ④border属性——设置图像边框的宽度

    属性值是像素值，只能够改变图像边框的宽度，但是不能改变其颜色，默认的颜色是黑色。

  ⑤vspace属性——设置图像的垂直边距

    图像的垂直边距：

图片上方和下方距离文字或其他元素的距离。

    【注】：

常用于图像和文字混合排版的网页。

例如：

一个网页中包含有一段文字和一张图片，若图片包围在文字中，默认的图片被紧紧的包围，通过vspace属性就可以设置图像的上方和下方与文字的距离。

Vspace的属性值也是像素。

⑥hspace属性——设置图像的水平属性

 图像的水平属性：

图像在水平方向上距离文字或其他元素的距离。

⑦align属性——设置图像和文字的对齐方式 

  Align属性常用的属性值有以下几个：

  bottom:

表示图像的底部和当前行的文字底部对齐；

  top:

表示图像的顶端和当前行文字的顶端对齐；

  middle：

表示图片水平中线和当前行文字的中线对齐；

  left:

表示图片左对齐，文字在图片右侧排列；

  right：

表示图片右对齐，文字在图片左侧排列。

【注】：

当图像设置了垂直边距时，浏览器就认为图片的真正高度是“图像的高度加上所设置的垂直边距”，所以在浏览图片时，如果同时设置了这两个属性，会看起来像没有对齐一样。

⑧给图片添加超链接——图片标签没有添加超链接的功能，只能用超链接标签，使用嵌套便签的方式，把图像标签嵌套在超链接标签中，即在图像标签的前端和后端分别添加一对.

 如：

列表的作用

（1）     常用的列表种类：

有序列表、无序列表和定义列表。

①无序列表：

这种列表没有顺序，只是以符号作为分项标识。

      分项符号有三种：

实心圆点符号、空心圆环符号、实心正方形符号。

②有序列表：

在列表中将每个列表项按数字或字母的顺序序号排列，一般用于需要按顺序排列的内容。

如展示教程的列表。

    项目符号有5种：

数字、小写字母、大写字母、小写罗马字母、大写罗马字母。

③定义列表：

由定义条件和定义描述两部分构成。

     这种列表一般用于在网页中显示需要解释的名词。

（不常用）

  ④菜单列表：

显示效果和无序列表相同。

（2）           有序列表

【注】：

列表标签与其他标签的不同：

列表标签需要嵌套使用。

①  

li标签内部的文字就是列表项文字，一个列表有多少个列表项，就在父标签ol中添加多少个子标签li。

如：

我们用有序标签列出早上四节课的内容

星期一早上的四节课

1. 数学课
2. 英语课
3. 语文课
4. 体育课

②有序列表标签的两个常用属性

type属性：

共有5个属性值：

数字、小写字母、大写字母、小写罗马字母、大写罗马字母。

         默认的属性值是数字。

Start属性：

起始数值属性，可以设置列表的起始值。

（3）           无序列表

和有序列表很相似，只是父标签为

只有一个type属性，默认值是实心圆点。

 目录列表——父标签是

 菜单列表——父标签是

【注】：

目录列表和菜单列表不仅显示效果与无序列表相同，并且功能也相同，所以都可以用无序列表来实现，所以这两个列表了解即可。

（4）           定义列表——用来在网页中显示专有名词。

由三部分组成，以实例来讲解：

这是一个定义列表

爱淘课

一个专门开发电脑视频教程的团队

【注】：

最外边的是dl标签是父标签，表示这是一个定义列表；dt标签中的内容就是专有名词，dd标签中的内容就是对专有名词的解释。

表格的使用

1、  表格的作用

表格的基本构成有三个标签：

table标签、tr行标签、td单元格标签。

  表格有几行，就需要在

【注】：

表格一般是用来布局网页的，所以默认的表格不显示边框的，可以通过table标签的border属性来定义表格边框的宽度。

（1）       caption标签——表格的标题标签，格式为

     表格的标题一般位于表格的第一行，一个表格只能含有一个标题。

使用方法：

在table标签的开始标签

 表头：

在我们工作的时候，会遇到类似工资单和成绩单这样的表格，都希望第一行的文字（如姓名）会突出显示，我们把第一行的文字称为表头。

     表头标签用

（2）       表格的几个常用属性（针对table标签）

①     width属性——设置表格的宽度；

②     height属性——设置表格的高度；

③       align属性——设置表格的对齐方式（即表格在页面中的对齐方式，而不是文字在单元                                    格中的对齐方式）

④       bordercolor属性——设置表格的边框颜色，属性值为16进制的颜色值；

⑤       cellspacing属性——设置单元格之间的边距，属性值为像素；

⑥       cellpadding属性——设置单元格内容与单元格边框的距离，不要设置太大，以免表格走     形；

⑦       bgcolor属性——设置表格的背景色；

⑧       background属性——设置表格的背景图片，属性值为图片的路径。

（3）       表格的行属性（针对tr标签）

①     align属性——设置文字的水平对齐方式；

②     valign属性——设置文字的垂直对齐方式；

③     height属性——设置行高度；

④     bordercolor属性——设置行边框的颜色；

⑤     行标签的bgcolor属性和background属性和表格标签的类似，但是行标签的这两种属性会覆盖已经设置好的表格标签的属性。

即距离目标元素最近的标签属性起作用。

2、单元格的属性

（1）宽度和高度属性与表格相同，都是width喝height；

  【注】：

默认的情况下，若不设置单元格的高度和宽度，单元格就会根据内容自动调整；

         如果某一行内的一个单元格设置了高度，那么这一行的其他单元格也会随着这个设置的高度而变化。

（2）colspan属性——单元格标签的水平跨度属性

   在我们设计表格的时候，有时候需要让一个单元格横跨2个单元格的宽度，这时候如果只调节此单元格的width属性，那么与这个单元格同列的其他单元格也会随之调整，永远使这个单元格只占有一个单元格跨度。

 所以就需要设置colspan属性，属性值是整数，就是单元格要水平横跨的列数。

（3）rowspan属性——垂直跨度属性

    与colspan作用类似，只不过此属性是控制单元格在垂直方向上的跨度。

【注】：

使用垂直跨度属性时，需要注意此行是否是表格的最后一行，如果是最后一行，那么垂直跨度属性是不起作用的，因为垂直跨度属性计算跨度是从这一行开始。

（4）水平对齐方式和垂直对齐方式属性align和valign

      使用方法和行标签相同。

（5）背景颜色属性bgcolor，背景图案属性bacgground

       用法与行标签的相同。

（6）边框颜色属性bordercolor

  【注】：

tr行标签的边框颜色属性是设置这一行内所有单元格的颜色，有时候需要单独设置某一个单元格的颜色，就需要使用td单元格标签的背景颜色属性。

（7）boedercolorlight属性——亮边框属性

　　可以把单元格设置成有点突出的感觉。

（8）bordercolorblack属性——暗边框属性

可以把单元格设置成有点凹陷的感觉

超链接的使用

（1）超链接从使用形式上分为：

外部超链接、内部超链接、下载链接、电子邮件链接、锚点链接等。

（2）外部超链接

　　即连接到其他网站，而不是网站内部的某个页面。

一般用于网站的友情链接页面。

　　格式为：

XX一下

（3）内部超链接

　　如：

 返回主页面  

　　【注】：

与外部超链接不同，这里的地址是相对地址。

（4）超链接标签的target属性——控制目标窗口的打开方式

　　有四个属性值，我们暂时记住常用的两个，即-self和-blank.

　　-self:

在当前页面中打开超链接，是默认的属性值；

　　-blank：

在新页面中打开超链接。

（5）锚点链接——可以使页面跳到指定位置；

　　①在当前页面建立锚点，在当前页面创建锚点连接

比如：

我们要在一个介绍书本的网页中方便使浏览者可以方便跳到书本的第二章。

使用方法：

步骤一：

设置name属性，建立锚点

在指定位置（本例中就是网页中介绍书本第二章的起始位置）输入一对超链接标签,并设置一个name属性，如：

.

Name属性——属性值就是锚点的名称，名称可以是数字或英文，或两者混合，英文最好区分大小写。

同一个网页中可以有多个锚点，但锚点的名字不能相同。

步骤二：

建立锚点链接

在网页的开始部分输入一对超链接标签：

跳转至第二章

【注】：

锚点链接与其他链接稍有不同，href的属性值为：

#加上锚点名称。

②在其他页面建立锚点，在当前页面创建锚点连接

  步骤相同，不同的是在建立锚点链接时，需要把href的属性值改为：

网页名称加#加锚点名称。

如：

跳转至第二章

　　（6）用超链接下载文件

　　在网页的同级目录中，放入需要下载的文件，如一张图片，1.jpg；

　　在网页中添加超链接标签：

下载图片 ；

　　【注】：

href后边的属性值可以是相对路径，也可以是绝对路径。

　　浏览网页，点击下载图片，即可下载。

  设置滚动效果

（1）设置滚动文字的标签——marquee标签

         如：

这是一段滚动的文字

     【注】：

marquee标签不仅能够移动文字，还可以移动图片、表格等。

      如移动和网页在同级目录下的图片1.jpg 的代码为：

①marquee标签的direction属性——控制滚动方向的属性

有四个值：

up:

向上滚动；down：

向下滚动；left：

向左滚动；right:

向右滚动。

②behavior属性——设置滚动方式的属性

有三个属性值：

scroll——循环滚动，是默认的属性值；

              slide——只滚动一次就停止；

              alternate——来回交替滚动；

③设置滚动速度

 scrollamount属性和scrolldelay属性都可以控制滚动速度；   

  scrollamount属性——通过设置每次滚动时移动的长度来控制移动的速度，属性值为的单位是像素，如scrollamount=“3”；

  scrolldelay属性——属性延迟属性，设置滚动的时间间隔，属性值的单位是毫秒，

                      如scrolldelay=“200”，若设置的数值比较大，会产生走走停停的效果。

④loop属性——设置滚动次数

默认情况下，滚动会不断的循环下次，如果希望滚动几次后停止，可以通过loop属性控制滚动次数，如：

loop=”5”;

⑤滚动范围属性

默认情况下，水平滚动的文字背景与文字通告、与浏览器窗口同宽。

如果想控制滚动范围，就需要设置wi

• 登录
• 首页
• 资源分类
• 升级会员
• 通知公告
• 帮助中心