HTML语言简介

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,课前提问,因特网上提供的常用服务有哪些？,Web,网是一个什么网络？,支撑,WEB,网的三种机制是什么？,HTML,文档是由什么程序负责解释？,Web,服务器的作用是什么？,Web,客户端的作用是什么？,访问一个静态网页的基本过程是什么？,如何知道,Web,服务器是否正确响应了请求？,一个一般的,URI,会包括哪几个部分？,什么是相对的,URI,？,HTTP,协议工作在一个什么模型上？,HTTP,协议中，,Web,服务器如何把网页发回给浏览器？,HTML,HyperText Markup Language,RFC 2616 - Hypertext Transfer Protocol - HTTP1.1,一、什么是,HTML?,超文本标记语言,HTML,是一种简单的标记语言，它用来创建可在不同平台之间移植的超文本文档。,HTML,中的标识符可以表示超文本新闻、邮件、文档、超媒体等等。,标记语言,HTML,是标准通用标记语言,SGML,的一个应用。,标记语言是用标记（,TAG,）来标识某种意义或效果的语言。,标记是,HTML,文档中一些有特定意义的符号，使用,”,”,括起来。,标记语言,标记 属性值内容,/,标记,这是,Bold,的文字,这是链接,标记语言,起始标记,(Start Tag),和结束标记,(End Tag),一般成对使用。,HTML,的元素是由起始标记和结束标记标识的,HTML,文档的一部分。,HTML,元素,=,起始标记,+,元素内容,+,结束标记,元素（,element,）是可以嵌套的，但不能交叉。,下面文本中HTML元素的个数是多少,?,图片的说明内容,图片的说明内容,答案,：,6个，即1个body元素、,1,个,a,元素、,1,个,img,元素、,2,个,p,元素和,1,个,hr,元素。,标记语言,有些标记只有起始标记,(Start Tag),，没有结束标记,(End Tag),，叫做独立标记。,例如：, ,等等。,独立标记在书写时应该在右边的”,”,前面加一个斜杠。, ,带有属性的,HTML,元素的结构,HTML,HTML,文档是由用户代理（,User Agent,）来解释的。例如：,IE,等浏览器,Web,服务器发送回来的,HTML,文档是一个文本文件，里面包含的是使用,HTML,标记表示的文档内容，如果想看到文档，必须由浏览器根据标记的定义来显示。,所以如果本地有,HTML,文档，就可以在浏览器中直接打开文档显示。,二、,HTML,可以做什么？,用标题、文本、表格、列表、照片等发布在线信息。,通过超文本链接，在鼠标点击时取得在线信息。,设计表单与远程服务通讯,-,查询信息、进行预订、订购产品等。,把样式表、视频剪辑、音频剪辑和其它应用程序包含在文档中。,三、,HTML,文档结构,HTML,文档是以纯文本方式存放的，即：标记必须是英文半角（,ASCII,码）,可以用各种文本编辑器编辑它，如记事本、,MS FrontPage,；,Dreamweaver,等。,开始学习时最好使用简单文本编辑器。,HTML,文件扩展名可以是,.html,或,.htm,。,三、,HTML,文档结构,HTML,文档就是使用树形结构组织起来的,HTML,元素的集合。,这些元素包括：文档头，文档体，标题，段落，列表，表格等等。,在,HTML,文档中标记一般是不区分大小写的。,HTML,文档中空白符是被忽略掉的（大部分空格、,Tab,键、回车等）,三、,HTML,文档结构, -,告诉浏览器这是一个,html,文件, -,文档头信息,文档标题,文档的内容, ,告诉浏览器,HTML,文档开始和结束的位置，其中包括,head,部分和,body,部分。,HTML,文档中所有的内容都应该在这两个标记之间，一个,HTML,文档总是以,开始，以,结束。,HTML,文件的头部标记,头部主要提供文档的描述信息，,head,部分的所有内容都不会显示在浏览器窗口中，在其中可以放置页面的标题以及页面的类型、使用的字符集、链接的其它脚本或样式文件等内容,用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，,其结束标记,指明主体区域的结束,三、,HTML,文档结构,试一试：,使用,IE,Develop,ToolBar,察看,HTML,文档结构。,注：在,IE,中，按,F12,键即可（开发人员工具）。,四、,HTML,标记,页面标记,链接标记,字体标记,文字布局标记,图像标记,表格标记,表单标记,框架标记,页面标记,注释,页面标记,的属性可以设定当前文档的各种整体显示效果。,bgcolor -,背景色彩,text -,非可链接文字的色彩,link -,可链接文字的色彩,alink -,正被点击的可链接文字的色彩,vlink -,已经点击,(,访问,),过的可链接文字的色彩,HTML,文档中指定颜色,RGB,值指定颜色,#RRGGBB,十六进制数,#000000,是黑色,#FFFF00,是黄色,#FFFFFF,是白色,#FF0000,是红色,用颜色名称指定颜色,aqua gray navy silver,black green olive teal,blue lime purple white,fuchsia maroon red yellow,页面标记,设置文本的背景图像,语言字符集（,charsets,）,“,#,”,处填写的是语言的类型，如一般中国大陆基本上汉字用的是国标编码，为,gb2312,；而港台地区则是,big5,；美国则为,us-ascii,。,现在一般用的,UTF-8,韩国网站，则出现的是,媒体类型,(Content,Type),Web,网上的各种资源可以用媒体类型来表示它的类型。,HTML,文档也是一种,Internet Media Type,（互联网上一种媒体类型）。,MIME Content Type,叫做：“,text/html”,MIME,多目的,Internet,邮件扩展,Multipurpose Internet Mail Extensions,是创建用于电子邮件交换，网络文档，及企业网和,Internet,上的其他应用程序中的文件格式的规范。,RFC 2045,2046,2047,MIME,多目的,Internet,邮件扩展,每个,MIME,格式包含一个,MIME,内容类型（,“,MIME type,”,）和指示存储在这个文件中的数据的子类型。,MIME,类型和子类型一般以,类型,/,子类型,的形式列出。,例如，一个,MPEG,视频文件将会以,video/mpeg,的形式列出。,MIME,多目的,Internet,邮件扩展,常见的,MIME,类型超文本标记语言文本,.html,.html text/html,普通文本,.txt text/plain,RTF,文本,.rtf application/rtf,GIF,图形,.gifimage/gif,JPEG,图形,.jpeg,.jpg image/jpeg,au,声音文件,.au audio/basic,MIDI,音乐文件,mid,.midi audio/midi,audio/x-midi,RealAudio,音乐文件,.ra, .ram audio/x-pn-realaudio,MPEG,文件,.mpg,.mpeg video/mpeg,AVI,文件,.avi video/x-msvideo,GZIP,文件,.gz application/x-gzip,TAR,文件,.tar application/x-tar,HTML,的历史,HTML,的发展历程,GML(1969),SGML(1985),HTML(1993),XML(1998),XHTML(2000),CML,VML,Generalized Markup Language,Standard Generalized Markup Language,Hyper Text Markup Language,eXtensible Markup Language,文档类型（,DOCTYPE,）,放在,HTML,文档的第一行，表示文档的类型和符合的标准。,Transitional,表示是：,xhtml1.0,过渡标准的文档，,Strict,表示是严格标准的文档。,文档类型（,DOCTYPE,）,HTML 4.01,过渡标准的文档,文档类型（,DOCTYPE,）,带有,XHTML1.0 DOCTYPE,的,HTML,文档：,Title of the document,The content of the document.,XHTML,文档与,html,文档的区别,xhtml,文档必须有,doctype,声明,xhtml,文档必须有,html,head,body,title,等基本标记,标记名和属性名必须小写,枚举属性值必须小写,属性值必须用引号括起来,标记必须封闭,属性值不能省略,xhtml,支持更多设备、具有更好的扩展性,文档类型（,DOCTYPE,）,如果,html,文档中不存在,doctype,声明，某些浏览器在显示文档样式（,CSS,）的时候，可能出现混乱。比如：,IE6.0,。,文档类型（,DOCTYPE,）,HTML5,HTML5,中特意不加入版本声明，表示文档适合所有版本的,HTML,。,文档类型（,DOCTYPE,）,带有,HTML5 DOCTYPE,的,HTML,文档：,Title of the document,The content of the document.,链接标记, . ,链接到一个地址,跳转到页面内部的另外一个地方, . ,定义位置,(,锚标识,), . ,转到位置,在指定窗口打开链接,(Target Window), . ,开一个新的,(,浏览器,),窗口，打开链接, . ,超链接的种类,1),用文本做超链接：,首页,2),用图像做超链接：,3),文本图像混合做链接：,格力空调,1,型,超链接的种类,4),热区链接：,使用,map,在图像上定义一幅地图，地图上可包含多个热区，每个热区用,area,单标记定义，,area,的,shape,属性定义了热区的形状，,coords,定义了热区的坐标点，,href,定义了热区链接的文件。同时,img,标记用,usemap,指明用了哪幅地图,超链接的,title,属性,title,属性在很多标记里都有，其作用是在,鼠标停留在该元素上时显示设置的说明文字。,如,格力太阳能喜获,标尺线, #=left, right,字体标记,标题字体,(Header), . #=1, 2, 3, 4, 5, 6,这些标记显示黑体字。,这些标记自动插入一个空行，不必用,标记再加空行。,这是标题,字体标记,字体大小, . ,#=1, 2, 3, 4, 5, 6, 7,今天天气真好！,指定颜色, . ,字体标记,物理字体,(Physical Style),今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,字体标记,组合使用, ,今天,天气,真好！, ,字体标记,组合使用,今天,天气,真好！,字体标记,客户端字体,(Font Face), . #=,客户端可获得的字体,HTML,语言教程,字体标记,字符实体,(Entities),格式：,#=,字符实体名称 或者,ascii,值, &, , ,空格,文字布局标记,标记一个段落，会换行。,前后都换行,换行,换行,文字布局标记,文字的对齐,(Alignment),. . #=left, center, right,HelloHello,.,Hello,文字布局标记,文字的分区,(Division),显示, . ,前后都会换行,文字布局标记,无序列表,.,TodayTommorow,有序列表,.,TodayTommorow,文字布局标记,定义列表,(Definition lists) .,TodayToday is yesterday.TomorrowTomorrow is today.,文字布局标记,定制表中的标记, #=disc, circle, square, #=disc, circle, square,ONETWOTHREE,文字布局标记,定制有序列表中的序号, #=A, a, I, i, 1,ONE-ONEONE-TWO,文字布局标记,定制有序列表表中的序号的起始值, #=number,ONE-ONE,ONE-TWO,文字布局标记,预格式化文本,(Preformatted Text),.,Please use your card.VISA Master,按文字原来的格式显示,行内元素和块级元素,行内元素,(inline),是指元素与元素之间从左到右并排排列，只有当浏览器窗口容纳不下才会转到下一行,块级元素,(block),是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，从上到下排列。,块级元素内部可包含行内元素或块级元素，行内元素内部可包含行内元素，但不得包含块级元素，另外，块级元素,元素内部也不能包含其他的块级元素,行内元素和块级元素举例,行内元素：,a,，,img,，,font,，,b,，,i,，,u,，,span,，,input,块级元素：,p, div, hn, pre, hr, ul, ol, li, form,快速记忆：即所有文本标记，链接标记和图像标记是行内元素,所有段落标记，列表标记是块级元素,