Html笔记.docx - 冰豆网
Html笔记.docx
- 文档编号:8997834
- 上传时间:2023-02-02
- 格式:DOCX
- 页数:28
- 大小:98.22KB
Html笔记.docx
《Html笔记.docx》由会员分享,可在线阅读,更多相关《Html笔记.docx(28页珍藏版)》请在冰豆网上搜索。
![Html笔记.docx](https://file1.bdocx.com/fileroot1/2023-2/2/33d38254-d468-4a92-bc7f-c5856d47eced/33d38254-d468-4a92-bc7f-c5856d47eced1.gif)
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、
:
:
2、框架技术:
可以在一个浏览器窗口中显示多个文档。
利用这个特点,框架技术可以广泛的应用到网站导航和多页文档浏览中!
方便访问者对网页的浏览
框架的基本属性
1.