第1章 HTML语言

单击此处编辑母版标题样式,Click to edit Master text styles,Second level,Third level,*,单击此处编辑母版标题样式,Click to edit Master text styles,Second level,Third level,HTML,技术,授课讲师：陈美汜,目录,1.HTML/CSS/JavaScript,先睹为快,2.HTML,3.CSS,4.JavaScript,1.1 HTML,代码,初识庐山真面目,未使用,css,，,JavaScript,的,html,网页,这是一个未使用,css,，,JavaScript,的,html,网页,使用记事本即可编写,HTML,代码，扩展名是,html,或,htm,。,使用浏览器就可以查看其效果。,1.2 CSS,代码,使用了,css,的,html,网页,h2 font-size:50,pfont-size:20;font-style:italic;color:red,使用了,css,的,html,网页,这是一个使用了,css,的,html,网页,1.3 JavaScript,代码,使用了,css,和,JavaScript,的,html,网页,h2 font-size:50 pfont-size:20;font-style:italic,alert(,这是,JavaScript,起的作用,);,使用了,css,和,JavaScript,的,html,网页,这是一个使用了,css,和,JavaScript,的,html,网页,1.4 HTML,、,CSS,、,JavaScript,的角色,HTML,：超文本标记语言。是网页设计的主要语言。无论网页是否包括动画、多媒体、图形等各种复杂的元素，其基本架构都是,HTML.,CSS,：层叠样式表。是目前唯一的网页排版样式标准，弥补了,HTML,在网页格式化方面的不足，帮助用户对页面的布局加以更多的控制。,JavaScript,用于开发,Internet,客户端应用程序，实现了一种实时、动态、交互的页面功能。它的出现使静态的,HTML,页面逐渐被客户端可做出响应的动态页面所取代。,可以在,HTML,语言中直接编写,CSS,和,JavaScript,代码，也可以独立编写。扩展名分别是,.,css,和,.,js,2 HTML,1:HTML,简介,2:,基本标记,3:,列表,list,4:,表格,table,5:,表单,form,6:,框架,frame,7:,层,div,2.1.1 HTML,概念,HTML,Hyper Text Markup Language,超文本标识语言,是一种用来制作超文本文档的简单标记语言。,用,HTML,编写的超文本文档称为,HTML,文档,HTML,文档：,*,.,htm,或*,.html,文件名不区分大小写,浏览,HTML,文件的工具,:,浏览器,例：,Netscape Navigator ,Microsoft,IE,Mazilla,FireFox,2.1.2 HTML,文档的编写方法,手工直接编写,记事本等，存成,.,htm,.html,格式，要求用户必须掌握,HTML,使用可视化,HTML,编 辑 器,Frontpage,、,Dreamweaver,等,容易产生废码,2.1.3 HTML,文档结构, my first page ,This is my first homepage!,这是我的第一张网页！,2.1.3 HTML,文档结构,标记,(,签,),是,HTML,语言的基本部分，比如,、,、,、,、,。大多数标记总是成对出现，每一对标记一般都有一个开始的标记并且结束的标记总是在开始的标记前加一个斜杠。,属性：,HTML,标记有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。,my first homepage,注意：,标记不区分大小写。例,都可以,标记中不要有空格，否则浏览器无法识别。例,错误,任何空格和回车在代码中无效。插入空格和回车分别用,和,&,nbsp,;,属性的值可以用双引号引起来，也可以不引，最好引起来,各属性之间无先后次序，属性也可省略（即取默认值）,2.1.3 HTML,文档结构,-,head(title,),标记出现在文档的开头部分,。,与,之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。,1:,标记定义,HTML,文档的标题。,与,之间的内容将显示在浏览器窗口的标题栏。,2.1.3 HTML,文档结构,-,head(meta,),2:,标记,标记定义网页的一些相关信息，例文件的关键字，作者，网页过期时间等，这些信息不会在浏览器的文档窗口显示,用来标记搜索引擎在搜索你的页面时所取出的关键词。,用来标记文档的作者。,用来标记你的页面的解码方式。,用来自动刷新网页,2.1.3 HTML,文档结构,-(,head)meta,编写一个网页，要求,3,秒钟后自动跳转到西安通瀛首页。,my first page,三秒钟后本网页将自动跳转到西安通瀛首页,2.1.3 HTML,文档结构,-body,表明是,HTML,文档内容主体部分。在,与,之间，通常都会有很多其它标记；这些标记和标记属性构成,HTML,文档的主体部分。,自身属性主要有：,1)bgcolor,bgcolor,属性标志,HTML,文档的背景颜色。如：,bgcolor,=#CCFFCC,。,2)background,background,属性标志,HTML,文档的背景图片。可以使用的图片格式为,gif,jpg,如：,background=“images/,bg.gif,。,3)text,text,属性标志,HTML,文档的正文文字颜色。如：,text=“#FF6666”,。,text,定义的颜色将应用于整篇文档。,2.1.3 HTML,文档结构,-body,颜色,颜色名和,RGB,值,黑色,Black=”#000000”,银色,Silver=”#c0c0c0”,红色,Red=”#ff0000”,蓝色,Blue=”#0000ff”,白色,White=”#,ffffff,”,黄色,Yellow=”ffff00”,绿色,Green=”#00ff00”,海蓝色,Aqua=”#00ffff”,2.,2,基本,HTML,标记,1.,标题标记,2.,文字标记,3.,段落级标记,4.,强制换行标记,5.,水平标尺标记,6.HTML,注释,6.,超级链接,7.,图像标记,8.,移动的文字,2.,2.1,标题标记,可显示六种大小的标题，即,到,，,为最大，,为最小,HTML,简介,HTML,简介,HTML,简介,HTML,简介,HTML,简介,HTML,简介,HTML,简介,this is paragraph mark,You can see what is the different between paragraph andbreak, this is another paragraph mark,this is paragraph mark,how it work in the web page.,If you need to insert one image for your web page, you can use below mark:,And also you can user hyperlink for your want, this is the link,，,click it and see where it has gone?,another style for you,2.2.2,文字标记,文字属性标记,1.,文字颜色, . ,#=RRGGBB 16,进制数码,2.,文字字体, . #=,客户端可获得的字体,3.,文字大小, . ,#=1, 2, 3, 4, 5, 6, 7,等,2.,2.3.,段落级标记,段落标记,(paragraph) ,换行符标记,预格式化标记,：,HTML,的段落与段落之间有一定的空隔。,如果不希望出现空隔而只想换行的话，就要用到另一个元素，即,元素。,利用,标记对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落。即,浏览器会以文本输入格式显示,用三种标记分别实现登鹳雀楼的显示,2.,2.4,字符级标记,常用字符级标记,倾斜文本,粗体文本,下划线文本,删除线文本,强调文本,居中显示文本,空格标记,&,nbsp,; ,2.,2.5,水平线标记,水平线,：设定线宽,：设定线长,：设定对齐方式,#=left, right,：设定线的颜色,2.,2.6 HTML,注释,HTML,文档可以插入注释。不但便于对程序排错，也使其他人更易读懂自己的代码,HTML,注释的格式为：,源码依然存在，不会被浏览器所解释, ,注释语句的特点是仅用于程序中某一句或一段语句的作用说明，浏览器在执行过程中将忽略掉注释语句的内容，对其视而不见。,2.,2.7,超级链接,超级链接是用锚元素,定义的,在,元素下，有元素属性,href,href,的属性值为一个,URL,地址,如：,指向学院的超级链接,如：,普通超级链接,如：,普通超级链接,开一个新的,(,浏览器,),窗口,(Target Window), . ,2.,2.7,超级链接,超级链接的路径,绝对路径：指文件的完整路径，包括协议，主机地址等，一般用于网站的外部链接。, height=100,width,指定宽度，,height,指定高度。它们的,属性值可以是象素，也可以是,%,。,定义图片替代文本的方法是：,替代文本有两个作用：,提示：若图片下载成功，把鼠标放在图片上，会出现提示文本。,替代：若图片下载不成功，在图片位置出现替代文本。,图片的对齐方式,#=,left,right,top,middle,bottom,2.,2.8,图像标记,HTML,文档中的图片,GIF,（,Graphics Interchange Format,）图像,(.GIF),支持无损压缩,只支持,256,色,JPEG,（,Joint Photographic Experts Group,）图像,(.JPG),有损压缩 ，但这个损失是剔除一些视觉上不易察觉的部分。,通常用来保存超过,256,色的图片文件,PNG,（,Portable Network Graphics,）,新兴的网络图片格式，结合了,gif,和,jpeg,的优点。,可以将图片文件以最小的方式压缩而不造成图片失真,支持,48bit,的色彩。,2.,2.8,图像标记,图像的超级链接,图像的超级链接是指整个图像的超级链接，当点击图像的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：,图像的热区链接,热区就是在图片中特意划分出一个热点区域。当点击图象的热区时，才会打开这个超级链接。,需要使用,map,标记指定热区。,2.,2.9,移动的文字,基本语法, . ,文字移动属性,(1),方向 ：,direction,=#,#=left,right,up,down,(2),方式：,behavior,=#,#=,scroll,(,循环,),slide,(,只走一次,),alternate,(,来回走,),(3),循环,:,loop,=#,#=,次数；若未指定则循环不止,(infinite),(4),速度,:,scrollamount,=#,(5),延时,:,scrolldelay,=#,2.3.1,无序列表,无序列表由,和,元素定义的,:,sports,food ,drink ,friends ,无序列表的默认符号是圆点。,元素有,type,属性，通过定义不同的,type,属性可以改变列表的项目符号。目前，,type,属性的属性值有：,disc(,圆,),、,circle,（圆圈）、,square,（方块）,支持嵌套定义,2.3.2,有序列表,有序列表由,和,定义,:,sports,drink,friends,元素也有自己的,type,属性,，,type,属性的属性值有,1,、,A,、,a,、,I,、,i,等。例如，我们以,A,、,B,、,C,作为列表的编号,元素还可以定义列表的起始编号，如我们希望列表的第一个编号为,5,，而不是,1,，则需要定义,元素的,start,属性,支持嵌套定义,2.4.1,表格的基本结构,定义表格,定义表头,定义表行,定义单元格,.,定义表行,定义单元格,2.4.1,表格的基本结构,元素：定义一个表格。每一个表格只有一对,和,，一张页面中可以有多个表格。,元素：定义表格的行，一个表格可以有多行，所以,对于一个表格来说不是唯一的。,元素：定义表格的一个单元格。每行可以有不同数量的单元格，在,和,之间是单元格的具体内容。,需要注意的是：上述的,三个元素必须、而且只能够配对使用,。缺少任何一个元素，都无法定义出一个表格。,元素：定义表格的表头行，一个表格只能有一个表头行或者没有，所以,对于一个表格来说是唯一的或没有。,2.4.2,表格的属性,表格的属性,width,属性：指定表格或某一个表格单元格的宽度。单位可以是,%,或者象素。,height,属性：指定表格或某一个表格单元格的高度。单位可以是,%,或者象素。,border,属性：表格边线粗细,bgcolor,属性：指定表格或某一个单元格的背景颜色。,background,属性：指定表格或某一个单元格的背景图片。其属性值为一个,URL,地址,align,属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式,(,left,center,right,),。,2.4.3,单元格的属性,单元格属性,valign,属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：,top,：顶端对齐；,middle,：居中对齐；,bottom,：底端对齐,; baseline,：相对于基线对齐,;,align,属性：指定某一个单元格里的内容（文本、图片等）的水平对齐方式（,left,center,right,）,colspan,：属性值表示当前单元格跨越几列,rowspan,：属性值表示当前单元格跨越几行,2.4.4,行的属性,行属性,1,、,valign,属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包,top,：顶端对齐；,middle：居中对齐,；,bottom,：底端对齐。,baseline,：相对于基线对齐。,2,、,align,属性：指定表格或某一个单元格里的内容（文本、图片等）的水平对齐方式,(,left,center,right,),3,、,height,属性：指定表格中某一行的高度。单位可以是,%,或者象素,2.4.5,表格的嵌套,在, ,之间插入表格，实现表格嵌套,导航列表,计算机,政治,军事,法律,正文内容,2.4.5,表格的作用,表格是用于在,HTML,页面上设计数据和图像布局的常用工具，可使用表格来组织数据，控制页面布局,制作网页时，为了以一定的形式将网页中的信息组织起来，同时使网页便于阅读和页面美观，需要对页面的版式进行设计或进行页面 布局。而表格能将网页分成多个任意的矩形区域，表格是网页制作中是常用的一种简单布局工具。,表格的作用一般只是控制文本和图像的显示，而不显示表格的边框,2.4.6,表格举例,第一季度,第二季度,一月,二月,三月,四月,五月,六月,1000,550,240,1500,2765,1240,3000,2430,2500,1250,900,3400,2.5.1,表单,form,HTML,表单是,HTML,页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。,在,HTML,里，我们可以定义表单，并且使表单与,CGI,或,ASP,等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。,表单是网页上的一个特定区域。这个区域是由一对,元素定义的。,2.5.2,表单举例,设计一个注册表单，输入姓名，年龄，密码，密码确认，电子邮件，性别，爱好，身份，个人简历，单击提交按钮提交，单击重置按钮重置。,姓名，年龄，电子邮件：,text,密码，密码确认：,password,性别：,radio,爱好：,checkbox,身份：,select,个人简历：,textarea,提交按钮：,submit,重置按钮：,reset,2.5.2,表单举例,2.5.2,表单举例,姓名,密码,密码确认,性别,男,女,年龄,电子邮件,爱好,体育,音乐,美术,身份,学生,教师,解放军,个人经历,请输入个人简历,2.5.2,表单举例,2.5.2,表单举例,姓名,密码,密码确认,性别,男,女,年龄,2.5.2,表单举例,电子邮件, ,爱好, ,体育,音乐,美术,身份, ,学生,教师,解放军,个人经历, ,请输入个人简历,2.5.3,表单基本语法,1.,表单的基本语法,:,.,action,属性,：用来定义表单处理程序（一个,ASP,、,JSP,等程序）的位置,(,相对地址或绝对地址,),。,method,定义表单结果从浏览器传送到服务器的方法，一般有两种方法：,get,、,post,。,GET,有数据量限制，,POST,无以上限制,以文件形式传输,2.5.3,表单基本语法,2.,文本框的基本语法,:,?,文本框的名字,*,默认值,*, 长度,?,最大输入字符数,3.,密码框的基本语法：数据以圆点形式显示，提高密码安全性,2.5.3,表单基本语法,3.,复选框的基本语法,:,在一个表单里的所有多选框可以有一个或多个被选中。, /,默认选中,4.,单选框的基本语法,:,一个表单里的所有变量名相同的单选框只能够有一个被选中,。, /,默认选中,各个选项的,name,必须一样,才能达到预期效果,5.,标准按钮的基本语法,:,2.5.3,表单基本语法,6.,提交按钮和重置按钮的基本语法,:,7.,图象域的基本语法,:,：,相当于漂亮的,submit,按钮,。,8.,隐藏域的基本语法,隐藏域在网页中对用户是不可见的，用户单击提交按钮提交表单时，隐藏域的信息也被一起发送到服务器。,2.5.3,表单基本语法,9.,文本区域的基本语法,:, . ,10.,下拉菜单的基本语法,音乐,美术,体育,2.5.3,表单基本语法,TYPE,此属性指定表单元素的类型。可用的选项有,TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN,和,BUTTON。,默认值为,TEXT。,NAME,此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按照名称来标识它们,- TEXT1,、,TEXT2,或用户选择的任何名称。,VALUE,此属性是可选属性，它指定表单元素的初始值,SIZE,此属性指定表单元素的显示长度。用于文本输入的表单元素即输入类型是,TEXT,或,PASSWORD,的,MAXLENGHT,此属性用于指定在,TEXT,或,PASSWORD,表单元素中可以输入的最大字符数。默认值为无限的,CHECKED,此属性是一个,Boolean,属性，指定按钮是否是被选中的。当输入类型为,RADIO,或,CHECKBOX,时，使用此属性。,SRC,SRC=URL,。,当使用,IMAGE,作为输入类型时使用此属性，它用于标识图像的位置。,2.6.1,框架举例,2.6.1,框架举例,框架的嵌套,2.6.2,框架简介,框架是一种在一个网页中显示多个网页的技术，通过超级链接可以为框架之间建立内容之间的联系，从而实现页面导航。,在网页文件中，框架常用于网页的布局。,框架的基本结构分为框架集,frameset,和框架,frame,两个部分。,使用框架集的页面的,标记将被,标记替代，然后在利用,标记去定义框架结构。,每个框架,frame,由一个单独的,HTML,页面组成。,框架支持嵌套。当一个框架集中既有左右分割，又有上下分割是，就要用到框架嵌套。,2.6.2,framset,基本语法,框架由一对,定义,有两个属性：,rows,和,cols,rows,定义上下分割的框架的大小；,cols,定义左右分割的框架的大小；,在定义大小时，,rows,和,cols,可使用相对大小或以百分比为单位,2.6.2 frame,基本语法,的属性,src,：在本框架里显示的网页的,URL,。,frameborder,：,是否显示边框,name,：定义该框架的名字。这个名字可以被一些网页元素引用，如被,元素引用。,noresize,：框架在浏览器里不可以被调整大小。,scrolling,：是否显示滚动条。,yes, no, auto,2.6.2 frame,基本语法,left.html,:,快乐的生活,在当前框架中打开超链接页面,默认就是在当前框架页中打开,也可以采用,target=“,_self,”,在指定框架中打开超级链接页面,target=“,name,”,新开窗口打开链接页面,target=“,_blank,”,跳出整个框架集,target=“,_parent,”,2.7.1,图层,图层也是网页制作中用于定位元素或布局的一种技术，图层比表格的布局更加灵活，它能够将层中的内容摆放到浏览器的任意位置，放入到层中的,HTML,元素包括：文字、图像、动画甚至是图层。,一个网页中可以使用多个层，层与层之间可以重叠，在网页制作中，使用层可以将网页中的任何元素布局到网页的任意位置，同时可以以任何方式重叠。,可以想象在,word,文档中不同图片之间的上下左右位置和前后重叠关系。,图层也可以实现嵌套的功能。嵌套图层最主要的特点就是可以保证子层永远位于父层之上。,2.7.2,图层举例,将元素分组,第一层,这是第一部分内的一个段落元素,第一层的内容。,该部分之外,第二部分,这是第二部分内的一个段,第一层的内容。,2.7.3,图层属性讲解,基本语法, /,设置图层背景色,. /,图层的具体内容,课后作业,利用,html,语言完成学生成绩管理系统的界面设计，需求说明,