重庆邮电大学计算机科学与技术学院

*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,重庆邮电大学计算机科学与技术学院 胡军,第二章 HTML根底,本章的主要内容,2.1 HTML根底,2.2 HTML的标记,2.3 设置页面属性,2.4 文字修饰,2.5 文本分段,2.6 列表,2.7 表格,2.8 表单,2.1 HTML根底,HTML是Hyper Text Markup Language，超文本标记语言的缩写，最早源于SGML语言Standard General Markup Language，标准通用化标记语言，是由Web页面的创造者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种新颖的标记式语言，它是SGML的应用。到90年代后期，由于网络的飞速开展，使得HTML也到达了空前的繁荣，在WWW革命中扮演了核心技术的角色。,如何编写一个HTML文件,1 HTML的文件格式,HTML文件是一个ASC格式的文件。它可以在任何一种可以编辑ASC文件的编辑器中编辑。比方通用的文字处理程序，当然也有专门的HTML文件编辑器。,HTML文件是以.htm或.html为后缀的一种文件。,2 根本的HTML语法,在HTML中，所有的标记符都用尖括号括起来，并且一般成对出现。比方。但某些标记，只要求单一标记符号，例如换行标记符。,注：HTML标记符不区分大小写，但通常约定使用大写，这有利于HTML文档的维护。,3 标记符的属性,对于许多标记符，还包括一些属性，以便对标记符作用的内容进行更详细的控制。,在HTML中，所有的属性都放置在开始标记符的尖括号里，属性与标记符之间用空格分隔。属性值放在相应属性的后面，用等号分隔。多个属性之间用空格分隔。,注：HTML属性通常也不区分大小写，并且一般约定使用小写。,Web页的根本结构,任何HTML文档都包含的根本标记符包括：HTML标记、首部标记和正文标记。,1 HTML标记,和是Web页的第一个和最后一个标记，Web页的其他所有内容都位于这两个标记符之间。,虽然HTML标记符开始标记和结束标记都可以省略，但为了保持完整的网页结构，建议编写完整。,注：在HTML文档中，某些标记符的开始标记符和结束标记符可以省略，某些标记符的结束标记符可以省略，而有些标记符那么既不能省略开始标记符也不能省略结束标记符。如果不清楚，建议不要省略。,2 首部标记,首部标记和位于Web页的开始，其中不包含Web页的任何实际内容，而是提供一些Web页有关的特定信息。比方设置网页标题、定义样式表、插入脚本等。,(1)TITLE标记符，用于定义网页的标题。,这里是网页标题,请看浏览器的标题栏,(2)META标记符，用于说明与Web相关的信息。例如文件的编辑工具等信息。,META标记符的常用属性包括name,-equiv以及content。其中，name属性给出特性名，而content属性给出特性值，-equiv属性指定HTTP响应名称。,META标记符的一个常用功能是设置自动转址功能。,META例如,META例如,(3)BGSOUND标记符，用于指定网页的背景音乐。,BGSOUND标记符只有开始标记符，没有结束标记符。,它的根本属性是src，用于指定背景音乐的源文件。另一个属性loop，用于指定背景音乐重复的次数，如果不指定或者指定次数为“-1，那么背景音乐无限循环。,背景音乐例如,3 正文标记符,正文标记符和包含Web页具体内容，包含文字、图像等各种HTML对象。,如果没有其他标记的修饰，正文标记符中的文字将以无格式的形式显示。,注：空格、回车这些格式控制在显示时都不起作用，如要使它们起作用，可使用格式化标记符和将需要采用编辑格式的内容包含起来。,2.2 HTML的标记,标题标记和,按字体大小分为6级，分别用n为1，2，3，4，5，6来表示。其中，n的值越大，浏览器显示的字体越小。,用align属性设置标题的对齐方式，分别为right,left,center,这是网页标题,1级标题内容,6级标题内容,换行标记,这是单个的标记，其作用是换行显示。,水平线标记,这也是单个标记，其作用是在Web中插入水平线。,用color属性指定水平线的颜色。,用size属性设置水平线的粗细。,用width属性设置水平线的长度。,用noshade属性去掉水平线的阴影，只需要指定属性的存在。,这是网页标题,静夜思,床前明月光，,疑是地上霜，,举头望明月，,低头思故土，,超链接标记,链接是访问者从一个页面跳到另一个页面。,href属性，用来设置要链接到的页面地址。,name属性，用来定义书签。,target属性，用来设置翻开目标页面的窗口。,title属性，用来对链接进行说明。,插入E-mail链接,联系我们,图片标记,用标记可以插入图片，并且可以设置插入图片的相关属性,标记属性,功能,src=URL,通过,URL,给出图像来源的位置，不可缺省,width=size,设置图像宽度,height=size,设置图像高度,alt=txt,设置在图像未载入前图片位置显示的文字,border=size,设置图像边框，缺省为,0,align=alignstyle,对齐方式。取值：,top,，,middle,，,bottom,，,left,，,right,hspace=size,设置图片左右边沿空白,vspace=size,设置图片上下边沿空白,用标记还可以插入视频。,标记属性,功能,dynsrc=URL,设置多媒体来源位置,loop=size,设置视频播放的次数,loopdelay=time,设置两次播放的间隔时间,start=value,指定何时开始播放视频文件,标记,可以使用插入视频或音乐。,标记属性,功能,align,设置对齐方式,height=n,设置高度,width=n,设置宽度,src=URL,设置视频源位置,autostart,设置是否自动开始,2.3 设置页面属性,1 设置页面背景颜色,在标记符使用bgcolor属性可以为网页设置背景颜色。,在HTML中，除了使用颜色名称以外，还可以用格式#RRGGBB来表示颜色。其中，RR、GG、BB分别表示红、绿、蓝成分的两位16进制数。,2 设置页面背景图像,在标记符使用background属性可以为网页设置背景颜色。,在使用背景图案时，可以使用bgproperties，设置背景图案的水印效果。,这是网页标题,背景图案例如,3 添加注释,不管时编写程序还是制作网页，为所做的工作添加注释都是一种良好的工作习惯。,HTML的注释由开始标记符构成。这两个标记之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。,4 显示特殊符号,常见的有：表示为。,2.4 文字修饰,1 字号,和,把文字以小一些的字号显示，默认的字号为“中。,和,把文字以大一些的字号显示,本标记用来设置字体的大小。这里n是数字，可以是1，2，7。数字越大，显示文字越大。n的默认值是3。,如果给出的n值有正负号，那么表示在当前的根底上增大或缩小字号。,本标记用来设置文字的默认大小。,这里是网页标题,1号字2号字3号字4号字5号字6号字7号字,相对小5号相对大2号,2 字体式样,和,使作用的文字以粗体显示,和,使作用的文字以斜体显示,和,使作用的文字以下划线显示,和,使作用的文字加上删除线显示,和,使作用的文字以下标显示,和,使作用的文字以上标显示,2.5 文本分段,段落标记和,用align属性设置段落的对齐方式，其取值包括right,left,center,justify,多个段落对齐,使用,使用和使作用的对象居中对齐,注：格式嵌套时，如果所设置的格式相容，那么取格式叠加的效果，否那么取最近标记符的样式。,格式嵌套,本行使用DIV标记对齐本行的对齐 方式被更改了,2.6 列表,列表是一种条理化地排列信息的方法，列表标记使用的格式如下：,条目内容1,条目内容2,和,和,和,type可以取值：disk/circle/square,和,type可以取值：A/a/I/i/l,start表示开始的起始号,网页标题,李白杜甫杜牧,李白赠孟浩然杜甫望岳杜牧泊秦淮,李白赠孟浩然杜甫望岳杜牧泊秦淮,李白赠孟浩然杜甫望岳杜牧泊秦淮,2.7 表格,表格通常用来显示大量的、分类的信息，具有表示清晰、明了的特点。,表格一般由以下几个局部组成：表格名称、表格栏和表中数据。,1 和,用border属性设置表格边框宽度,用width和height属性设置表格的宽度和高度,用cellspacing属性设置表格的单元格线的宽度,用cellpadding属性设置单元格线与数据之间的宽度,2 和,用来指明表格的标题,可以使用align属性设置标题的显示，取值有：top/bottom,3 和,这对标记用来指明表格的一行。,4 和,这对标记用来指明表格栏目行中的一项。,5 和,这对标记用来指明表格数据行中的一项。,用align属性指定单元格的对齐方式left/center/right,用nowrap属性禁止换行,用width属性指定单元格宽度,用valign属性指定垂直对齐方式top/middle/bottom,用colspan属性实现单元格的横向合并,用rowspan属性实现单元格的纵向合并,表格例如,表格标题,栏目名称1,栏目名称2和3,数据11,数据21 数据31,数据22 数据32,2.8 表单,Web站点通过表单来收集用户提交的信息，然后再加以处理。,表单包含以下几种控件：,“提交按钮，用于将表单信息发送到效劳器处理。,“复位按钮，清空表单。,文本字段，用于输入少量文本的区域。,下拉列表，用于列出有限的选择清单。,复选框，用于进行多项选择。,单项选择按钮，用于进行单项选择。,文本区，用于输入大段的文本的区域。,1 和标记,标记对用来创立一个表单，也即定义表单的开始和结束位置，表单元素包含在这个标记中。标记具有name、action、method等属性。,name属性：表单名称。,method属性：设定数据送出的方式。,action属性：设定处理程序的文件路径。,2 标记,name属性：输入栏位的名称,type属性：,text：单行文字对话框,其中maxlength表示文本框最多能够处理的字符个数；readonly表示文本框的只读属性；size表示文本框的显示长度；value表示文本框的默认值。,password：密码栏位,file：文件栏位,checkbox：复选框,其中checked表示默认情况下为选中状态；value表示返回值,radio：选择钮,具有相同名称的选择钮只能选其一,button：普通按钮,其中value表示按钮上显示的文字,submit：送出按钮,reset：重设按钮,image：图片按钮,其中align表示对齐方式；src表示图片路径。,hidden：隐藏栏位,其中value表示返回值,3 和,文本区用于输入大量文本,Name属性：名称,Rows属性：行宽,Cols属性：列宽,Value属性：设定栏位的默认值,4 和标记,选项1,选项2,name：选择栏位的名称,multiple：表示可以多项选择,size：显示的选择数目，1为下拉框式，大于一为列表框,value：选项的值，也是返回值,selected：预选的选项,表单例如,表单例如,姓名：,密码：,性别：男女,会何语种：英语法语日语德语,最高学历：,小学中学大学研究生,学习简历：,