第2章HTML、XHTML标准.ppt

中国高等院校计算机基础教育课程体系规划教材 《基于Web标准的网页设计》 第二章 HTML、XHTML与Web标准 本章要点 HTML文档的基本结构 标记(Tags)和元素( Elements ) HTML标记的分类 行内元素和块级元素 2.3 从HTML到XHTML的转变 html存在的问题和web标准 XHTML与HTML的区别 (X)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标记如p…/p和标记之间的内容组合称为元素。网页中文字，图像，链接等所有的内容都是以元素的形式出现在html代码里的。标记相同而标记中的内容不同应视为不同的元素，同一网页中标记和标记中的内容都相同的元素如果出现两次也应视为两个不同的元素，因为任一个元素在网页中浏览器都会为它分配唯一的id，不存在两个元素的id也完全相同的情况。 例1 下面body内元素的个数是多少 body a href=box.htmlimg src=xxwlzx/cup.gif border=0 align=left //a p图片的说明内容/phr/ 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标记 的分类 头部标记：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, fieldset, legend 9) 框架标记：frameset, frame, iframe 10) 容器标记：div, span HTML标记 的分类（2） 为便于记忆，可将标记按出现的情况分为： 单标记：br /，hr /，img /， input /， meta /，link / 配对标记：大部分标记都是配对标记 成组标记：table，form，ul, ol, dl, frameset，fieldset及其子标记等，配对标记中很多都是成组标记 行内元素和块级元素 行内元素(inline)是指元素与元素之间从左到右并排排列，只有当浏览器窗口容纳不下才会转到下一行，块级元素(block)是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，从上到下排列。 块级元素内部可包含行内元素或块级元素，行内元素内部可包含行内元素，但不得包含块级元素，另外，块级元素p元素内部也不能包含其他的块级元素 行内元素和块级元素举例 行内元素：a，img，font，b，i，u， span，input 块级元素：p, div, hn, pre, hr, ul, ol, li, form 快速记忆法：即所有文本标记，链接标记和图像标记是行内元素 所有段落标记，列表标记是块级元素 行内元素和块级元素示例 body b粗体文字/b p图片的标题/pp图片