第3章XHTML 语言

第三章XHTML语言本章内容第一节XHTML概述第二节XHTML标记和属性第三节XHTML语法第四节XHTML标记校验XHTML语言第一节XHTML概述一、什么是XHTMLXHTML是英文ExtensibleHyperTextMarkupLanguage的缩写，中文意思是“可扩展超文本标记语言”。XHTML1.0是以XML1.0的语法规范对HTML4.0的改进。XHTML是用于描述网页结构的标准语言。XHTML与HTML的区别：XHTML是严格的HTML；XHTML支持手机等；XHTML符合W3C标准；二、XHTML文档的类型XHTML1.0分为三种文档类型XHTML1.0Transitional（过渡的）允许使用表现层的标记和属性，但要符合XHTML的语法。XHTML1.0Strict（严格的）不允许使用任何表现层的标记和属性。XHTML1.0Frameset（框架的）用于框架结构的网页。三、DOCTYPE（文档类型声明）DOCTYPE声明是(X)HTML文档开头处的一行或两行代码，用于告知浏览器(X)HTML是哪个版本。!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“”!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN”“”!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Frameset//EN”“”四、XHTML标记分类XHTML标记分类双标记单标记四、XHTML标记（续）双标记语法：标记内容/标记例：p制作网页是我的爱好。/ph1华夏学院/h1ahref=“”硅谷动力/a四、XHTML标记（续）单标记语法：标记/例：linkhref=“style/basic.css”rel=“stylesheet”type=“text/css”/br/imgsrc=“images/logo.gif”alt=“彩虹科技”width=“200”height=“125”/inputname=“username”type=“text”id=“username”size=“10”/四、XHTML标记（续）标记属性语法：标记属性名1=“属性值”属性名2=“属性值”…例：ahref=“mailto:[e-mail]”欢迎给我来信/aimgsrc=“images/logo.gif”alt=“彩虹科技”width=“200”height=“125”/XHTML语言第二节XHTML标记和属性一、文档结构标记!DOCTYPE...文档类型声明html…/htmlHTML文档标记head…/head文档头部标记body…/body文档主体标记一、文档结构标记（续）XHTML文档的基本结构!DOCTYPE...html...head…/headbody…/body/html一、文档结构标记（续）例：!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Strict//EN”“”htmlxmlns=“”headmetahttp-equiv=“Content-Type”content=“text/html;charset=utf-8”/title文学小屋/title/headbodyp欢迎光临我的文学小屋!/p/body/html文档类型声明头部名称空间文档主体二、头部标记metahttp-equiv=“”content=“”/辅助信息标记title…/title文档标题标记linkhref=“”rel=“”type=“”/链接外部文件标记styletype=“”…/style内部样式标记scripttype=“”src=“”/script脚本标记二、头部标记（续）例：headmetahttp-equiv=“Content-Type”content=“text/html;charset=utf-8”/title文学小屋/titlelinkhref=“styles/basic.css”rel=“stylesheet”type=“text/css”/styletype=“text/css”!--p{line-height:1.7;}--/stylescripttype=“text/javascript”src=“scripts/showPic.js”/script/head三、文本标记p…/p段落标记br/换行标记em…/em强调标记strong…/strong重点标记三、文本标记（续）例1：htmlheadtitle诗一首/title/headbodyp登鹳雀楼/pp白日依山尽，br/黄河入海流。br/欲穷千里目，br/更上一层楼。/p/body/html三、文本标记（续）例2：htmlheadtitle强调标记示例/title/headbodyp《登鹳雀楼》是唐朝em王之涣/em的诗。/p/body/html四、标题文字标记h1…/h1一级标题h2…/h2二级标题h3…/h3三级标题h4…/h4四级标题h5…/h5五级标题h6…/h6六级标题四、标题文字标记（续）例：htmlheadtitle标题文字/title/headbodyh1今天天气真好。/h1h2今天天气真好。/h2h3今天天气真好。/h3h4今天天气真好。/h4h5今天天气真好。/h5h6今天天气真好。/h6/body/html五、引文标记blockquote…/blockquote块状引文q…/q行内引文cite…/cite人名、书名引文五、引文标记（续）例1：htmlheadtitle块引文标记示例/title/headbodyp教育信息化是教育现代化的必由之路，也是教育现代化的重要内容和主要标志。江泽民指出：/pblockquote“进行创新教育，必须充分利用现代科学技术手段，大力提高教育的现代化水平。要通过积极利用现代信息和传播技术，大力推动教育信息化，促进教育现代化。”/blockquote/body/html注意：浏览器会在blockquote元素内容的前后分别插入一行空白。并在内容的左右两侧增添边距。五、引文标记（续）例2：htmlheadtitle行内引文标记示例/title/headbodypq世上本没有路，走的人多了也便成了路/q，cite鲁迅/cite/p/body/html注意：1.所有主流浏览器（除InternetExplorer）均支持行内引文q标签。浏览器将自动为短引文添加引号。2.cite斜体表示。六、图像标记imgsrc=“”alt=“”width=“”height=“”/例：htmlheadtitle插入图像/title/headbodyimgsrc=“images/logo.jpg”alt=“苗苗报社”width=“760”height=“125”/body/html注意：双引号的使用一定要是英文状态下的。七、水平线标记hr/水平线标记八、超链接标记ahref=“”…/a超链接标记例：htmlheadtitle超链接标记示例/title/headbodypahref=“dance.html”红舞鞋/a/ppahref=“#”雪绒花/a/ppahref=“mailto:[e-mail]”欢迎给我来信/a/pp好站推荐：ahref=“”榕树下/a/p/body/html九、表格标记table…/table表格caption…/caption表格标题tr…/tr表格行th…/th表头单元格td…/td单元格九、表格标记（续）例1：tablewidth=“90”border=“1”caption简单表格/captiontrtd1/tdtd2/tdtd3/td/trtrtd4/tdtd5/tdtd6/td/tr/table九、表格标记（续）例2：tableborder=“1”cellpadding=“20”cellspacing=“5”trtd1/tdtd2/tdtd3/td/trtrtd4/tdtd5/tdtd6/td/tr/tablecellpadding=“20”cellspacing=“5”九、表格标记（续）例3：tablewidth=“90”border=“1”trtdcolspan=“2”1/tdtd3/td/trtrtd4/tdtd5/tdtd6/td/tr/table九、表格标记（续）例4：tablewidth=“90”border=“1”trtdrowspan=“2”1/tdtd2/tdtd3/td/trtrtd5/tdtd6/td/tr/table九、表格标记（续）例5：tableborder=“1”caption表格1:公司数据/captiontrthscope=“col”公司/ththscope=“col”雇员/ththscope=“col”成立于/th/trtrthscope=“row”ABC/thtd1000/tdtd1974/td/trtrthscope=“row”XYZ/thtd2000/tdtd1982/td/tr/table十、无序列表标记ul…/ul无序列表标记li…/li列表项标记例：p中国城市/pulli北京/lili上海/lili广州/li/ul十一、有序列表标记ol…/ol有序列表标记li…/li列表项标记例：p中国城市/polli北京/lili上海/lili广州/li/ol十二、定义列表标记dl…/dl定义列表标记dt…/dt定义标记dd…/dd定义描述标记例：dldtHTML/dtddHyperTextMar