第2-3讲-html语言

信息管理系朱琳第2-3讲HTML语言基础信息管理系朱琳第2-3讲HTML语言基础[知识目标]了解HTML文件的基本结构掌握HTML中文本的编辑及图像的语法掌握HTML中各种设置超级链接的语法掌握HTML中表格和框架的基本语法[能力目标]掌握进行文本及图像的编辑操作掌握创建各种超级链接的操作能够编写简单的HTML网页掌握HTML文件中表格和框架的使用信息管理系朱琳第2-3讲HTML语言基础•2-3.1HTML概述•2-3.2-3文本的编辑•2-3.3图像编辑•2-3.4建立超链接•2-3.5表格与框架•本讲小结信息管理系朱琳2-3.1HTML概述•2-3.1.1HTML简介•2-3.1.2-3HTML语法结构信息管理系朱琳2-3.1.1HTML简介•HTML（HyperTextMarkupLanguage）又称超文本标识语言，是一种标识性的语言，是网页设计的最初语言。文件的扩展名:“html”或“htm”。•例2-3.1简单的HTML文档•html•head•title.长春欢迎您！/title•/head•body•这里是长春悠游网，我们带您畅游长春！•/body•/html•由“”和“”组成的就是标记。在HTML语言中标记分“单标记”和“围堵标记”。信息管理系朱琳2-3.1.1HTML简介•1．围堵标记•格式：•标记……/标记•2-3．单标记•格式：标记•只有起始标记，没有结束标记。最常用的单标记是br,它表示段内换行。•3．标记属性•格式：标记属性1属性2-3属性3……•各属性间无前后顺序，属性也可省略，当省略属性时取标记的默认值。信息管理系朱琳2-3.1.2-3HTML语法结构•HTML文档的基本结构：•HTML文件开始•HEAD标头区开始•TITLE.../TITLE标题区•/HEAD标头区结束•BODY文件主体内容开始•文件主体内容……•/BODY文件主体内容结束•/HTML文件结束•其中HTML/HTML之间表示这是个网页文件，是必有的标记。信息管理系朱琳2-3.2-3文本的编辑•2-3.2-3.1段落标记•2-3.2-3.2-3文本标记•2-3.2-3.3标题显示等级•2-3.2-3.4列表信息管理系朱琳2-3.2-3.1段落标记•1．段落（P）•基本语法格式为：•palign=left/center/right•其中参数align用于设定段落的位置是靠左、靠右还是居中。默认值是靠左；除align之外p还有其他参数如class。class参数是可选项，如果没有将按照默认值显示。•2-3．换行br•单标记，放在一行的末尾，可以在一个段落内实现文本的强制换行，设置标记后面的文本字、图像和表格等内容显示于下一行。信息管理系朱琳2-3.2-3.2-3文本标记•1．字体标记font•其基本语法格式为：•fontface=？size=？color=？…/font•Size：设置字体的显示字号，范围是从“1～7”，其中“3”是默认值。•Color：设置文本的颜色，值可以是颜色名（英文如red代表红色）或颜色的十六进制代码（#000000代表黑色，#FFFFFF代表白色）。•Face：设置文本显示的字体，值为字体的名称。•在文本的标记中还有很多常用的标记，比如表示字体效果的，b(黑体)，i（斜体），u（加下划线）。信息管理系朱琳2-3.2-3.2-3文本标记•2-3．特殊字符•HTML中除了我们上面学的的一些标记外，还有一些我们常用的特殊字符比如“”，这些特殊字符在HTML语言中都有对的转义符，常用的转义符与特殊字符参见下表：HTML代码显示结果说明<小于号或显示标记>大于号或显示标记&&可用于显示其它特殊字符"引号®®注册©©版权™™商标 不断行的空格信息管理系朱琳2-3.2-3.2-3文本标记•3．水平线标记hr•水平线是在网页上划出一条水平的分割线，用hr来标记水平线。语法格式为：•hralign=left/center/rightnoshadesize=？width=？color=？•Size：设置水平线的高度，以像素为单位。•Color：设置水平线的颜色。•Width：设置水平线的宽度，单位是像素或百分比，像素是绝对大小，不会随着程序窗口的大小而改，百分比是相对于程序窗口水平线所占的比例，会随着程序窗口的大小而改变。•Align：设置水平线的对齐方式。对齐方式有左对齐，居中，右对齐三种。信息管理系朱琳2-3.2-3.3标题显示等级•语法格式为：•Hn…/Hn•n：表示不同级别的标题，n值可以是1-6中的任意数字，其中1表示的标题字体最大。另外，可以用align属性设置对齐方式，常用的有左对齐，居中，右对齐三种对齐方式。信息管理系朱琳2-3.2-3.4列表•在HTML中，列表常用的有“有序列表”和“无序列表”。•1．有序列表OL•基本语法结构为：•oltype=nstart=？•li项目1•li项目2-3•……•li项目n•/ol信息管理系朱琳2-3.2-3.4列表•1．有序列表OL•Type：设置列表的序号类型，常用序号如下：•n=1：用数字作为序号。•n=A；用大写字母作为序号。•n=a：用小写字母作为序号。•n=I：用大写罗马数字作为序号。•n=i：用小写罗马数字作为序号。•Start：为可选参数，用于设置序号的起始数值。如不添加“start”则从每类序号的第一个序号开始。信息管理系朱琳2-3.2-3.4列表•2-3．无序列表•基本语法结构为：•ultype=n•li项目1•li项目2-3•……•li项目n•/ul•Type:设置符号形状，有实心圆、小正方形、空心圆三种，具体如下：•n=disk：符号为实心圆。•n=square：符号为正方形。•n=circle：符号为空心圆。信息管理系朱琳2-3.3图像编辑我们在网页上经常会浏览图像，适当使用图像可以增加网页的美观。在网页最常用到的是插入图像和设置背景图像。•2-3.3.1插入图像•2-3.3.2-3使用背景图像信息管理系朱琳2-3.3.1插入图像•1．语法格式：•imgsrc=“url”，单标记•Src：指明要添加的图像所在的具体路径和文件名。路径可以是相对路径，也可以是绝对路径。例：imgsrc=images/ball.gif。•绝对路径：完整的描述文件位置的路径就是绝对路径。对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置。•相对路径：所谓相对路径,顾名思义就是当前文档与目标的相对位置。例src=1.bmp.信息管理系朱琳2-3.3.1插入图像•2-3．图像的属性•除了“src”以外，img还有其他属性，可以定义图像的对齐方向，与周围元素的距离等，各属性及作用见表2-3.2-3。表2-3.2-3图像属性列表名称作用border设定图像的边框vspace设定图像、文字与图像上下之间的间隔hspace设定图像、文字与图像左右之间的间隔width调整图像的宽度height调整图像的高度alt当浏览器无法显示图像时，会显示出alt属性所设定的文字信息管理系朱琳2-3.3.2-3使用背景图像•语法格式为：•bodybackground=“url”信息管理系朱琳2-3.4建立超链接•2-3.4.1建立超链接•2-3.4.2-3使用书签•2-3.4.3标记新窗口和基准链接信息管理系朱琳2-3.4.1建立超链接•建立超链接的标记是a，语法格式为：•ahref=“url”超链接标识/a•url：指明链接目标的具体路径和文件名。•超链接标识：是网页中链接的载体，可以是文字或图像等页面元素，用户点击它就会跳到超链接的目标位置。信息管理系朱琳2-3.4.2-3使用书签•１．定义书签•在HTML中，首先要定义书签，然后才在链接使用。定义书签的语法格式为：•aname=”书签名”•书签名不能用中文，只能用英文和数字。•2-3．使用书签链接•其链接的格式为：•ahref=”#书签名”超链接标识/a•#与书签名之间不能有空格。信息管理系朱琳2-3.4.3标记新窗口和基准链接•1．标记新窗口（target）•“target=”_blank””，是链接标记的一个参数。语法格式为：•ahref=“url”target=_blank超链接标识/a•当点击链接载体的，就会在新窗口打开链接目标。•2-3．基准链接base•base标记是单标记，禁止使用结束标记，可以改变文件中所有链接标记的参数默认值。它只能位于文件的开头部分，即标记head与/head之间。语法格式为：•basehref=“url”信息管理系朱琳2-3.5表格与框架•2-3.5.1建立表格•2-3.5.2-3表格属性•2-3.5.3建立框架•2-3.5.4框架属性信息管理系朱琳2-3.5.1建立表格•表格标记有table、th、tr和td四个，他们的具体含义是：•table/table:定义表格,是表格必须的元素•th/th：定义标题单元格，在这个单元格中的文字将用粗体表示。•tr/tr：定义表格中的行。•td/td：定义单元格，使用td标记一定要放在tr标记内部。•上述标记中，th/th可以省略，其他三个是必须的。具体应用见例2-3.12-3。•Table标记中可以添加属性和参数，其中border，用于设置表格的边框宽度，值为大于等于“0”的整数，当值为“0”，在浏览器中显示无边框表格，无边框表格是网页布局最主要的手段。信息管理系朱琳2-3.5.2-3表格属性•除了border外，常用的表格属性参数有：•tablecellspacing=？：定义单元格之间的距离，值为大于等于“0”的整数，单位是像素，“0”表示没有间距。•tableCellpadding=？：定义单元格内的文字或其他元素到边框的距离,值为大于等于“0”的整数，单位是像素，“0”表示没有距离。•tableheight=？：定义表格的高度，值有两种单位，一是像素，表示表格高度为固定大小，一是百分比表示表格占据整个网页的高度百分比。•tablewidth=？：定义表格的宽度，与高度一样有像素和百分比两种单位。•tablebordercolor=？：定义表格边框的颜色。•tablebgcolor=？：定义表格的背景色信息管理系朱琳2-3.5.3建立框架•1．框架页的基本结构•html•head•title…/title•/head•noframes…/noframes•frameset•framesrc=url•framesrc=url•……•/frameset•/html•noframes…/noframes：标记一个普通的HTML文档，用于在不支持框架的浏览器中显示。•frameset：用于定义分割窗口，可以设置窗口的分割方式及是否显示框架边框等。•frame用于设置每个区域显示的内容，每个URL值指定一个事先己制作好的文件。信息管理系朱琳2-3.5.3建立框架•2-3．建立框架•（1）建立纵向框架•建立纵向框架的基本语法为：•framesetcols=？•Cols：设置垂直分割窗口，用“，”分隔，它的值可以是像素值或者是百分比，代表对应的子窗体占屏幕窗口的大小。如要将屏幕分割成三个子窗口，其中两个都占整个窗口的30%，那么只给开始的两个窗口赋值。语句为framesetcols=30%,30%,*，*代表框架剩余的部分分给最后一个子窗口，当然也可以写成framesetcols=30%,30%,30%。信息管理系朱琳2-3.5.3建