第2章节 HTML、XHTML标准.pptVIP

第二章 HTML、XHTML与Web标准 网 页 网页即是超文本，是通过超文本标记语言HTML（HypeText Markup Language）书写的一种纯文本文件， 客户通过浏览器看到的包含了如文字、图像、声音和动画等多媒体信息的每一个页面，其本质是一个纯文本文件。 浏览器对该纯文本文件进行了解释，才生成了多姿多彩的网页，除文本外，其它媒体素材（图像、声音、动画和影像等），都需要保存成单独的文件，通过URL嵌入到网页文件中。 可以看出，WWW服务主要是通过一个个多媒体网页提供给用户各种信息 HTML超文本标记语言 超文本标记语言HTML作为一种语言，它具有语言的一般特征，即它是一种符号系统，具有自己的词汇（符号）和语法（规则）。 所谓标记，就是作记号。如我们写文章时通常用大体字标记文章的标题，用换行空两格标记一个段落 所谓超文本，就是相比普通文本有超越的地方，如超文本可以通过超链接转到指定的某一页，而普通文本只能一页页翻，超文本还具有图像，视频，声音等元素，并能和用户交互，这些都是普通文本无法达到的 用HTML语言写出第一张网页 【例1-1】使用记事本输入，保存为1_1.htm html !--表示这是HTML文件-- head　 !--文件的题目或定义部分-- title欢迎/title !--文件标题-- /head body bgcolor=red text= #FFFFFF !--文件体，文档内容-- h1 align=centerb网页设计很奇妙！/bbr font size=5 face=仿宋_GB2312 em 预祝大家爱上它^-^ /em/font/h1 /body /html 本章要点 HTML文档的基本结构 标记(Tags)和元素( Elements ) HTML标记的分类 行内元素和块级元素 从HTML到XHTML的转变 html存在的问题和web标准 XHTML与HTML的区别 XHTML补充介绍（见另一幻灯片） HTML文档的基本结构 html…/html： 告诉浏览器HTML文档开始和结束的位置，其中包括head部分和body部分。HTML文档中所有的内容都应该在这两个标记之间，一个HTML文档总是以html开始，以/html结束。 head…/head： HTML文件的头部标记，头部主要提供文档的描述信息，head部分的所有内容都不会显示在浏览器窗口中，在其中可以放置页面的标题以及页面的类型、使用的字符集、链接的其它脚本或样式文件等内容 body…/body： 用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，其结束标记/body指明主体区域的结束 编写HTML网页文档的方法 HTML文档是一个纯文本文件，可以使用任何文本编辑器编写保存 使用记事本编辑一个html文件 使用Dreamweaver新建一个html文件 标记(Tags)和元素（Elements） 标记是HTML文档中一些有特定意义的符号，这些符号指明内容的含义或结构。标记总是放在三角括号中，大多数标记都是成对出现的，表示开始和结束。 不成对的也叫空标签或单标签 标记+标记之间的内容=元素。网页中文字，图像，链接等所有的内容都是以元素的形式出现在html代码里的。 例1 下面body内元素的个数是多少 body a href=box.html img src=xxwlzx/cup.gif border=0 align=left / /a p图片的说明内容/p hr/ p图片的说明内容/p /body 答案：5个，即1个a元素、1个img元素、2个p元素和1个hr元素。 HTML元素的结构 例2 找出下面html代码的错误 下列HTML元素的写法错在什么地方？ img birthday.jpg / i Congratulations! i a href=file.htmllinked text/a href=file.html pThis is a new paragraph\p liThe list item /li HTML标记 的分类 (p38) 头部标记：title, meta, link, style 文本标记：font, b, i, u , strong, 段落标记：p, hn, pre, marquee, br, hr 列表标记：ul, ol, li, dl, dt, dd 5) 超链接标记：a, map, area 6) 图像及媒体元素标记：img, embed, object 7) 表格标记：table, tr, td, th, tbody 8) 表单标记：form, input, textarea, select, option