第一章. 页面基本元素
<html>是页面的基础元素,主要用来定义页面的开始和结束部分。元素语法结构如下<html>....</html>(开头标记为<>,结束标记为</html>)先介绍一下完整的HTML文件的基本结构
<html> 文件开始标记
<head> 文件头开始标记
......... 文件头部分的内容
</head> 文件头结束标记
<body> 文件主体开始标记
......... 文件主题部分的内容
</head> 文件主题结束标记
</html> 文件结束标记
在<html>和</html>之间写入想要编辑的页面内容就构成了一个简单的页面
1.1.1 文本显示方向属性:dir
【作用与语法】dir属性用来指定浏览器文本显示的方向,同时也决定浏览器滚条的位置。dir属性的语法结构如下
<html dir="浏览器中文本的方向">......</html>(在元素名称和属性之间要加入空格)
dir属性可以取两个值,ltr(left title right)和rtl(right title left),分别表示从左向右显示和从右向左显示
1.1.2 指定语言属性:lang
【作用与语法】lang属性用来指定文档中所使用的语言。lang属性的语法结构如下
<html lang="指定的语言">包含的内容部分</html>
lang属性的取值可以使用ISO标准中的语言代码。在<html>元素中加入lang属性,使浏览器更好的显示界面,并不会更改页面的文字编码
语言名称 | 写法 | 语言名称 | 写法 |
英语 | en | 法语 | fr |
汉语 | zh | 德语 | de |
日语 | ja | 意大利语 | it |
1.2 页面头部元素:<head>
【作用与语法】HTML的头部元素是以<head>为开始标记,以</head>为结束标记。它用于包含当前文档的相关信息,可包含<title>元素、<meta>元素等,分别用来定义页面的标题、编码。使用<head>元素可以将基本信息部分和页面主体内容区分开来。<head>元素的语法结构如下
<head>......</head>
1.3 页面标题元素:<title>
【作用与语法】HTML页面的标题一般是用来说明页面用途的,它显示在浏览器的标题栏中。在HTML文档中,标题信息设置在页面的头部,也就是<head>和</head>之间。<title>元素的语法结构如下。
<title>......</title> (说明:在标记中间的“......”就是标题的内容,它位于HTML文档的头部,即<head>和</head>之间)
1.4 元信息元素:<meta>
【作用与语法】元信息元素<meta>用来定义页面的附加信息,其中包括页面的作者、版权、关键字等相关信息。<meta>元素的语法结构如下。
<meta 属性=“属性值”/>
<meta>元素是一个自封闭的元素,通过其中的属性来添加各种附加信息。<meta>元素在不适用任何属性时,对页面没有影响。
1.4.1 元信息元素名称属性:name
【作用与语法】name属性用来制定文档中附加信息的名称。例如,最常用的值“keywords”用来定义文档中的关键字,方便搜索引擎的搜索。name属性的语法结构如下。
<meta name="信息名称"/>
在<meta>元素中,名称必须对应有相关的值才能生效
1.4.2 元信息元素的值:content
【作用与语法】content属性用来指定文档中附加信息的值,它与name属性成对出现。content属性的语法结构如下
<meta name="信息名称" conten="附加信息的值"/>
<meta>元素中所定义的“keywords”信息是用来为搜索引擎定义关键字的,所以对页面显示效果并不产生影响,故页面显示效果并无太大变化
1.4.3 元信息元素的附加属性:http-equiv
【作用与语法】http-equiv属性和name属性类似,用来指定附加信息的名称。在浏览器加载页面之前,服务器会把http-equiv属性定义的相关信息发送给浏览器,便于在浏览器中正确显示页面。http-equiv属性的语法结构如下
【作用与语法】<meta http-equiv="信息名称",content="附加信息的值">
说明:和name属性相似,http-equiv属性一般要和conten属性成对出现
1.4.4 定义页面的跳转
【作用与语法】在浏览器网页的时候经常会看到一些欢迎信息的页面,并经过一段时间后,这一页面会自动转到其他页面,这就是网页的跳转。使用HTML中的HTTP代码就可以很轻松的实现这一功能。页面跳转的语法结构
<meta http-equiv="refresh" content="跳转时间";url="链接地址">
说明:在该语法中,refresh表示网页的刷新,而在content中则设定刷新的时间和刷新后的地址,时间和链接地址之间用分号相隔。默认情况下,跳转时间是以秒为单位的
1.5 基本设置元素:<base>
在HTML中,基本设置元素<base>使用来定义相对路径的根目录。使用<base>元素,可以方便的定义页面中的超级链接。语法结构如下
<base 属性="属性值"/>
<base>元素在不使用任何属性时,对页面没有影响。<base>元素中可以使用的属性有链接路径属性href和链接窗口属性target
1.5.1 链接路径属性:href
【作用与语法】href属性用来指定文档中相对链接的根目录。文档中的所有链接(包括图片、音频等内容)都按照href属性所指定的根目录显示。href属性的语法结构如下
<base href="指定路径">包含的内容部分</base>
href属性的取值为url值。它可以使用绝对路径,也可以指向某个文件夹。
(不好意思,现在才知道怎么把截图放上去)图为取值为绝对路径的实例
说明:在该实例中,含有链接的元素为<img>元素。其中,src属性的值就是链接的路径
使用<base>元素定义页面所有链接的根目录为“http://www.baidu.com”,其与新购的显示效果如上图所示。在页面<img>元素中,使用相对路径调用了“www.baidu.com”上的一个图片。使用的绝对路径值为“img/baidu_logo.gif”
1.5.2 链接窗口属性:tager
target用来指定链接目标文件显示的窗口。其中可以指定目标文件显示在框架中,也可以指定目标文件显示在id标记的窗口中(关于框架和id标记会在后面详细讲解),同时还可以使用HTML中指定的值。语法结构如下
<a href="链接的路径" target="目标窗口或指定值">链接的文本</a>
在target属性中指定的取值及其含义,如下表
代码属性值 | 含义 | 代码属性值 | 含义 |
_self | 在当前窗口显示 | _parent | 在父窗口显示 |
_blank | 在新的窗口显示 | _top | 取消框架并在当前窗口显示 |
1.6 创建样式元素:<style>
[作用与语法]创建样式元素<style>用来创建本页面中所使用的样式,使用<style>元素创建的样式内容只能够被当前页面使用。<style>元素的语法结构如下
<style>级联样式</style>
【代码分析与显示】在该实例中,<style>元素中用级联样式,定义字体的颜色为红色,字体大小为24号字,字体显示为加粗。代码运行后显示效果如下图
1.6.1 类型属性:type
【作用与语法】type实行用来指定<style>元素中所包含内容的类型。一般情况下,不指明type属性时,浏览器是可以辨别内容类型的。但为了防止和Javascript脚本等混淆,最好定义type属性。type属性的语法结构如下
<style type="类型"></style>(在<style>元素中,类型属性的值为“text/css”)
【实例代码】
【代码分析与显示】该实例中,定义字体的颜色为黑色,字体大小为26号字体,字体显示为加粗。代码运行后显示图如图所示。实际上使用<style>元素时,一般都要指明type属性,因而它们一般一起应用
1.6.2 类型属性:media
【作用与语法】media属性用来指定<style>元素中所包含内容作用的媒体。一般情况下,制作的网页可能在不同的浏览设备中使用,指明使用的媒体将有助于页面的显示。media属性的语法结构如下
<style media="媒体类型"></style>
media属性中可以使用多种媒体,具体的取值及含义如下表
代码属性值 | 含义 | 代码属性值 | 含义 |
screen | 电脑显示器 | aural | 音频设备 |
tv | 电视 | tty | 文本 |
打印机 | all | 所有设备 |
当指定多个媒体时,每个媒体值之间,用英文的“,”分隔
注意:当指定了使用媒体后,其他媒体中将不能应用现有样式
【实例代码】
这里用<style media="screen,tv">定义使用的多媒体工具为电脑显示器和电视。
1.7 链接元素:<link>
【作用与语法】链接元素<link>用来指定文档与其他文档之间的关系。使用<link>元素,可以调用其他文档中的内容,如级联样式表等。<link>元素的语法结构如下。
<link 属性="属性值"/>
【实验代码】
代码在标题中链接了一个main.css的样式
<link>元素中可以使用的属性如表所示
属性名称 | 写法 | 属性名称 | 写法 |
文本显示方向属性 | dir | 源文档与目标文档关系属性 | rel |
指定语言属性 | lang | 目标文档与源文档关系属性 | rev |
类型属性 | type | 链接窗口属性 | target |
媒体选择属性 | media | 标技术型 | id |
标题属性 | title | 类属性 | class |
字符集名称属性 | charset | 定义级联样式属性 | style |
指定链接路径属性 | href |
1.7.1 指定链接路径属性:href
【作用与语法】href属性用来指定<link>元素中链接文档的路径。href属性的语法结构如下
<link href="指定的路径"/>(之前已经介绍过href属性,这里不多描述)
1.7.2 源文档与目标文档关系属性:rel、rev
【作用与语法】rel属性用来制定源文档到链接文档之间的关系,rev属性用来指定链接文档到源文档之间的关系。rel属性和rev属性的语法结构如下。
<link rel="文档关系" rev="文档关系"/>
rel属性和rev属性可以同时使用。rel属性和rev属性的部分取值和含义如表所示
属性值 | 代表的含义 | 属性值 | 代表的含义 |
next | 链接到下一个文档 | child | 链接到源下面的文档 |
prev | 链接到前一个文档 | index | 链接到此文档的索引 |
head | 链接到集合中的*文档 | glossary | 链接到此文档的术语表 |
toc | 链接到集合的目录 | stylesheet | 链接到样式片段 |
parent | 链接到源上面的文档 |
1.7.3 链接样式文件
【作用与语法】通过<link>元素及其相应的属性,实现调用级联样式表文件的目的。链接样式文件的语法结构如下。
<link href="样式路径" rel="文档关系" type="文件类型"/>
【实例代码】
该实例中,使用<link>元素调用了一个名为main.css的样式文件。该文件中具体定义的样式内容如下
该样式中,定义<body>元素的背景色为灰色,字体大小为24号字体,字体样式为加粗。
【代码分析与显示】代码运行后,其显示效果如左图所示,待上述代码中,<link>元素的rel属性取值为stylesheet,表明将链接的文件为样式片段文件。如果取消rel属性,则页面的显示效果如右图所示,从两张图对比可知,rel属性对能否正常调用链接文件有很大的影响
1.7.4 制作收藏夹图标
【作用与语法】通过<link>元素及其相应的属性制作收藏夹的图标。其语法结构如下。
<link rel="Shortcut Icon" href="图标路径" type="image/x-icon" />
在制作收藏夹图标时,<link>元素中rel属性的值为“Shortcut Icon”,类型为“image/x-ion”,同时图标要使用相应的icon格式图标。
【实例代码】
*【代码分析与显示】代码运行后,将页面添加到收藏夹中,页面在收藏夹中显示出特有的图标
1.8 页面主体元素:body
【作用与语法】页面主体元素<body>用来包含页面所要显示的内容,包括文本元素、图像元素、表单元素等各种页面元素,同时可以设置整个页面的背景、边界等相关属性。<body>元素的语法结构如下。
<body>页面主体内容</body>
说明:在不定义任何属性时,<body>元素中的内容会和浏览器的边线保持一定的距离(在不同的浏览器中这个距离是不同的)。
<body>元素可以使用的所有属性如下表所示
属性名称 | 写法 | 属性名称 | 写法 |
文本显示方向属性 | dir | 已链接属性 | vlink |
指定语言属性 | lang | **链接属性 | alink |
背景图片属性 | background | 标记属性 | id |
背景颜色属性 | bgcolor | 类属性 | class |
标题属性 | title | 定义级联样式属性 | style |
文本属性 | charset | 左便捷属性 | leftmargin |
指定链接路径属性 | text | 上边界属性 | topmargin |
链接属性 | link |
<body>元素的背景和文本属性是制作页面时常用的属性,包括bgcolor属性、background属性、bproperties属性和text属性。
1.8.1 主题元素的背景属性:bgcolor
【作用与语法】bgcolor属性用来指定页面所使用的背景颜色。bgcolor属性的用法结构如下
<body bgcolor="颜色值">包含的内容部分</body>
bgcolor属性的取值,可以使用颜色名称,也可以使用十六进制的颜色代码值。十六进制的颜色代码就是使用6位的数字来定义颜色值。其中,每连续两个数字代表一种原色值。原色按照“红、绿、蓝”的顺序排列。数值越大,代表颜色所占的比例越大。而且,在使用颜色名称时,并不是所有的颜色名称都能够正常显示。
属性值 | 含义 | 属性值 | 含义 |
red | 红色 | purple | 紫 |
yellow | 黄 | gray | 灰 |
blue | 蓝 | lime | 浅绿 |
silver | 银 | maroon | 褐 |
teal | 深青 | aqua | 水绿 |
white | 白 | black | 黑 |
navy | 深蓝 | fuchsia | 紫红 |
olive | 橄榄 | green | 绿 |
#ff9900 | 十六进制颜色 |
【实例代码】
运行结果图如下
1.8.2 主题元素的背景图片属性:background
【作用与语法】background属性用来指定页面所使用的背景图片。指定的背景图片将按照从上到下、从左到右的方式重复显示。语法结构如下.
<body background="图片的路径">包含的内容部分</body>
background属性的取值为URL值,它可以使用绝对路径,也可以使用相对路径
【实例代码】
background属性定义的页面所使用的背景图片为百度站点的logo。
【代码分析与显示】
在background属性中定义的背景图片,不能控制其重复、位置等属性。
1.8.3 主题元素的背景图片滚动属性:bgproperties
【作用与语法】bgproperties属性用来指定背景图片能否滚动。即当拖动浏览器滚条时,页面背景可以随滚条一起改变位置。语法结构如下
<body background="图片的路径" bgproperties="fixed">......</body>
因为bgproperties属性是用来控制背景图片的,所以一定要和background属性一起使用。bgproperties属性只有一个值fixed,含义是背景图片固定。
【实例代码】
在该实例中,使用<table>元素产生滚条代码运行图如左图,当拖动滚条时,其显示效果如右图所示
1.8.4 主题元素的文本属性:text
【作用与语法】text属性的作用是指定页面中普通文本(没有链接的文本)的颜色。语法结构如下
<body text="颜色值">包含的内容部分</body>
【实例代码】
该实例中,定义了背景色为灰色,文字的颜色为红色。
1.8.5 IE浏览器中的左边界属性:leftmargin
【作用与语法】<body>元素的边界属性用来定义页面与浏览器窗口之间的距离。边界属性包括两个:leftmargin属性和topmargin属性。
注意:这两个属性都是IE浏览器所专有的。如果想在其他浏览器中达到一样的效果,建议使用级联样式实现
leftmargin属性用来指定页面和浏览器左边界之间距离。语法结构如下
<body letfmargin="数字值">包含的内容部分</body>
【实例代码】
该页面中,定义了页面与浏览器左边界的距离为0,运行结果如下图
1.8.7 主题元素中使用样式属性:style
【作用与语法】页面主体元素的样式属性用来给页面内容定义级联样式表。包括style属性、class属性。style属性用来定义页面主题元素中使用的级联样式表。语法结构如下
<body style="级联样式表"></body>
【实例代码】
在该实例中,使用style属性了文本的字体大小为18px,字体的样式为加粗,字体的颜色为浅灰色,运行后如图所示
1.8.6 IE浏览器中的上边界属性:topmargin
【作用与语法】topmargin属性用来指定页面和浏览器上边界之间的距离。在topmargin属性中,数字值的实际单位也是像素。语法结构如下
<body topmargin="数字值">包含的内容部分</body>
【实例代码】
该实例中,形体了页面与浏览器上侧的距离为50,显示效果如图
1.8.8主题元素中调用样式属性:class
【作用与语法】class属性用来调用级联样式表。既可以调用页面头部<style>元素中定义的样式表,也可以调用使用<link>元素链接的外部样式表。class属性的语法结构如下
<body class="定义的类的名称"></body>
【实例代码】
在该实例中,使用class属性调用了名称为 main.css 的外部级联样式文件。在main.css中定义的具体样式看左图,结果看右图(定义了页面中背景颜色为灰色,大小为18px,字体样式为加粗)
1.9 使用背景音乐
页面中添加背景音乐的元素是<bgsound>,其中包括音乐地址属性src、重复属性loop。<bgsound>元素是IE浏览器的特有元素
1.9.1 IE浏览器中添加背景音乐:<bgsound>
【作用与语法】 <bgsound>元素用来制作页面的背景音乐。语法结构如下
<bgsound 属性="属性值"/>
【实例代码】
注意:并不是所有浏览器都支持页面背景音乐的播放。采用<bgsound>元素添加的背景音乐,用户无法控制,所以要谨慎使用
1.9.2 背景音乐的路径属性:src
【作用与语法】src属性用来指定页面背景音乐的路径。语法结构如下
<bgsound src="背景音乐的路径"/>
在<bgsound>元素中,可以支持多种音乐格式,包括常用的mp3、rm、wav等。
1.9.3 背景音乐的重复属性:loop
【作用与语法】loop属性用来指定页面背景音乐的播放次数。语法结构如下
<bgsound src="背景音乐的路径" loop="重复次数"/>
注意: 在页面中如果不设置loop属性,背景音乐会不停的重复播放