第一章. 页面基本元素
<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属性，背景音乐会不停的重复播放
扫一扫
2078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
