Html笔记.docx - 冰豆网

资源描述

Html笔记.docx

《Html笔记.docx》由会员分享，可在线阅读，更多相关《Html笔记.docx（28页珍藏版）》请在冰豆网上搜索。

Html笔记.docx

Html笔记

网页主体标记body

常用属性：

1、背景色：

bgcolor=“颜色值”例如：

2、背景：

background设置网页的背景图片

3、文字颜色：

text=“颜色值“

4、Link属性：

设置链接的颜色例如

5、Vlink属性：

设置访问过后的链接的颜色

6、Alink：

7、边距属性：

topmargin，leftmargin

相对路径和绝对路径

1、绝对路径：

例如：

D：

\test.txt

2、相对路径：

标题字

设置文字格式的标签

标题字标签：

1、字体大小:

h1~h6字体逐渐减小

2、字体分布（布局）：

align值为left（默认值）、right、center

3、Center标签：

使标签内的文字居中；效果与

一样

4、Right标签：

使标签内的文字靠右；效果与

一样

5、left标签：

使标签内的文字靠左；效果与

一样

设置网页的默认文字大小的标签

其中：

n的值为1~7

文本基本标记

1、font：

设置文本样式；用来控制字体，颜色等

1）、face属性：

face设置字体样式例如：

face=“黑体”，其默认是宋体

2）、size：

字体大小，整数1~7代表绝对字号，-4~+4是相对于3号字体的相对大小

3）、color：

字体颜色

2、换行标记：

文本格式化标记

1、粗体标记：

2、斜体标记：

3、上标标记：

4、下标标记：

5、big标签：

6、small标签：

7、strong标签：

加粗标签，与一样

8、em标签：

倾斜标签，与一样

9、strike标签：

删除线标签，

10、u标签：

下划线标签

11、del标签：

删除标签

12、ins标签：

插入标签，效果与u标签一样

13、tt标签：

设置字体等宽标签

14、在之间，用以设定默认打开窗口

常用的段落标记

1、p：

段落标签，,

属性：

1）、align属性：

对齐方式,值为：

left、right、center、justify（两端对齐）

2）、dir属性：

设置段落的文字方向，值为：

LTR:

从左至右，RTL：

从右至左

从右至左时，标点符号还是在最左边；

3）、lang属性：

为不同的段落设置不同的段落语言，有利于搜索引擎的搜索；

例如：

；

语言代码的值有：

中文：

zh中文（中国）：

zh-cn等

4）、title属性：

设置标题属性，当一个段落的内容很长时，才会为段落设置标题，以方便读者浏览时知道该段的主题是什么。

当设置标题后，鼠标停留在该段的文字上时，会在鼠标附近显示一个小小的黄色注释框，注释框的内容就是标题的内容；设置标题的语法为：

段落内容

2、
:

换行标签

3、：

换行并清除格式，格式有：

left、right、cneter、all、none

3、:

禁止换行，浏览器默认是自动换行。

4、软换行wbr：

只是在nobr区域里的一个点，而且这个“换行”不是一定需要换行，只是在浏览器窗口显示不下文字时才在软换行标签处进行换行；语法为：

注意：

因为nobr和wbr不是HTML4.01中的标准元素，internetexplorer能支持，有的浏览器不一定支持；

水平线标记

1、语法：

2、高度属性：

size=“3”只能设置像素

3、宽度：

width=“30%”

4、颜色：

color=“#foadjo”

5、去掉水平线的阴影:

noshade，默认是显示阴影；

6、对齐属性：

align=””值为：

right、left、cneter

预定义格式

如果想要在浏览器中显示源代码中所设置的格式，可以用pre元素，pre元素相当于设置了一个“块”，这个块可以将源代码中的所有文本（除了HTML标签）在浏览器中按原样显示出来；

语法格式：

内容

其中：

lang和title属性与段落中的功能一样；width是设置pre块的宽度，但不提倡，因为不是所有的浏览器都支持；

块引用

块引用通常是用来突出一段引用别处的文字，比如引用书中的一段文字。

在浏览器中通常是以缩进的方式来显示，有少数的浏览器是以斜体来显示该段文字；

语法格式：

引用文字

其中：

cite是引用地址，可以是URL，也可以是纯文字。

Lang、dir、title属性均与P元素的相同；

还有其他的引用元素：

特殊效果

设置文字闪烁

使用blink可以使网页中的文字闪烁，但它不是HTML4.01中的标准元素，所以不是所有的浏览器都支持这种效果，其中IE就不支持；

语法格式：

设置滚动效果

marquee标签

语法格式：

1、利用一对marquee标签实现滚动效果，其中滚动内容包括文字、图片、表格等

2、direction：

利用该属性，可以设置滚动的方向，值为：

up、down、left、right。

3、behavior：

设置滚动方式：

值为：

scroll（默认值）：

表示循环滚动、slide：

只滚动一次就停止、alternate：

表示来回交替进行滚动

4、scrollamount：

设置滚动速度。

其实是设置每次滚动时移动的长度，以像素为单位。

5、scrolldelay：

滚动延迟，设置滚动时的时间间隔、单位是毫秒。

6、loop：

设置滚动次数，默认情况下是不断的循环下去。

如果希望滚动n次就停下，则loop属性值就为n。

7、滚动范围：

通过设置width和height属性完成。

如果不设置滚动的面积，默认情况下，水平滚动的文字背景与文字同高、与浏览器同宽。

如果想设置滚动范围，就需要设置width和height属性。

单位为像素。

8、hspace：

设置滚动区域与其他内容的水平空白区域的像素个数

9、vspace：

设置滚动区域与其他内容的垂直空白区域的像素个数

其他特殊效果

Acronym：

缩写元素

Abbr：

缩写元素

Def：

定义元素

第三章HTML中的超链接

1、创建超链接

外部超链接

1、定义：

设置超链接的链接地址是其他网站，而不是网站内部的页面，一般多数用在网站的友情链接部分

内部超链接

1、定义：

链接地址是在同一个网站内的页面，链接对象是在同一个网站中的资源

target属性：

用来控制目标窗口的打开方式，target有四个属性值，先学两个：

1、-self：

表示在当前的页面打开链接，这是默认值

2、-blank：

表示在全新的空白窗口中打开链接

超链接元素语法

超链接文字

其中：

name：

用于设置超链接的锚名称；

Href：

用于设置超链接的链接地址，很多协议：

例如：

http:

//、ftp:

//等

Title：

用于设置超链接的标题内容；

Target：

用于设置打开超链接的目标地址，

属性值有两种：

第一种是内置属性值：

“_blank”：

代表在新窗口中打开超链接

“_self”：

代表在当前窗口打开超链接，这是默认值

“_parent”：

与页面框架有关，代表在父窗口中打开超链接

“_top”：

与页面框架有关，代表在顶级窗口中打开超链接

第二种属性值是命名值，可以直接指定浏览器的窗口名，在该窗口打开超链接

创建本页锚链接

第一步：

在要跳转到的区域设置文字

第二部：

创建一个跳转到锚点名称的超链接链接文字

创建链接到其他网页的锚链接

第一步：

在目标网页上设置锚点名称：

文字

第二部：

在当前网页上设置好超链接：

链接文字

超链接的其他属性及应用

1、Tabindex属性：

设置超链接的Tab顺序，使用tab键来激活超级链接，以及一些可以与客户交互信息的客户端组件。

语法格式：

超链接文字

例如：

tab次序为2

tab次序为1

tab次序为3

2、accesskey属性：

设置超链接的快捷键，使用键盘上的快捷键来激活超级链接。

语法格式：

超链接文字

例如：

例一（请按alt+2）

例二（请按alt+1）

例三（请按alt+3）

3、charset属性：

设置超链接指定的目标网页的字符编码。

语法格式：

超链接文字

例如：

例一

4、hreflang属性：

设置超链接指定的目标网页的字符编码。

语法格式：

超链接文字

例如：

例一

5、type属性：

指定链接目标的文件类型

语法格式：

超链接文字

例如：

例一

6、rel属性和rev属性：

表示当前网页和目标网页的关系；rel属性表示从当前网页到目标网页的关系，而rev表示从目标网页到当前网页的关系；两个属性的属性值可以为：

alternate（备选）、stylesheet（样式表）、start（开始）、next（下一页）、pre（上一页）、contents（内容）、index（索引）、Glossary（词汇）等。

（可上网搜索或者是找W3C帮助文档）；

语法格式：

超链接文字

例如：

超链接妙用

1、锚点：

不用拖动滚动条就可以直接跳到指定的页面，网页中可以有多个锚点，但不能有相同名称的锚点，若锚点名称是英文字母，最好区分大小写。

例子：

2、锚点链接和普通链接有点区别，需要用#号加上刚才建立的锚点名称作为href的属性值！

3、跳转到其他页面中指定链接地址：

说明文字

4、利用链接下载文件：

例如：

说明

插入特殊符号

1、如何插入空格：

；

2、插入特殊符号时，一般以&开头，加上特殊符号的代码，再加上；就可以了。

例如：

空格—>

第四章HTML中的图片

语法格式：

img标签：

只有开始，没有结束

图像标签常用属性

1、src属性：

用于指定图片的位置；图片路径可以用本地的相对路径，也可用网址

2、alt属性：

指定用于替代图片的文字，当图片不能正常显示时，可以使用该文字替代图片

3、高度和宽度：

width、height；指定图片的宽度和高度

4、border属性：

指定图片的边框大小

5、align属性：

设置图片的环绕方式；当值为：

left、right时，指定的是图片在文字的左侧（left）还是右侧（right属性）；当值为：

top、middle、bottom时。

指定的是文字和图片是以顶部（top）对齐、中间对齐（middle）还是底部（bottom）对齐；

6、name属性：

指定图片名称，可以省略

7、id属性：

图片的编号，可以省略；在同一个文档中，不允许出现相同的ID，但可以有相同的name

图像的其他属性

1、垂直边距vspace：

图片距离上方和下方文字的距离

2、水平边距还space：

图片距离左方和右方文字的距离

3、低品质图片属性：

lowsrc

4、可以将图片分为多个单击区域：

服务端映射、客户端映射

图片超链接：

通过嵌套

图像格式与图像标签

1、网页中的图像格式：

三种Png、gif、jpeg常用后两种；

2、gif格式：

3、交错方式：

4、jepg：

5、png：

第四章HTML中的列表

认识列表

1、列表常用的数据排列方式

2、种类：

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

3、菜单列表

无序列表

语法：

项目列表1

项目列表2

……

其中：

ul：

无序列表开始

/ul：

无序列表结束

li：

列表项目开始。

/li：

列表项目结束

Type：

无序列表的项目前的标识符类型：

值为：

disc（实心圆点）、circle（空心圆点）、square（实心方块）

Compact：

该属性可以减少无序列表项目之间的行距；大多数浏览器已经不支持该属性；

有序列表

语法格式：

项目列表1

项目列表2

……

1、ol：

副标签、li：

子标签

2、type属性：

有1~5种:

A、a、i、I、1

3、起始数值属性：

start设置标号的起始数值

4、Compact：

该属性可以减少无序列表项目之间的行距；大多数浏览器已经不支持该属性；

定义列表

1、语法格式：

项目: 项目说明1

目录列表

语法格式：

属于无序列表

项目1

项目2

……

菜单列表

项目1

项目2

……

注意：

HTML4.01中已经不建议使用目录列表和菜单列表

列表嵌套

1、无序列表嵌套

2、有序列表的嵌套

3、列表的混合嵌套

第五章HTML中的表格

语法格式：

表头第一列

表头第二列

第一行第一列

第一行第二列

第二行第一列

第二行第二列

……

其中：

1、构成：

table：

表格标签tr：

行标签td：

单元格标签（列标签）

2、表格标题标签：

表格标题

3、表格表头标签：

表头内容

表格属性

1、宽度：

width

2、高度：

height

3、表格的对齐方式：

align属性值：

left、right、center表示表格相对浏览器的对齐方式，通过该属性，也可以设置对齐与文字的环绕方式。

4、表格边框颜色：

bordercolor

5、单元格间距：

cellspacing例如：

cellspacing=16

6、表格内容与边框的距离：

Cellpadding

7、背景颜色：

bgcolor

8、背景图：

background例如：

background=”baidu.jpg”背景图属性与背景颜色属性不能同时设置

9、设置了文字与单元格的间距后，在设置行内容的对齐方式就不准确了

10、指定表格列数：

cols，该属性不是标准属性，不建议使用

11、表格与外部文本的间隔：

hspace和vspace，有的浏览器不支持，不是标准元素

12、表头行thead：

若表格内容占多页，则设置该属性可使每一页的第一行为表头，语法格式：

表头

13、表注行tfoot：

效果与thead一样，语法格式：

表注内容

14、行组元素和列组元素：

上网搜

标题属性：

语法格式：

标题

属性：

对齐方式：

align和valign的组合。

行属性：

align，单元格文字的对齐方式（整行），值：

left、center、right

Valign：

单元格文字垂直对齐方式（整行），值：

top、bottom、middle

Height:

行高度

bordercolor：

行的边框颜色

bgcolor：

行的背景颜色

background：

行的背景图片

bordercolorlight：

亮边框属性：

设置右边和下边

bordercolordark：

亮边框属性：

设置上边框和左边框

tr标签可以通过bgcolor属性设置行背景颜色，通过background设置行背景图。

行的bgcolor或者background属性仅作用于当前行，而且会覆盖table标签的bgcolor或者background属性

距离目标元素最近的标签属性起作用，表格包含行，对行属性进行了背景颜色的设置，那么表格的背景颜色就对这一行没有了作用！

行的背景颜色会覆盖表格的背景颜色

单元格属性：

默认情况下，如果不设置单元格的高度和宽度属性，那么单元格会根据内容自动调整，而且一行内一个单元格设置了高度，那么其他单元格的高度也会随着这个设置了高度的单元格变化

align，单元格文字的水平对齐方式（仅一个单元格），值：

left、center、right

Valign：

单元格文字垂直对齐方式（仅一个单元格），值：

top、bottom、middle

Height:

单元格高度

bgcolor：

单元格的背景颜色

bordercolor：

单元格的边框颜色

bordercolorlight：

亮边框属性：

设置右边和下边

bordercolordark：

亮边框属性：

设置上边框和左边框

nowrap：

禁止单元格文字自动换行

colspan：

单元格跨列属性，例如:

colspan=”3”,表示该单元格宽度跨3列

rowspan：

单元格跨行属性，例如:

rowspan=”3”,表示该单元格宽度跨3行

在设计表格的时候，有时候需要让一个单元格横跨两个单元格的宽度，这个时候就需要用到单元标签的水平跨度属性------colspan，值为整数，也就是单元格要横跨的列数

垂直跨度rowspan：

用来设置一个单元格在垂直方向上的跨行数；若该行是最后一行，在下面没有行了，此时，该属性也就没有作用，

表格边框属性

HTML4.01为表格提供了多个属性用于设置表格边框。

1、Border：

设置边框大小

2、Frame：

用于表格只显示哪几条边框。

1.值为：

void：

不显示边框，但显示区分行与列的内部边界线，与border=0不同

a）above：

只显示上边框

b）below：

只显示下边框

c）hsides：

只显示上边框和下边框，

d）lhs：

只显示左边框

e）rhs：

只显示右边框

f）vsides：

只显示左边框和右边框

g）box：

frame的默认值，显示所有边框

h）border：

与box相同，显示所有边框

3、rules：

修饰表格的内部边界线

a）none：

不修饰内部边界线

b）groups：

根据列组合行组的信息显示边界线；

c）rows：

显示行边界线

d）cols：

显示列边界线

e）all：

显示所有边界线；

设置表格亮边框和暗边框

1、bordercolorlight：

设置亮边框的颜色

2、bordercolordark：

设置暗边框的颜色

第六章HTML中的框架

如何在网页中使用框架结构

1、