HTML的一些基础知识(干货)(一)

时间:2024-03-31 12:13:16

第一章.   页面基本元素

1.1页面基础元素:<html>

<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属性,使浏览器更好的显示界面,并不会更改页面的文字编码

ISO标准中语言代码的取值及含义
语言名称 写法 语言名称 写法
英语 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值。它可以使用绝对路径,也可以指向某个文件夹。

HTML的一些基础知识(干货)(一)(不好意思,现在才知道怎么把截图放上去HTML的一些基础知识(干货)(一)图为取值为绝对路径的实例

说明:在该实例中,含有链接的元素为<img>元素。其中,src属性的值就是链接的路径

HTML的一些基础知识(干货)(一)

使用<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属性中指定的取值及其含义,如下表

target属性的取值及含义
代码属性值 含义 代码属性值 含义
_self 在当前窗口显示 _parent 在父窗口显示
_blank 在新的窗口显示 _top 取消框架并在当前窗口显示

1.6 创建样式元素:<style>

[作用与语法]创建样式元素<style>用来创建本页面中所使用的样式,使用<style>元素创建的样式内容只能够被当前页面使用。<style>元素的语法结构如下

<style>级联样式</style>

HTML的一些基础知识(干货)(一)

【代码分析与显示】在该实例中,<style>元素中用级联样式,定义字体的颜色为红色,字体大小为24号字,字体显示为加粗。代码运行后显示效果如下图

   HTML的一些基础知识(干货)(一)

1.6.1 类型属性:type

【作用与语法】type实行用来指定<style>元素中所包含内容的类型。一般情况下,不指明type属性时,浏览器是可以辨别内容类型的。但为了防止和Javascript脚本等混淆,最好定义type属性。type属性的语法结构如下

<style type="类型"></style>(在<style>元素中,类型属性的值为“text/css”

【实例代码】

HTML的一些基础知识(干货)(一)

HTML的一些基础知识(干货)(一)

【代码分析与显示】该实例中,定义字体的颜色为黑色,字体大小为26号字体,字体显示为加粗。代码运行后显示图如图所示。实际上使用<style>元素时,一般都要指明type属性,因而它们一般一起应用

1.6.2 类型属性:media

【作用与语法】media属性用来指定<style>元素中所包含内容作用的媒体。一般情况下,制作的网页可能在不同的浏览设备中使用,指明使用的媒体将有助于页面的显示。media属性的语法结构如下

<style media="媒体类型"></style>

media属性中可以使用多种媒体,具体的取值及含义如下表

media属性的取值及含义
代码属性值 含义 代码属性值 含义
screen 电脑显示器 aural 音频设备
tv 电视 tty 文本
print 打印机 all 所有设备

当指定多个媒体时,每个媒体值之间,用英文的“,”分隔

注意:当指定了使用媒体后,其他媒体中将不能应用现有样式

【实例代码】

HTML的一些基础知识(干货)(一)

这里用<style media="screen,tv">定义使用的多媒体工具为电脑显示器和电视。

1.7 链接元素:<link>

【作用与语法】链接元素<link>用来指定文档与其他文档之间的关系。使用<link>元素,可以调用其他文档中的内容,如级联样式表等。<link>元素的语法结构如下。

<link 属性="属性值"/>

【实验代码】

HTML的一些基础知识(干货)(一)

代码在标题中链接了一个main.css的样式

<link>元素中可以使用的属性如表所示

<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属性的部分取值和含义如表所示

rel和rev属性的部分取值和含义
属性值 代表的含义 属性值 代表的含义
next 链接到下一个文档 child 链接到源下面的文档
prev 链接到前一个文档 index 链接到此文档的索引
head 链接到集合中的*文档 glossary 链接到此文档的术语表
toc 链接到集合的目录 stylesheet 链接到样式片段
parent 链接到源上面的文档    

1.7.3 链接样式文件

【作用与语法】通过<link>元素及其相应的属性,实现调用级联样式表文件的目的。链接样式文件的语法结构如下。

<link href="样式路径" rel="文档关系" type="文件类型"/>

【实例代码】

HTML的一些基础知识(干货)(一)

该实例中,使用<link>元素调用了一个名为main.css的样式文件。该文件中具体定义的样式内容如下

HTML的一些基础知识(干货)(一)

该样式中,定义<body>元素的背景色为灰色,字体大小为24号字体,字体样式为加粗。

【代码分析与显示】代码运行后,其显示效果如左图所示,待上述代码中,<link>元素的rel属性取值为stylesheet,表明将链接的文件为样式片段文件。如果取消rel属性,则页面的显示效果如右图所示,从两张图对比可知,rel属性对能否正常调用链接文件有很大的影响

HTML的一些基础知识(干货)(一)                                    HTML的一些基础知识(干货)(一)

1.7.4 制作收藏夹图标

【作用与语法】通过<link>元素及其相应的属性制作收藏夹的图标。其语法结构如下。

<link rel="Shortcut Icon" href="图标路径" type="image/x-icon" />

在制作收藏夹图标时,<link>元素中rel属性的值为“Shortcut Icon”,类型为“image/x-ion”,同时图标要使用相应的icon格式图标。

【实例代码】

HTML的一些基础知识(干货)(一)

*【代码分析与显示】代码运行后,将页面添加到收藏夹中,页面在收藏夹中显示出特有的图标

1.8 页面主体元素:body

【作用与语法】页面主体元素<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位的数字来定义颜色值。其中,每连续两个数字代表一种原色值。原色按照“红、绿、蓝”的顺序排列。数值越大,代表颜色所占的比例越大。而且,在使用颜色名称时,并不是所有的颜色名称都能够正常显示。

bgcolor属性的取值及含义
属性值 含义 属性值 含义
red 红色 purple
yellow gray
blue lime 浅绿
silver maroon
teal 深青 aqua 水绿
white black
navy 深蓝 fuchsia 紫红
olive 橄榄 green 绿
#ff9900 十六进制颜色  


【实例代码】

HTML的一些基础知识(干货)(一)

运行结果图如下

                                       HTML的一些基础知识(干货)(一)

1.8.2 主题元素的背景图片属性:background

【作用与语法】background属性用来指定页面所使用的背景图片。指定的背景图片将按照从上到下、从左到右的方式重复显示。语法结构如下.

<body background="图片的路径">包含的内容部分</body>

background属性的取值为URL值,它可以使用绝对路径,也可以使用相对路径

【实例代码】

HTML的一些基础知识(干货)(一)

background属性定义的页面所使用的背景图片为百度站点的logo。

【代码分析与显示】

                                HTML的一些基础知识(干货)(一)

                        在background属性中定义的背景图片,不能控制其重复、位置等属性。

1.8.3 主题元素的背景图片滚动属性:bgproperties

【作用与语法】bgproperties属性用来指定背景图片能否滚动。即当拖动浏览器滚条时,页面背景可以随滚条一起改变位置。语法结构如下

<body background="图片的路径" bgproperties="fixed">......</body>

因为bgproperties属性是用来控制背景图片的,所以一定要和background属性一起使用。bgproperties属性只有一个值fixed,含义是背景图片固定。

【实例代码】

HTML的一些基础知识(干货)(一)

在该实例中,使用<table>元素产生滚条代码运行图如左图,当拖动滚条时,其显示效果如右图所示

HTML的一些基础知识(干货)(一)                            HTML的一些基础知识(干货)(一)

1.8.4 主题元素的文本属性:text

【作用与语法】text属性的作用是指定页面中普通文本(没有链接的文本)的颜色。语法结构如下

<body text="颜色值">包含的内容部分</body>

【实例代码】

HTML的一些基础知识(干货)(一)

该实例中,定义了背景色为灰色,文字的颜色为红色。

HTML的一些基础知识(干货)(一)

1.8.5 IE浏览器中的左边界属性:leftmargin

【作用与语法】<body>元素的边界属性用来定义页面与浏览器窗口之间的距离。边界属性包括两个:leftmargin属性和topmargin属性。

注意:这两个属性都是IE浏览器所专有的。如果想在其他浏览器中达到一样的效果,建议使用级联样式实现

leftmargin属性用来指定页面和浏览器左边界之间距离。语法结构如下

<body letfmargin="数字值">包含的内容部分</body>

【实例代码】

HTML的一些基础知识(干货)(一)

该页面中,定义了页面与浏览器左边界的距离为0,运行结果如下图

                                                                   HTML的一些基础知识(干货)(一)

1.8.7 主题元素中使用样式属性:style

【作用与语法】页面主体元素的样式属性用来给页面内容定义级联样式表。包括style属性、class属性。style属性用来定义页面主题元素中使用的级联样式表。语法结构如下

<body style="级联样式表"></body>

【实例代码】

HTML的一些基础知识(干货)(一)

在该实例中,使用style属性了文本的字体大小为18px,字体的样式为加粗,字体的颜色为浅灰色,运行后如图所示

                          HTML的一些基础知识(干货)(一)

1.8.6 IE浏览器中的上边界属性:topmargin

【作用与语法】topmargin属性用来指定页面和浏览器上边界之间的距离。在topmargin属性中,数字值的实际单位也是像素。语法结构如下

<body topmargin="数字值">包含的内容部分</body>

【实例代码】

HTML的一些基础知识(干货)(一)

该实例中,形体了页面与浏览器上侧的距离为50,显示效果如图

                                          HTML的一些基础知识(干货)(一)

1.8.8主题元素中调用样式属性:class

【作用与语法】class属性用来调用级联样式表。既可以调用页面头部<style>元素中定义的样式表,也可以调用使用<link>元素链接的外部样式表。class属性的语法结构如下

<body class="定义的类的名称"></body>

【实例代码】

HTML的一些基础知识(干货)(一)

在该实例中,使用class属性调用了名称为 main.css 的外部级联样式文件。在main.css中定义的具体样式看左图,结果看右图(定义了页面中背景颜色为灰色,大小为18px,字体样式为加粗)

HTML的一些基础知识(干货)(一)                     HTML的一些基础知识(干货)(一)

1.9  使用背景音乐

 

页面中添加背景音乐的元素是<bgsound>,其中包括音乐地址属性src、重复属性loop。<bgsound>元素是IE浏览器的特有元素

1.9.1 IE浏览器中添加背景音乐:<bgsound>

【作用与语法】 <bgsound>元素用来制作页面的背景音乐。语法结构如下

<bgsound 属性="属性值"/>

【实例代码】

HTML的一些基础知识(干货)(一)

注意:并不是所有浏览器都支持页面背景音乐的播放。采用<bgsound>元素添加的背景音乐,用户无法控制,所以要谨慎使用

1.9.2 背景音乐的路径属性:src

【作用与语法】src属性用来指定页面背景音乐的路径。语法结构如下

<bgsound src="背景音乐的路径"/>

在<bgsound>元素中,可以支持多种音乐格式,包括常用的mp3、rm、wav等。

1.9.3 背景音乐的重复属性:loop

【作用与语法】loop属性用来指定页面背景音乐的播放次数。语法结构如下

<bgsound src="背景音乐的路径" loop="重复次数"/>

注意: 在页面中如果不设置loop属性,背景音乐会不停的重复播放