html语言中网页主体标记是,HTML 网页主体标记
HTML网页主体标记
本章目标:
Ø掌握〈BODY〉元素
Ø掌握文字与段落的
Ø掌握超链接
Ø掌握图片标记
Ø掌握表格标记
简 介
网页的主体部分位于
和这两个标记之间。作为一个标记,有许多相关的属性。本章将介绍网页中主要的标记以及其属性的含义,通过这些标记,我们可以控制网页内容的显示。。 1、
HTML的主体标记是
,在和中放置的是网页中的所有内容,如文字、图片、链接、表格、表单等。
在HTML中标签可以拥有属性。属性能够为页面上的HTML元素提供附加信息。标签
定义了html页面的主体元素。使用一个附加的bgcolor属性,可以告诉浏览器:页面的背景色是红色的,就像这样:.
表2-1 body标记属性
属性
描述
text
设定页面文字的颜色
bgcolor
设定页面背景的颜色
background
设定页面的背景图像
bgproperties
设定页面的背景图像为固定,不随页面的滚动而滚动
link
设定页面默认的链接颜色
alink
设定鼠标正在单击时的链接颜色
vlink
设定访问过后的链接颜色
topmargin
设定页面的上边距
leftmargin
设定页面的左边距
1.1文字颜色属性text
基本语法
1.2页面背景颜色bgcolor
中国北京
body元素的其他属性我们就不一一介绍了。
注意:
属性值应该被包含在引号中。双引号是最常用的,但是单引号也可以使用。
在很少情况下,比如说属性值本身包含引号,使用单引号就很必要了。
比如:name='John "ShotGun" Nelson'。
注意:中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。
2文本标记
在页面中显示文字内容是HTML语言所能做到的最简单的事情。
水是生命之源,我们要爱惜它。
在上述HTML文件中“水是生命之源,我们要爱惜它。”就是输入的普通文字。
显示结果如图2-1所示,页面显示了文字“水是生命之源,我们要爱惜它。”。
图2-1 页面中的文字
文字中一般会包括标题、段落、换行等格式。在HTML中,同样提供了定义标题元素的标签,段落标签和换行标签。下面重点介绍这些标签。
2.1段落标记
首先我们看一个段落的例子。
这是段落1
这是段落2
这是段落3
这是段落4
上述代码浏览效果如图2-2所示。
图2-2 页面浏览效果
段落是用
标签定义的。例如:“
这是一个段落
” 。HTML自动在一个段落前后各添加一个空行。
当需要结束一行,并且不想开始新段落时,使用
标签。
标签不管放在什么位置,都能够强制换行。例如:
This
is a para
graph with line breaks
标签是一个空标签,它没有结束标记。
注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。可以使用注释来解释我们的代码。例如:
注意:我们需要在左括号“
技巧
当我们写下HTML文本的时候,我们不能确知在另外一个浏览器中,这些文本将被如何显示。有人用着大的显示器,有的人用的小一些。每次用户调整窗口大小的时候,文本都将被重新格式化。建议不要在编辑器中写一些空行和空格来协助排版。
HTML将截掉你文本中的多余空格。不管多少个空格,处理起来只当一个。在HTML里面,一个空行也只被当作一个空格来处理。使用空段落
来插入空白行是一个坏习惯,请使用
标签来替代。
2.2标题标记
通常一段文本都会有标题,而标题在显示的时候总是区别于正文文本。在HTML中,我们也可
以使用一些标记来表示标题元素。
标题元素由标签
到
定义。
定义了最大的标题元素,
定义了最小的。例如下面的代码显示六级标题。
Ø
这是一级标题
Ø
这是二级标题
Ø
这是三级标题
Ø
这是四级标题
Ø
这是五级标题
Ø
这是六级标题
HTML自动在一个标题元素前后各添加一个空行。
下面的代码是标题标签和段落标签的综合应用。代码如下。页面浏览效果如图2-3所示。
我爱世界杯
这个火热的六月绝对属于世界杯(World Cup)。从6月9日到7月9日,全球有近20亿人通过各种方式关注这个体育盛会。
世界杯的魅力是无与伦比的。它的影响力远不仅限于体育和经济,还是每一个参赛队伍民族性格和民族文化的延伸:巴西的热情奔放,阿根廷的浪漫和性感。德意志的严谨和耐力,英格兰的绅士与优雅…..
每一个人都有属于自己的世界杯。2006,你找到了属于你的世界杯吗?
图2-3页面浏览效果
2.3格式化文本
文本经常需要加粗、斜体、缩进等,这些都是文本的格式化。HTML提供了一些标签实现文本的格式化。这些标签包括、
、等,下面分别介绍这些标签。
首先我们看一个实例,该实例通过标记设置了文本的格式。实例代码如下。
中华人民共和国万岁(b标记)
中华人民共和国万岁(strong标记)
中华人民共和国万岁(big标记)
中华人民共和国万岁(em标记)
中华人民共和国万岁(i标记)
中华人民共和国万岁(small标记)
中华人民共和国万岁(sub标记)
中华人民共和国万岁(sup标记)
实例显示效果如图2-4所示。
图2-4 页面显示效果
上例中使用的标签的含义如表2-2所示。
表2-2 标记含义
标记
标记含义
指定文本应以粗体渲染
以粗体渲染文本
指定所含文本要以比当前字体稍大的字体显示
强调文本,通常以斜体显示
指定文本应以斜体显示
指定内含文本要以比当前字体稍小的字体显示
说明内含文本要以下标的形式显示,比当前字体稍小
说明内含文本要以上标的形式显示,比当前字体稍小
除了表2-2所示的标记可以用于设置文本的格式外,还有其他的标记同样可以实现一些特殊的功能,下面我们介绍这些标记。
标记
标记用于控制换行和空格,使得浏览器以固定宽度字体显示文本。下面实例演示了
标记的用法。
下面的文本使用了pre标记
for i = 1 to 10
print i
next i
下面的文本之前没有使用pre标记
for i = 1 to 10
print i
next i
页面显示效果如图2-5所示。
图2-5 页面显示效果
从图2-5可以看出
标记能够控制文本的换行和空格。
标记也称为预格式化文本标记。
显示程序代码标记
经常需要在浏览器中显示计算机程序代码,html同样定义了显示程序代码的标记,使用这些标记使得程序代码能够以特殊格式显示。表2-3列出了这些标记以及其含义。
表2-3 显示程序代码标记
标记
标记含义
表示代码
以定宽字体显示文本
以固定宽度字体显示文本
表示代码范例
定义程序变量,通常以斜体显示
下面的实例演示了上述标记的用法,实例的显示效果如图2-6所示。
程序代码范例
Keyboard input 键盘输入
Teletype text打印机字体
Sample text显示代码实例
Computer variable显示程序变量
Note: 以上标记通常用来显示程序代码
表2-6 页面显示效果图
标记标记表示特定信息,如地址、签名、作者、文档信息。
缩写和首字母缩略法
UN
WWW
表示缩写,表示取首字母的缩写词,title属性表示被缩写的文本。
标记
表示文本显示的方向,dir=”rtl”表示文本将从右到左显示。下面的代码显示< bdo >标记的用法。
我们都是中国人
代码显示效果如图2-7所示。
图2-7 页面显示效果
标记
标记表示文本中的一段引用语,下面的代码使用了
标记。
这是引用:
床前明月光,疑是地上霜,举头望明月,低头思故乡。
床前明月光,疑是地上霜,举头望明月,低头思故乡。
标记和标记
标记表示文本已经从文档中删除,标记表示插入到文档中的文本。下面代码演示这两个标记的用法。代码显示效果如图2-8所示。
被删除的文本插入的文本
图2-8 页面显示效果
3超链接
超链接是网页页面中最重要的元素之一。一个网站是由多个页面组成的,页面之间依据链接确定相互的导航关系。
网页中超链接的运用是当今网页设计中必不可少的元素,通过超链接可以使人们在不同网页之间来回转跳,使得网页生动起来。
链接标记和
标记表示超链接的起始或目的位置,由 与 所围的文字、图片等等可以成为一个链接。例如
增加学校
href="/schoolhome/jsp/Manager/SystemManager/AddSchool.html ",herf参数表示链接的网址。
当作为一外部链接时, href 所设定的是该链接所要链到的文件名称,若该文件与此 html 档不是同在一目录需要加上适当的路径,相对绝对皆可。
当作为一内部链接时, href 所设定的是该链接所要连到的同文件内参考点或指定文件的参考点,且不需要包括任何内容,只要加上结束标记 便可以,例如
在上述代码中,there 是参考点,并需于其前加上符号 # 以作识别,参考点由下一个参数 name 事先于文件中埋下。name="hello"
这参数是为文件埋下参考点,作为被链接,不会被显示。所以说制作一个内部链接需要使用两次 链接标记。一个使用参数 name 事先于文件中埋下一参考点,另一个使用参数 href 链接到这个参考点。
target=" right "
设定链接被按了之后所要显示的视窗。可选值为: _blank, _parent, _self, _top, 框架名称。target="框架名称" 运用于框架网页中,若设定则链接结果将显示在“框架名称”的框窗中,框窗名称是事先由框架标记命名。 以下为参数的含义,关于框架的概念将在后面的章节中介绍。
target="_blank" 或 target="new"将链接的内容打开在新的浏览器窗口中。
target="_parent"将链接的内容当成文件的上一个画面。
target="_self"将链接的内容显示在当前窗口中。(默认值)
target="_top"将框架中链接的画面内容,显示在没有框架的视窗中。(即除去了框架)
标记
标记是一个链接基准标记,用以设置文件中所有链接标记的参数默认值。它只能适应于文件的开头部分,即标记
与 之间。
标记设置示例:
href="http://www.microsoft.com/" 设定该网页中所有http文件及图片(包括相对路径链接及 图形标记 等)的默认路径。一般相对路径链接 及 图形标记等是默认以该网页所在的目录作为起点,若依这个例子,该文件中所有链接将会以 http://www.microsoft.com/ 作为起点,若其中有链接如 Back to Main Page ,那么它将会链接到 Microsoft 的首页,这是因为相对路径已给 转成绝对的了。
target="_top" 设定该网页中所有链接被按之后结果所要显示的视窗,这样就不用分别为所有链接加上 target 参数,常应用于框架中。其设定与 链接中 target 参数相同。
4图片标记
页面中插入图片可以起到美化的作用。插入图片的标记只有一个,标记。
称图形标记,主要用来插入图形标记,主要用来插入图片于网页中。
标记的实例如下:
src="/schoolhome/image/new_img/left_menu_logo_kanri.jpg " 表示图片来源,接受 .gif, .jpg 及 .png 格式,前两者通行已久,后者则由 96 年开始发展,png格式图片将取代前两者。若图片文件与该 html文件在同一目录则只需写上图片文件名称即可,否则必须加上正确的路径,相对路径或绝对路径。
属性设置“width=210 height=72”用于设定图片大小,宽度及高度一般采用象素作单位。这两个参数通常设为图片的真实大小,以免失真,若需要更改图片大小最好使用图像编辑工具。
除了上面的width属性和height属性外,还有hspace属性、vspace属性、border属性等其他属性,下面分别介绍这些属性的含义。
属性设置“hspace=5 vspace=5”用于设定图片边沿空白,以免文字或其它图片贴近。hspace是设定图片左右的空间,vspace是设定图片上下的空间,高度采用pixels 作单位。
属性设置“border=0”用于设置图片边框厚度。
属性设置align="top"调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底部、 左右等,可选值:top, middle, bottom, left, right,内定为 botom。
Netscape 还支持 texttop, baseline, absmiddle, absbottom属性,这些属性的含义如下:
texttop 表示图片和文字依顶线对齐,
baseline 表示图片对齐到目前文字行底线值,
absmiddle 表示图片对齐到目前文字行绝对中央,
absbottom 表示图片对齐到目前文字行绝对底部,(绝对底部是指它考虑到比如 y 、g、q 等字的下边)。
属性设置alt="Logo of PenPal Garden" 用以描述该图形的文字,若使用文字浏览器,由于不支持图片,这些文字将会代替图片被显示。若支持图片的浏览器,当鼠标移至图片上该文字也会显示。
2.5表格标记
为了便于组织和管理页面中的其它标记元素以使得页面显示整齐有规律,我们可以使用表格标记。表格标记包括
。
表格是用
标签)。td表示“表格数据”(Table Data),即数据单元格的内容。数据单元格可以包含文本,图像,列表,段落,表单,水平线,表格等等。因此,
这三个标记是定义表格的最重要的标记。标记结束。 标记表示表格列。 下面的实例演示了如何在网页中创建表格。实例代码如下所示,页面的浏览效果如图2-9所示。
1行表格
100 1行3列表格
100 200 300 2行3列表格
100 200 300 400 500 600 表2-9页面浏览效果
在实际应用中,可以通过设置表格的属性来控制表格的显示效果。
属性设置width="210" 用于设置表格宽度,接受绝对值(如 80)及相对值(如 80%)。
属性设置border="0" 用于设置表格边框的厚度,不同浏览器有不同的内定值。
属性设置cellspacing="0"用于设置或获取表格中单元格之间的空间总量。
属性设置cellpadding="0"用于设置或获取介于单元格边框和单元格内容之间的空间总量。
属性设置align="center"用于设置表格的摆放位置(水平),可选值为: left, right, center。
属性设置valign="top"用于设置表格内内容的对齐方式(垂直),可选值为: top, middle, bottom。
属性设置background="myweb.gif" 用于设置表格的背景图片,与 bgcolor 不要同用。
属性设置bgcolor="#cda9f5" 用于设置表格的底色,与 background 不要同用。
属性设置bordercolor="#CF0000" 用于设置表格边框颜色。
属性设置bordercolorlight="#00FF00"用于设置表格边框向光部分的颜色,只适用于 IE。
属性设置bordercolordark="#00FFFF"用于设置表格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。
属性设置cols="2"表示表格列数目,只是让浏览器在下载表格时先画出整个表格而已。
表2-4
属性
含义
align
内容的对齐方式(水平),可选值为: left, center, right
valign
内容的对齐方式(垂直),可选值为: top, middle, bottom
bgcolor
背景颜色
bordercolor
列边框颜色
bordercolorlight
边框向光部分的颜色(只适用于 IE)
bordercolordark
边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效(只适用于 IE)
标记的常见属性如表2-5所示。
表2-5
标记常见属性
属性
属性含义
width
设置单元格的宽度,接受绝对值(如 80)及相对值(如 80%)
height
设置单元格高度
colspan
该单元格跨越的表格列数(相当于多列单元格合并)
rowspan
该单元格跨越的表格的行数(相当于多行单元格合并)
align
内容的对齐方式,可选值为:left, center, right
valign
储存格内容的对齐方式(垂直),可选值为:top, middle, bottom
标记与同样是标记一个单元格,唯一不同的是所标记的单元格中的文字是以粗体出现,通常用于表格中的标题栏目。用它取代的位置便可以,其参数设定和一样。
当然也可以在
所标记的文字加上粗体标记便能达到同样效果。标记标记表示表格的标题,对表格的简单描述。下面的代码示例了标记的用法,页面的显示效果如图2-6所示。
这个表格有标题:
表格标题
100 200 300 400 500 600 图2-6 页面显示效果
6列表标记
HTML支持有序、无序和自定义列表,下面的代码为一个无序列表实例。
An Unordered List:
- Coffee
- Tea
- Milk
下面的代码显示了一个有序列表。
An Ordered List:
- Coffee
- Tea
- Milk
1.无序列表
无序列表是一个项目的序列。各项目前加有标记(通常是黑色的实心小圆圈)。
无序列表以
- 标签开始。每个列表项目以
- 开始。
- Coffee
- Milk
在浏览器中显示如下:
lCoffee
lMilk
无序列表的项目中可以加入段落、换行、图像,链接,其他的列表等等。下面的例子样式了无序列表的不同类型,代码如下。
水果(列表前为圆):
- 苹果
- 香蕉
- 柠檬
- 桔子
水果(列表前为空心圆):
- 苹果
- 香蕉
- 柠檬
- 桔子
水果(列表前为方格):
- 苹果
- 香蕉
- 柠檬
- 桔子
页面显示效果如图2-7所示。
图2-7 页面浏览效果
2.有序列表
有序列表也是一个项目的序列。各项目前加有数字作标记。有序列表以
- 标签开始。每个列表项目以
- 开始。
- Coffee
- Milk
在浏览器中显示如下:
1.Coffee
2.Milk
有序列表的项目中可以加入段落、换行、图像,链接,其他的列表等等。
下面的例子显示了有序列表的不同类型。HTML代码如下:
水果(列表前为数字):
- 苹果
- 香蕉
- 柠檬
- 桔子
水果(列表前为大写字母):
- 苹果
- 香蕉
- 柠檬
- 桔子
水果(列表前为小写字母):
- 苹果
- 香蕉
- 柠檬
- 桔子
水果(列表前为大写罗马数字):
- 苹果
- 香蕉
- 柠檬
- 桔子
水果(列表前为小写罗马数字):
- 苹果
- 香蕉
- 柠檬
- 桔子
页面显示效果如图2-8所示。
图2-8 页面显示效果
3.自定义列表
自定义列表不是一个项目的序列,它是一系列条目和它们的解释。
有序列表以
- 开始,自定义列表的定义以
- 开始。
- Coffee
- Black hot drink
- Milk
- White cold drink
在浏览器中显示如图2-9所示。
图2-9 页面浏览效果
自定义列表的定义(标签
- )中可以加入段落、换行、图像,链接,其他的列表等等。
Øbody标记是html文档中最基本的标记。
Ø在html中文本可以显示为不同的格式,这些都可以通过不同的标记来实现。
Ø表格是html中最重要的元素之一,创建表格最重要的标记包括
等。 Ø超链接标记用于设置文字和图片的链接。
Ø使用列表能够使得内容组织更加规范,在HTML中,我们可以使用无序列表、有序列表以及自定义列表。
1.解释
等标记的含义2.使用表格在网页中显示10个同学的姓名以及他们语文、数学、英语的考试成绩
请添加内容
html语言中网页主体标记是,HTML 网页主体标记相关推荐
- c语言中使用的字符常量其起止标记符是,2021国家开放大学电大本科《C语言程序设计》期末试题及答案(试卷号:1253)...
<2021国家开放大学电大本科<C语言程序设计>期末试题及答案(试卷号:1253)>由会员分享,可在线阅读,更多相关<2021国家开放大学电大本科<C语言程序设计& ...
- HTML语言中代表网页标题的标签是,html标题标记 在html中,标题标签一共有几级?
html文件添加标题使用什么标记 html是静态网页主要的标记如下: 注释标记 在此标记内的内容网页是不显示的 HTML的标题的代码是什么? html中标题的代码是 新建html文档,在html文档中 ...
- html语言中的转行标记是6,网页设计与制作模拟试题
全国2004年7月高等教育自学考试网页设计与制作试题 网页设计与制作模拟试题 一. 单项选择题(每空1分,共10分) 1.目前在Internet上应用最为广泛的服务是( ). A.FTP服务 B.WW ...
- html语言中 头元素的标记是,HTML元信息标记
meta元素提供的信息是用户不可见的,它不显示在页面中,一般来定义页面的信息名称.关键字.作者等.在HTML中,mata标记不需要设置结束标记,在一个尖括号内就是一个meta内容,而在一个HTML头页 ...
- html语言中关于文字标记有哪些,HTML的lang标记
很多网站中,都会对html标签设置一个lang属性,用来指定网页采用的语言类型.英文网站中,这个值通常是en,即,而在中文网站中,这个值就变得光怪陆离了.在以前,最常见的两个设置方式是和,那么,这究竟 ...
- c语言中使用的字符常量 其起止标记,C Primer Plus学习笔记(三)- 字符串和格式化输入/输出...
从一个简单的例子开始 #include int main() { char name[10]; printf("Input Your Name:\n"); scanf(" ...
- html中的单元格标记,什么是html语言中的单元格标记
什么是html语言中的单元格标记 发布时间:2020-07-16 09:56:39 来源:亿速云 阅读:66 作者:Leah 今天就跟大家聊聊有关什么是html语言中的单元格标记,可能很多人都不太了解 ...
- html语言中空行标记,HTML代码中的空格和空行的实例操作
代码中空格和空行的操作方法是怎样的?我们要在代码中标记换行符或者元素标记,才能被浏览器识别为空格或者空行,现在爱站技术频道就随爱站技术频道来看看HTML代码中的空格和空行的实例操作. 例子1:(文本内 ...
- frontpage中html编辑,FrontPage教程编辑网页
现在进入FrontPage.单击任务栏"开始"按钮,选择"程序"选项,单击"Microsoft FrontPage"选项就可以了. 可能你会 ...
- 3c是合法的C语言常量吗,下面不是 C语言中整型常量的是( ). A:03 B:12 C:059 D:0xA8...
下面不是 C语言中整型常量的是( ). A:03 B:12 C:059 D:0xA8 更多相关问题 诉讼时效因当事人一方提出要求而中断,下列哪一情形不能产生诉讼时效中断的效力? ( )(司考) 1. ...
最新文章
- 60颗卫星被五手火箭送上天!马斯克疯狂的卫星互联网计划不远了
- Oracle数据库中的优化方案
- 【Python】如何学好Python
- python列表多重赋值
- CSS3中的变形处理
- 在线场景感知:图像稀疏表示-ScSPM和LLC总结(lasso族、岭回归)
- C#的变迁史06 - C# 4.0 之并行处理篇
- linux开发板作为蓝牙音箱,USB 蓝牙适配器在ARM 开发板下的使用
- jre6-java运行环境_Java运行环境(JRE8)64位 1.8.0.25
- 2018全国计算机音乐大赛一等奖,2018全国数字音乐大赛总决赛精彩无限!小学员的技能震惊评委!...
- 晶圆级封装行业调研报告 - 市场现状分析与发展前景预测
- 从华为“流程与IT管理部”看IT部门定位
- Maple 热工计算
- 自定义Xshell颜色主题Color Schemes
- 【CF613D】Kingdom and its Cities(虚树,动态规划)
- 【数据分析】SQL面试题整理
- systemUI之statusBar
- 怎么下载网页上的视频
- 号称硬核厨师的美食作家,让千万Z世代爱上了做菜!
- yapi中mock jsonp接口响应的方法