第二章 HTML.ppt

Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,第二章,HTML语言,主要内容,1.,HTML,文档的建立、保存与打开,2.,各种标签的使用,一,.,HTML,文档的建立、保存与打开,HTML,（,Hypertext Markup Language,，即超文本标记语言），,是用于描述网页文档的通用语言,HTML,语言作为一种网页编辑语,言，易学易懂。,1.1 HTML,的功能和特点,1,HTML,文档的功能,(1),格式化文本。如设置标题、字体、字号、颜色，设置文本的段落、对齐方式等。,(2),建立列表。把信息用一种易读的方式表现出来。,(3),建立超链接。只需用鼠标单击，就可转到指定的目标。,(4),建立表格。表格提供了信息的简捷明了的显示方式，还可以设定整个网页的布局。,(5),加入多媒体。可在网页中加入图像、音频、视频、动画，并设定播放的时间和次数。,(6),添加交互式表单。,2.HTML,文档的组成,HTML,文件是用于显示网页的，它由,内容,和,标记,两部分组成。,内容,就是要在网页上显示的字符、图片、视频、声音、超链接等。,标记,（,Tag,）用来规定这些内容显示方式和布局，它告诉,浏览器,如何显示网页中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。,1.2 HTML,文档的建立,HTML,常用的编辑器大体可以分为两种：,1,基本文本编辑软件。使用,WINDOWS,自带的记事本或写字版都可以编写。不过存盘必须使用,.,htm,或,.html,作为扩展名，表明建立的是,HTML,文件。,2,所见即所得软件。他们的典型代表就是,FrontPage,和,Dreamweaver,这也是当前使用最广泛的编辑器，完全可以一点不懂,HTML,的知识就可以做出网页，因为网页的,HTML,代码是自动产生的。,1.3 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,分别表示红、绿、蓝三元色，每种颜色由,00ffaqw,都有,256,种彩度，故三原色可以混合成,256256256=1670,万种颜色。例如：白色的组成是,ffffff,、红色是,ff0000,，绿色是,green=00ff00,，蓝色是,0000ff,。,1.4 HTML,文档的保存,保存,HTML,文件的步骤如下：,1,、文件编辑完成以后，选菜单命令“文件另存为”，则弹出“另存为”对话框,如图,1.1.1,所示。,2,、在对话框中输入文件名，在文件名后加上扩展名“,.html”,或“,htm,”,。保存类型为文本文件。,3,、按“确定”钮，则所编文档以指定文件名存盘。,1.5 HTML,文档的打开,一是打开为网页，即运行网页；,二是打开为文本文件，供编辑用。,1.6 HTML,标签格式的约定,（,1,）标记的格式,被作用的对象,标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同；例如,都是标记。,（,2,）标记中的属性,属性用来说明被标记作用的对象的特征。加入属性以后，标记的格式应是：,例如：,欢迎进入天天音乐网,中的属性,size=“7”color=“red”,用来定义字符的大小和颜色。各个属性项的次序不限，属性间用空格分开，属性值用引号括起来。,二、各种标签的使用,1,、分隔标签,分隔标签用于实现网页对象的分隔。分隔标签有换行标记,，段落标记,，水平线标记,.,1.1,换行标记,换行标记,是单标记。,换行,_HT1-2-1 ,黄鹤楼送孟浩然之广陵,唐,.,李白,故人西辞黄鹤楼,烟花三月下杨州。,孤帆远影碧空尽，,唯见长江天际流。,青山横北郭,白水绕东城，,此地一为别，孤蓬万里征。,浮云游子意，落日故人情,挥手自去，萧萧斑马鸣。,1.2,段落标记,段落标记,除了实现换行外还在标记处添加一个空行。段落标记,是单标记。,基本语法：,段落内容,例：,换行,HT1-2-2,大江东去，浪淘尽千古风流人物。,故垒西边，人道是三国周郎赤壁。,乱石穿空，惊涛拍岸，卷起千堆雪。,江山如画，一时多少豪杰。,1.3,水平标记,水平线用于段落与段落之间的分隔，可使文档结构清晰，层次分明，排版整齐，便于阅读。水平线自身有很多属性，如宽度、高度、颜色等。水平线标记属于单标记。,基本语法：,align:,可以设置水平线居中、居左和居右对齐，默认为居中对齐。,例：,画线,_HT1-2-3 ,黄鹤楼送孟浩然之广陵,唐,.,李白,故人西辞黄鹤楼,烟花三月下杨州。,孤帆远影碧空尽，,唯见长江天际流。,2,、文字标签,2.1,文字标记,标记用来设置或更改页面中的字体、字号、字型和颜色,基本语法：,文字内容,Face,：字体的属性，指字体名。,size,：文字的字号，即文字的大小。其属性值是,17,，数字大字就大。也可以用,+n,、,-n,表示从当前字号增大,n,级或缩小,n,级。,color:,文字的颜色，其值为“,#RRGGBB”,RR,、,GG,、,BB,都是,16,进制数。,例：,定义字号,_HT1.4.1_,Fomt,这是一本,HTML,书，谢谢购买！,例：字号定义,字号,HT1-4-1_size ,size=l,大江东去,size=2,大江东去,size=3,大江东去,size=4,大江东去,size=5,大江东去,ize,=6,大江东去,size=7,大江东去,例：设置字符颜色,Font,的字体颜色属性,_HT1-4-3_fontcolor,才饮长沙水,又食武昌鱼,万里长江横渡,极目楚天舒,例：设置字型，设置标记是,粗体、,斜体及,下划线标记,Font,的字型,HT1.4.5_BIU ,正常文字,这是粗体字,这是斜体字,给文字加下划线,对文字综合使用粗体、斜体、下划线标,2.2,标题标记,设定标题的文字大小，从,到,总共有六级。标题自占一行，不必加,可自动换行。,例：显示标题字,Font,的字型,HT1.4.5_hn ,标题,1 ,标题,2,标题,3 ,标题,4,标题,5 ,标题,6,标题可用属性,align,设置在页面中的对齐方式，属性值有,left,（左对齐）、,center,（居中）、,right,（右对齐），默认为左对齐。,例如如下语句设置标题字为,2,级，,蓝色居中,：,标题,3,、,排版与列表标记,3.1,、预格式化标记,所谓预格式化，就是保留文字在源代码中的格式。浏览器在显示,标注的内容时，会完全按照原来的文本格式显示。例如，原封不动地保留文档中的空白、空格、换行、对齐、制表符等。,基本语法：,文字内容,例：,1 ,2 ,保留原格式,_HT1-3-1_pre ,3 ,4 ,5,相 思,6,王维,7,红豆生南国，,8,春来发几枝？,9,愿君多采撷，,10,此物最相思。,11 ,12 ,3.2,居中标记,要使段落或文字居中对齐，除了可以使用,align,属性中的,center,之外，还可以使用专门的居中标记。,基本语法：,文字内容,3.3,缩排标记,设定某段落是否要缩排。,缩排,HT1.3.2_,blockquote,王小红订购了三本书：,Dreamweaver 8,Flash 8,ASP,NET,程序设计,4,、表格,4.1,表格的基本语法,和,表示表格的开始与结束,和,表示表中一行的开始与结束,和,表示行中一列的开始与结束,表格基本语法：,列,1,列,2 -,列,1 ,列,2 -,-,4.2,、标题,基本语法：,表格标题,格式中，,valign,的值有,top,（上方）或,bottom,（下方）。,4.3,、表头,表头是指表格的第一行，其中的文字可以实现居中并且加粗显示，通过,标记实现。,基本语法：,使用,标记替代,标记，唯一的不同就是标记中的内容加粗居中显示。,标记的属性与,标记的属性非常类似，用于设定表格中某一行的属性，常用属性如下：,Align,：,表头内容的水平对齐,bordercolor,：,表头的边框颜色,valign,：,表头内容的垂直对齐,width,：,表头的宽度,bgcolor,：,表头的背景颜色,height,：,表头的高度,background,：,表头的背景图像,4.4,、行标记,标记的属性与,标记的属性非常类似，用于设定表格中某一行的属性，常用属性如下：,Align,：行内容的水平对齐,bgcolor,：行的背景颜色,valign,：行内容的垂直对齐,bordercolor,：行的边框颜色,4.5,、单元格标记,标记的属性与,标记的属性类似，用于设定表格中某一单元格的属性，常用属性如下：,Align,：单元格内容的水平对齐,width,：单元格的宽度,valign,：单元格内容的垂直对齐,height,：单元格的高度,bgcolor,：单元格的背景颜色,rowspan,：单元格在水平方向上所跨的行数,background,：单元格的背景图像,colspan,：单元格在垂直方向上所跨的列数,bordercolor,：单元格的边框颜色,5,、插入多媒体及,GIF,文件,5.1,插入图片标记,img,Img,标记的格式是,:,URL,：图片的路径名称。图片的扩展名为,gif,或,jpeg,。,alt,：当图片无法显示时显示的字符。,6,、插入超链接,超链接是网页中最常用的元素之一。,Internet,包含无数的网站，一个网站由多个页面组成，网站间，网站内部的页面之间，都依靠链接确定相互跳转，这正是,Internet,的强大功能之一。,语句格式：,热字,热字：一般在网页中为带下划线蓝色显示，当指向热字时指针成手状。锚点是链接指向的资源。当单击热字时，打开链接资源。,超链接有以下几种形式：,1,创建指向其他页面的链接,链接格式中，如果,href,后面指定的是网址，那么点击热字时，会将导向该网址。,例如：,点击这里进入搜孤,锚点是,2 ,内总链接,3 ,4 ,以下是几首唐诗,5,一、,黄鹤楼送孟浩然之广陵,6,二、,白雪歌（送武判官归京）,7 ,8 interior,9 ,10 ,11,黄鹤楼送孟浩然之广陵,12,唐,.,李白,13,故人西辞黄鹤楼，,14,烟花三月下杨州。,孤帆远影碧空尽，,唯见长江天际流。,返回主页,