第2章HTML与XHTML语言基础

网页设计与制作刘瑞新吴丰主编机械工业出版社第2章HTML与XHTML语言基础机械工业出版社2.1HTML与XHTML是什么HTML（超文本标签语言）和XHTML（可扩展超文本标识语言）都是一种用于文档布局和超文本链接规范的语言。它定义了许多带有语义的命令，虽然浏览器中不会显示这些命令，但是它们可以告诉浏览器如何显示文档内容（如文本、图片和其他媒体等）。这种语言还可以通过超文本链接把用户的文档与其他互联网资源联系起来。机械工业出版社2.2HTML2.2.1HTML基本知识1．什么是HTML文档HTML文档包含HTML标签和纯文本，它被Web浏览器读取并解析后以网页的形式显示出来，所以HTML文档又被称为网页。2．什么是HTML标签标签（tag，也称标记）是用一对尖括号“”和“”括起来的单词或单词缩写，它是HTML文档的主要组成部分。每个标签都有特定的描述功能，HTML文档就是通过不同功能的标签来控制Web页面内容的。ahref==百度一下，你就知道百度搜索/a机械工业出版社2.2HTML2.2.2HTML文档的基本结构机械工业出版社2.3常用标签2.3.1标题标签1．title标签——例2-1title标签位于head与/head中，用于标示文档标题，但文本内容不会出现在网页中，而是出现在大多数浏览器的左上角。headmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8title这里是标题/title/headbodytitle标签的实例应用/body/html机械工业出版社2.3常用标签2.3.1标题标签2．h系列标签——例2-2headmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8title标题示例/title/headbodyh1这是一级标题/h1h2这是二级标题/h2h3这是三级标题/h3h4这是四级标题/h4h5这是五级标题/h5h6这是六级标题/h6/body/html机械工业出版社2.3常用标签2.3.2区段格式标签1．p标签——例2-3bodyp段落元素由p标签定义。/ppalign=right这里是1段落。/ppalign=center这里是2段落。/ppalign=left这里是3段落。/ppalign=这里是4段落。/pblockquotejustifyp这里是5段落。/pp这里是6段落。/p/blockquote/body机械工业出版社2.3常用标签2.3.2区段格式标签2．br标签——例2-4bodyp早发白帝城/pp朝辞白帝彩云间，br/千里江陵一日还。br/两岸猿声啼不住，br/轻舟已过万重山。br//p/body机械工业出版社2.3常用标签2.3.2区段格式标签3．hr标签——例2-5bodyp朝辞白帝彩云间，br/hr/千里江陵一日还。br//p/bodybodyp通过HTML：/phrnoshade=noshade/p通过CSS：/phrstyle=height:2px;border-width:0;color:gray;background-color:gray//body机械工业出版社•实例综合1例2-6制作一个绝句赏析的页面机械工业出版社2.3常用标签2.3.3列表标签1．无序列表——ul标签2．有序列表——ol标签3．定义列表——dl标签4．li标签例2-7、2-8机械工业出版社2.3常用标签2.3.2区段格式标签1．img标签——例2-10img标签允许在当前的文本流中引入或插入图形图像。在img标签的前后没有设定任何换行符或者段落分隔符，所以图像会真正地“内联”在文本中。该标签在HTML中没有结束标签，而在XHTML中则需在最后一个字符后面加上斜线标记来关闭标签。（1）src属性（2）alt属性（3）width属性和height属性（4）align属性bodyimgsrc=images/插入图片.pngwidth=156height=143title=我是小蝙蝠//body机械工业出版社2.3常用标签2.3.2区段格式标签2．bgsound标签bgsound标签可以设置背景音乐，只适用于InternetExplorer文档。bgsound标签最常用的替代品是embed标签，而embed标签后来又被HTML和XHTML标准中的object标签所取代。机械工业出版社•实例综合2例2-11制作诗人名片页面机械工业出版社2.3常用标签2.3.5超链接标签bodypahref=/index.html单击这里/a将指向本网站中的一个页面的链接。/ppahref=单击这里/a将指向互联网上的页面的链接。/ppahref=#abc单击这里/a将指向本页面中的一个锚点链接。/ppaname=abcid=abc/a这里设置了一个锚点名称为abc的锚点。/p/body超链接（hyperlink），或者按标准的叫法称为锚，它是使用a标签标记的，可以用两种方式表示，一是通过使用a标签的href属性来创建超文本链接，以链接到同一文档的其他位置或其他文档中，在这种情况下，当前文档就是链接的源，href属性的值就是URL的目标；二是通过使用a标签的name属性或id属性在文档中创建一个文档内部的书签。——例2-12机械工业出版社2.3常用标签2.3.6表格标签1．table标签（1）border属性（2）cellspacing属性（间距）（3）cellpadding属性（补白）2．tr标签tr标签用于定义表格中的行。tr标签中可以放置一个或多个单元格，单元格又包括th标签定义的表头，以及由td标签定义的数据。表格中每一行单元格的数据，都与最长的单元格数据相同。3．th与td标签在tr标签内部，th与td标签会在一行中创建单元格及其内容。th标签定义表格内的表头单元格，在th元素内的文本通常会以粗体显示；td标签用于定义HTML表格中的标准单元格。例2-13机械工业出版社•实例综合3例2-14打印机驱动页面下载机械工业出版社2.3常用标签2.3.7表单标签1．form标签（1）action属性（2）method属性（3）id属性和name属性2．input标签（1）type=text单行文本输入框（2）type=password密码输入框（3）type=checkbox复选框（4）type=radio单选按钮（5）type=file文件域（6）type=hidden隐藏字段（7）type=submit提交按钮机械工业出版社2.3常用标签2.3.7表单标签3．label标签4．select标签5．option标签（1）value属性（2）selected属性例2-15机械工业出版社2.3常用标签2.3.8注释为文档添加注释的意义在于方便Web设计人员阅读和分析代码，并且具有备忘的作用。在注释中出现的内容不会显示在网页中，而会被浏览器忽视掉。机械工业出版社2.4XHTML2.4.1XHTML的基本结构机械工业出版社2.4XHTML2.4.2XHTML语法规则1．所有的标签都必须关闭，即便是空标签也必须关闭2．所有标签的属性必须是小写3．所有标签的属性值必须用英文格式的双引号括起来4．所有标签都必须合理嵌套5．特殊字符需用编码表示6．明确属性值，且不能简写7．用id属性代替name属性机械工业出版社2.4XHTML2.4.3DOCTYPE（声明）1．过渡的（transitional）2．严格的（strict）3．框架的（frameset）机械工业出版社2.5案例：创建网页文件机械工业出版社2.6实训：使用“记事本”制作简单网页