A第1章 HTML超文本标记语言120OK.docx
- 文档编号:11851304
- 上传时间:2023-04-06
- 格式:DOCX
- 页数:42
- 大小:503.99KB
A第1章 HTML超文本标记语言120OK.docx
《A第1章 HTML超文本标记语言120OK.docx》由会员分享,可在线阅读,更多相关《A第1章 HTML超文本标记语言120OK.docx(42页珍藏版)》请在冰豆网上搜索。
A第1章HTML超文本标记语言120OK
第一篇HTML
HTML语言是网页设计的通用语言。
本章将简要介绍HTML语言的结构和各种标记的功能和用法。
学习本章以后,应能熟练地完成HTML文档的建立、保存和打开操作,能运用HTML设计简单的网页。
1.1HTML文档的建立、保存与打开
HTML(HypertextMarkupLanguage,即超文本标记语言),是用于描述网页文档的通用语言。
本节将介绍HTML文档的建立、保存、打开与浏览的方法。
1.1.1HTML的功能和特点
1.HTML文档的功能
HTML目前被广泛用于网页设计中。
用其他网页设计语言编写的网页文件,都转换为HTML程序以后,浏览器才能识别,才能还原成在浏览器上看到的网页。
HTML语言作为一种网页编辑语言,易学易懂。
其主要功能如下:
(1)格式化文本。
如设置标题、字体、字号、颜色,设置文本的段落、对齐方式等。
(2)建立列表。
把信息用一种易读的方式表现出来。
(3)建立超链接。
只需用鼠标单击,就可转到指定的目标。
(4)建立表格。
表格提供了信息的简捷明了的显示方式,还可以设定整个网页的布局。
(5)加入多媒体。
可在网页中加入图像、音频、视频、动画,并设定播放的时间和次数。
(6)添加交互式表单。
2.HTML文档的组成
HTML文件是用于显示网页的,它由内容和标记两部分组成。
内容就是要在网页上显示的字符、图片、视频、声音、超链接等,标记(Tag)用来规定这些内容显示方式和布局,它告诉浏览器如何显示网页中的内容(如:
文字如何处理,画面如何安排,图片如何显示等)。
网页显示的过程是浏览器接收到HTML文件中,按顺序阅读HTML文件,然后解释标记符,并按标记符规定的显示方式在浏览器上显示网页的内容。
不同的浏览器,对同一标记符可能会有不完全相同的解释,因而同一个HTML文件在不同的浏览器上可能会有不同的显示效果。
1.1.2HTML的建立
HTML之所以称为超文本标记语言,是因为文本中包含了“超级链接”点。
超级链接是一种URL指针,通过点击它,可使浏览器方便地获取新的网页。
这也是HTML获得广泛应用的最重要的原因之一。
HTML文件既然是文本文件,那么任何文本编辑器都可以用作编辑HTML的工具。
HTML常用的编辑器大体可以分为两种,
1.基本文本编辑软件。
使用WINDOWS自带的记事本或写字版都可以编写。
不过存盘必须使用.htm或.html作为扩展名,表明建立的是HTML文件。
2.所见即所得软件。
他们的典型代表就是FrontPage和Dreamweaver,p这也是当前使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,因为网页的HTML代码是自动产生的。
1.1.3HTML文件的结构
以下是一个简单的HIML文件。
文件名为HT1-1-1_strc,运行结果如图1.1.1所示。
欢迎进入天天音乐网
我们以这个HIML文档为例说明HTML中的标记、属性和HIML文档的基本结构。
1.HIML文档的结构
(1)整个HIML文档都以开始,并以结束。
标记处于文档的最前面,表示HTML文档的开始,即浏览器从开始解释,直到遇到</HTML>为止。
(2)HIML文档由头和体两部分组成。
头部分以
标记开始,以标记结束。体部分由
标记开始,以标记结束。(3头部分包含文档的标题,标题以
“标题”内容显示的,多页的上端。
标题为搜索提供了关键字。
头部分在HTML文件中不是必需的。
(4体部分是网页的正文,包含需要在网页中显示的文本、图形、链接、表格和表单等。
2.HTML文件主体
HTML文件主体是网页的核心,网页中真正显示的内容都包含在主体中。
基本语法:
简介如下:
HTML的颜色表示分为两种:
(1)以命名方式定义常用颜色,如red、black等。
HTML中定义常用的16种颜色名字是:
aqua(水绿)、black(黑)、blue(蓝)、fuchsia(紫红)、gray(灰)、green(绿)、lime(浅绿)、maroon(褐)、navy(深蓝)、olive(橄榄)、purple(紫)、red(红)、silver(银)、teal(深青)、white(白)和yellow(黄)。
(2)以RGB值表示,用“#RRGGBB”表示。
其中,RRGGBB都代表达式位十六进制,RR、GG、BB分别表示红、绿、蓝三元色,每种颜色由00~ffaqw都有256种彩度,故三原色可以混合成256×256×256=1670万种颜色。
例如:
白色的组成是ffffff、红色是ff0000,绿色是green=00ff00,蓝色是0000ff。
1.1.4关于HTML文档的格式约定
1.标记与属性
(1)标记的格式
<标记名>被作用的对象</标记名>
标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;标记元素忽略大小写,即其作用相同;例如
……,
…,…都是标记。(2)标记中的属性
属性用来说明被标记作用的对象的特征。
加入属性以后,标记的格式应是:
<标记名属性1=“属性1的值”属性2=“属性2的值”……>
例如:
中的属性size=“7”color=“red”用来定义字符的大小和颜色。
各个属性项的次序不限,属性间用空格分开,属性值用引号括起来。
2.关于HTML文档的格式约定
(1)文本标记语言源程序的文件扩展名默认使用htm或html。
在使用文本编辑器时,注意修改扩展名。
而常用的图像文件的扩展名为gif和jpg。
(2)HTML源程序为文本文件,其列宽可不受限制,即多个标记可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);对文件中的空格通常也不按源程序中的效果显示。
完整的空格可使用特殊符号“ ”表示(字母必须小写);表示文件路径时使用符号“/”分隔。
(3)通常在书写HIML文档语句前添加若干个空格,成锯齿形书写语句,以使文档结构清晰,便于阅读。
(4)标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符,而不能使用全角字符。
(5)HTML注释由惊叹号表示,注释内容由符号结束。
注释内容可插入文本中任何位置。
任何标记若在其最前插入惊叹号,即被标识为注释,不予显示。
1.1.5HTML文件的保存
保存HTML文件的步骤如下:
①文件编辑完成以后,选菜单命令“文件/另存为”,则弹出“另存为”对话框,如图1.1.1所示。
②在对话框中输入文件名,在文件名后加上扩展名“.html”或“htm”。
保存类型为文本文件。
③按“确定”钮,则 所编文档以指定文件名存盘。
1.1.6HTML文件的打开
打开HIML文档有两种方式,一是打开为网页,即运行网页;二是打开为文本文件,供编辑用。
1.打开为网页,
打开资源管理器,找到网页文件名后,右击文件名,在弹出的快捷菜单中选“打开”,则所选文件以网页形式打开。
2.打开为文本文件
打开资源管理器,找到网页文件名后,右击文件名,在弹出的快捷菜单中选“打开方式/写字板”或选“打开方式/写字板”,则所选文件以文本形式打开。
1.2分隔标签
分隔标签用于实现网页对象的分隔。
分隔标答有换行标记
,段落标记
,水平线标记
.
1.2.1换行标记
要让文字换行,可以使用换行标记
,换行标记
是单标记。
【例1.2.1】换行标记的例。
文件名为HT1-2-1_br)。
运行结果如图1.2.1所示。
1
2
3
4
5黄鹤楼送孟浩然之广陵
6
7
8故人西辞黄鹤楼,
烟花三月下杨州。
9孤帆远影碧空尽,
唯见长江天际流。
10青山横北郭,白水绕东城,
11此地一为别,孤蓬万里征。
12浮云游子意,落日故人情
13挥手自
去,萧萧斑马鸣。
14
15
由本例可见,第8、9行虽然写成一行,但仍在加了
标记的位置换行;第10~13行,既使分行写,但由于没有
标记,所以仍然显示为一行。
1.2.2段落标记
段落标记
除了实现换行外还在标记处添加一个空行。
段落标记
是单标记。
基本语法:
【例1.2.2】换段的例。
文件名为HT1-2-2_p,运行结果如图1.2.2所示。
大江东去,浪淘尽千古风流人物。
故垒西边,人道是三国周郎赤壁。
乱石穿空,惊涛拍岸,卷起千堆雪。
江山如画,一时多少豪杰。
例中,各行间添加了一个空行。
1.2.3水平线标记(hr)
水平线用于段落与段落之间的分隔,可使文档结构清晰,层次分明,排版整齐,便于阅读。
水平线自身有很多属性,如宽度、高度、颜色等。
水平线标记属于单标记。
基本语法:
align:
可以设置水平线居中、居左和居右对齐,默认为居中对齐。
【例1.2.3】添加水平线。
文件名为HT1-2-3_hr,运行结果如图1.2.3所示。
黄鹤楼送孟浩然之广陵
故人西辞黄鹤楼,
烟花三月下杨州。
孤帆远影碧空尽,
唯见长江天际流。
例中,第8语句行用于画一条长350,宽4,绿色的水平线。
1.3排版与列表标记
排版标签用于控制网页对象的布局。
常用标记有预格式化标记
缩排标记和居中标记等。 1.3.1预格式化标记
所谓预格式化,就是保留文字在源代码中的格式。
浏览器在显示
标注的内容时,会完全按照原来的文本格式显示。例如,原封不动地保留文档中的空白、空格、换行、对齐、制表符等。
基本语法:
文字内容</Pre>【例1.3.1】保留原排版格式。
文件名为HT1-3-1_pre,运行结果如图1.3.1所示。
1
2
保留原格式_HT1-3-1_pre 3
4
5相思
6王维
7红豆生南国,
8春来发几枝?
9愿君多采撷,
10此物最相思。
11
12
网页中保留了第5~10语句原有的格式。
1.3.2.居中标记
要使段落或文字居中对齐,除了可以使用align属性中的center之外,还可以使用专门的居中标记。
基本语法:
文字内容 1.3.3
缩排标记功能:
设定某段落是否要缩排。
【例1.3.2】缩排的例。
文件名为HT1.3.2_blockquote,运行结果如图1.3.2所示。
缩排HT1.3.2_blockquote 王小红订购了三本书:
Dreamweaver8
Flash8
ASP.NET程序设计
1.3.4
列表标记
列表分为两种类型:
一种是有序列表,用编号来标记项目的顺序;另一种是无序列表,用项目符号来标记项目。
1.有序列表
有序列表中的项目采用数字或英文字母开头,通常各个项目之间有先后顺序,主要使用
和
- 两个标记以及type和start两个属性;使用
作为有序列表的声明,
- 作为每个项目的开始。
基本语法:
- 项目1
- 项目2
type:
定义有序列表序号类型,默认使用数字序号。
可以定义的属性值有:
1、a、A、i和I。
例如type=“A”,则序号按大写字母A、B、C……排列。
start:
定义序号计数的起始值。
例如数字默认起始值从1开始,小写罗马数字默认起始值从i开始。
若start=“f”,则小写字母序号从f开始。
2.无序列表
在无序列表中,通常使用一个项目符号作为每个列表项的前缀。
无序列表主要使用
、
- 、
、
- 、
- 几个标记和type属性。
在无序列表中,使用
作为无序列表的声明.
- 作为每个项目的开始。
基本语法:
- 项目l
- 项目2
type定义了无序列表的项目符号,属性值可以定义为disc、circle和square,在IE浏览器中显示的项目符号效果分别为●、○和口。
默认情况使用disc项目符号。
3.定义列表
定义列表
标记是一种两个层次的列表,常用于解释名词的定义。
名词为第一层次,解释为第二层次,并且不包含项目符号。
定义列表也称为字典列表,因为它与字典有相同的格式。
每个列表项带有一个缩进的定义字段,就好像字典对文字进行解释一样。
基本语法:
- 名词l
- 解释1
- 名词2
- 解释2
:
定义列表的声明。
- :
作为名词的标题。
- :
用来解释名词。
【例1.3.3】有序列表的例。
在要显示编号的表列前加上
- 标记,可自动将表列加入编号。
如果将
- 换成
则项目符号用“.”表示。
文件名为HT1.3.3_ol,运行结果如图1.3.3(左)所示。
列表标记HT1-3-3_OL
《HTML程序设计》分为四部分
- 第一部分
介绍了HTML的基础知识
- 第二部分
介绍了常用标记
- 第三部分
介绍了表格生成标记
- 第三部分
介绍超链接
1.4文字标记
1.4.1文字标记
标记用来设置或更改页面中的字体、字号、字型和颜色。
基本语法:
文字内容</FONT> Face:
字体的属性,指字体名。
size:
文字的字号,即文字的大小。
其属性值是1~7,数字大字就大。
也可以用+n、-n表示从当前字号增大n级或缩小n级。
color:
文字的颜色,其值为“#RRGGBB”,RR、GG、BB都是16进制数。
【例1.4.1】标记的应用。
文件名为HT1.4.1_FONT,运行结果如图1.4.1所示。
定义字号_HT1.4.1_Fomt 这是一本
HTMI肥榧_谢谢购买! !
!
【例1.4.2】字号定义(HT1-4-2_size)文件名为HT1-4-2_size,运行结果如图1.4.2所示
字号—HT1-4-1_size
size=l大江东去
size=2大江东去
size=3大江东去
size=4大江东去
size=5大江东去
ize=6大江东去
size=7大江东去 【例1.4.3】设置字符的颜色。
文件名为HT1-4-3_fontcolor,运行结果如图1.4.3所示。
Font的字体颜色属性_HT1-4-3_fontcolor
才饮长沙水
又食武昌鱼
万里长江横渡
极目楚天舒
【例1.4.4】设置字型,设置标记是粗体、斜体及下划线标记。
文件名为HT1.4.4_BIU,运行结果如图1.4.4所示。
Font的字型HT1.4.5_BIU 正常文字
这是粗体字
这是斜体字
给文字加下划线
对文字综合使用粗体、斜体、下划线标
1.4.2标题标记
设定标题的文字大小,从
到
总共有六级。
标题自占一行,不必加
可自动换行。【例1.4.5】显示标题字。
文件名为HT1.4.5_hn,运行结果如图1.4.5(左)所示
Font的字型HT1.4.5_hn
标题1
标题2
标题3
标题4
标题5
标题6
标题可用属性align设置在页面中的对齐方式,属性值有left(左对齐)、center(居中)、right(右对齐),默认为左对齐。
例如:
例如如下语句设置标题字为2级,蓝色居中:
标题 1.5表格
在HTML页面中,表格是用于排版的最佳手段之一,一般布局比较复杂的页面都使用表格进行排版。
1.5.1表格的基本语法
要产生表格,需综合使用
、
以及 这三个标记。 和
表示表格的开始与结束和 表示表中一行的开始与结束和 表示行中一列的开始与结束表格的基本语法:
列1 列2<,td>--- 列1 列2<,td>--- ---
格式中,表的宽度,单位为像素或百分比,其他宽度、高度、间距的单位都是像素。
background:
表格的背景图像,可以使用GIF或JPEG图片文件。
cellspacing:
单元格之间的间距,单位为像素。
对齐方式的值为CENTER,LEFT、RIGHT。
2.标题
可以通过
标记为表格添加标题,且可设置align、valign属性的值控制标题文字的位置。 基本语法:
表格标题 格式中,valign的值有top(上方)或bottom(下方)。
3.表头
表头是指表格的第一行,其中的文字可以实现居中并且加粗显示,通过
标记实现。 基本语法:
…</th
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- A第1章 HTML超文本标记语言120OK HTML 超文本 标记 语言 120 OK
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。关于本文copyright@ 2008-2022 冰点文档网站版权所有
经营许可证编号:鄂ICP备2022015515号-1