大部分HTML标签都可以添加属性,常见的属性有宽度、高度、颜色、背景、字体等。
HTML属性一般都出现在HTML标签中,是HTML标签的一部分。
标签可以有属性,它包含了颜色的信息,属性的值一定要在双引号中。
标签可以拥有多个属性。
属性由属性名和值成对出现。
语法格式
<标签名属性名1=“属性值”属性名2=“属性值”…“>…标签名>示例:(如图2-8所示)
1. HTML文档
HTML文档就是HTML页面,也就是网页,是由HTML元素组成的,互联网的所有内容都是由一个个HTML文档体现的,如图2-9所示。
上图红色边框的是主体,之间的文本是可见的页面内容,蓝色边框是网页标题,是标签中中的内容。
整个网页就是一个HTML文档,并以网页的形式显示出它们。浏览器不会显示HTML标签,而是用标签来解释页面的内容。
2.HTML注解
在实际开发中需要在一些代码段做HTML注解,这样做有很多好处,如方便查找,方便比对,方便项目组里的其他程序员了解其他人的代码,而且可以方便对代码的理解与修改等等。
语法格式(如图2-10所示):
这里写注解内容-->
注解:开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要。
3.字的字体(font)和颜色(color)定义文字大小和颜色使用font标签对。
基本语法:
……
它的属性值有:face(字体)color(颜色)等
示例(图2-11):
在浏览网页中最先关注的是文章的标题,字体很大很突出。通常使用
对标签.h 标签分为6 种,分别是-----
字体从大到小。示例(图2-12)
1
2
3 标签演示
4
5
6
我是h1 标签7
我是h2 标签8
我是h3 标签< /h3>9
我是h4 标签10
我是h5 标签11
我是h6 标签12
13
运行结束:
5.标题字的对其属性(align)
1
2
3标题字的对齐属性
4
5
6< h2 zlign = left >左对齐
7< h2 zlign = center >居中对齐
8< h2 zlign = right >右对齐
9
10
运行结束(图2-13):
6.字体加粗(b标签)
1
2
3B标签演示
4
5
6这是没有使用b标签的正常字体
7使用b标签加粗的字体
8
9
运行结束(图2-14):
可能学员会有疑问,HTML代码明明是两行,为何显示结果是一行。这是因为HTML代码中的换行、空格、tab缩进等是不会在浏览器中显示的,如图2-15所示。
示例:
那么在HTML如何实现换行?只需要在源码中需要加上一个换行标签,如图2-16所示。
7.斜体标记、、
基本语法:
……
……
……
示例:
1
2
3斜体标记、、
4
5
6斜体标记i演示
7斜体标记em演示
8斜体标记cite演示
9
10
说明:有一些标签用来指出包含的文本有特殊的意义,胡(表示缩写),(表示强调),(表示更强地强调),(表示引用),
(表示地址)等。这些标签不是为了定义显示效果而存在的,所以从浏览器里看它们能没有任何效果,也可能不同的浏览器对这些标签的显示效果完全不同。8.段落标记
浏览器解析HTML文档会忽略空白符,所以要想保证正常的分段换行的话,必须指出那些文字是属于统一段落的,这就用到了标签,标签式段落标记,浏览器会自动地在段落的前后添加空行。
1
2
3p标记示例
4
5
6这是第一个段
7这是第二个段
8
9
显示结束(图2-18):
9.换行标签只表示换行,不表示段落的开始或结束,所以通常没有结束标签。
1
2
3BR标签演示
4
5
6这是第一段
7 这是第二段
8
9
显示结束(图2-19)
从p标签和br标签在浏览器显示的结果中可以看出,使用标签换行上下文有间距(浏览器会自动地在段落的前后加上空行),而标签换行是软换行,上下文没有间距。
关于和标签的使用,学员可能会发现有的网页没有/符号,浏览器也能正常显示。那么和的区别是什么呢?
HTML升级版也就是HTML5标志规定,不允许使用结束标签(闭合标签)的HTML元素。虽然现在在所有浏览器中的显示都没有问题,标志推荐使用有闭合标签的。
10.水平线标记(hr)
Width(水平线的宽度显示)
Size(水平线的高度)
Color(水平线的颜色)
Noshade水平线去掉阴影属性标记
Align水平线对齐属性
前面已经简单通过了hr标签,这次为其添加上属性。
示例(图2-20)
1
2 标签演示
3
4
带属性值的HR 标签演示5
6
7
11.输入特殊符号
基本语法: : " &
如果想在网页显示多个空格,可是在源码中无论你敲多少空格,实际的显示页面只能显示一个如图2-21所示,显示的结果并没有我们预期的结果,同样的我们想在网页上显示和HTML代码有冲突的符合加大于号(>)或小于号(<)等怎么办呢?HTML语言中专门为显示这些特殊的符号设定了标签。常用的特HTML殊符号对应代码的如图2-22所示。
12.插入图片
网页中常用的图片格式有jpg、gif、png等。HTML中插入图片使用标签
基本语法:
图片路径” width=宽度 height=高度>
语法解释:宽度和高度的单位都是像素,是插入图片的HTML标签,src是描述图片路径的属性,它的值表示图片的路径。
示例(图2-23);
这里的图片路径表示logo.gif图片和html文件在不在同一目录下。如果图片则可把所有的图片放在图像专有子文件夹中如images中,那么上面的路径应改为,关于路径问题,在后面“相对路径与绝对路径”课程中详细讲解。
标签除了src属性,外还包含的属性有:
alt:设置图像的提示文字属性。
width、height:设置图像的宽度和高度。
border:设置图像的边框。
align:设置图像的排列属性。
设置图片的提示文字(alt)
基本语法:
图片路径” 埃立特“提示文字”>
示例(2-24):
JMG标签的alt属性是指鼠标放在网页的图片上没弹出一行提示性的文字。
14.设置图片的边框
基本语法:
图片路径” border=边框宽度>
示例(图2-25):
图片的超链接
图片的超链接就是在图片上建立链接。和文字的链接相同,就是单击过链接的图片和文字后就会跳到对应的目标地址上。
图片的超链接与文字相同都是标记。
基本语法:
目标地址”>图片路径” />
示例(图2-26):
15.HTML链接(Link)
超链接:从一个页面指向另一个目的端的链接,超级链接可以使用标签来定义,其链接文档的地址在属性“href“中指定。链接分为内部链接:链接指向站点文件夹之内的文件(如)和外部链接:链接指向站点文件夹之外的文件(如。标签又叫做锚标签,用来建立一个指向其他文档的链接。锚可以可以链接到网络上任一文档:一html页面,一张图片,一个音频或视频文件等。
语法格式:
url是需要链接文档的地址,开始标签和结束标签包围的文本是作为超链接显示的文本。
A标签的属性包含:
href:链接地址。
target:指定链接的目标窗口。
name:给链接命名。
title:给链接提示文字。
设置链接的目标窗口(target)属性
基本语法:
Target属性用来定义被链接的文档在何处显示(在新的出口打开,还是在原有的窗口打开)。默认的被连接的文档是在原来的窗口中打开的。如果将target属性设为”_dlank”文档就会在新窗口打开,例如:
Target属性的值及含义:
_parent:在上一级窗口中打开。
_blank:在新窗口中打开。
_self:在同一窗口中打开(默认)。
_top:在浏览器的整个窗口中打开,忽略任何框架。
1
3)链接到其他页面中的书签。
基本语法:
示例:
18.文件下载链接
基本语法:
“file_url”表示文件所在路径。
有两种方式:
第一种是网站内部的相对路径,用“路径/完整文件名(主文件名.扩展名)”表示:
第二种是使用互联网上的绝对路径http://网站域名/目录/完整文件名。
示例:
19.E-mail链接
发送E-mail(建立e-mil链接),实际制作中使用的频率很低,学员只需了解基本用法即可。
基本语法:
邮件地址:
2 解析:发送邮件给admin@gzcc.edu.cn-->
20. 空连接
空连接:是指向链接后,鼠标变成手形,单击后无任何链接效果仍停留在当前页面。空连接的使用是网页前端开发布局时,临时加空连接,主要为了能让鼠标动作引发的行为结果。
基本语法:
”#”>链接文字
其中“#”表示空连接。
示例