网页设计与制作

网页设计与制作XHTML2内容提要XHTML文档结构XHTML代码规范文档类型与名字空间结构元素段落与文本元素清单元素图像元素链接元素表格元素框架元素表单元素多媒体元素3HTML语言超文本标记语言(HyperTextMarkupLanguage)用HTML语言编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ的信息表示语言HTML文档存放在Web服务器上，通过Internet供浏览者浏览。是一种用来制作超文本文档的简单标记语言4XHTML语言可扩展超文本标记语言（TheExtensibleHyperTextMarkupLanguage）2000年底，国际组织W3C公布发行了XHTML1.0，是一种在HTML4.0基础上优化和改进的的新语言，目的是基于XML（可扩展标记语言）应用。XHTML是HTML4.0的重新组织，是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。XHTML将代替HTML。XHTML1.0中没有定义新的元素和属性。XHTML1.0的代码语法要求更加规范和严格，由于声明的文档类型不同，XHTML具有扩展性。5认识XHTML语言“查看”/“查看源”6编辑XHTML文档可使用任何一种文字处理软件编辑XHTML文档，推荐：记事本XHTML文档以纯文本格式存放，取名为*.html或*.htm其中插入的标记只有用浏览器才能被解释，最终在浏览器窗口中呈现为图文并茂的网页。记事本7XHTML文档结构文档头由head元素定义，用来定义网页的标题等头部信息，如网页标题、作者、关键字等，该标志对之间的内容不显示在浏览器中。文档体由body元素定义，body元素内可包含所有的页面元素，网页中显示的内容都要定义在body元素内。!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN文档头文档体文档数据文档类型htmlxmlns=网页标题/title……/headbody网页内容………/body/html一个XHTML文档可分为文档类型说明和文档数据两个区域，文档类型由DOCTYPE声明，文档数据区由html元素定义。8XHTML元素的书写格式和属性XHTML元素分两类：包含内容的元素和自封闭的元素包含内容的元素：由元素的起始标签和元素的结束标签组成一般格式为：元素名称内容/元素名称自封闭的元素：指起始和结束使用同一个标签的元素一般格式：元素名称/除了元素本身描述的特性，大部分元素还包含一些属性，以提供更多信息一般格式为：元素名称属性=属性值内容/元素名称一个元素可以加多个属性，属性之间加空格分隔通常属性都有一个值，值的选取必须合法，属性值要加上英文双引号p奥运福娃欢欢/pbr/imgsrc=images/欢欢.gifwidth=100height=100/9XHTML代码规范文档的开始必须有文档类型声明在根元素html中必须声明名字空间所有的标签都必须闭合HTML中不必须关闭标签，例如p和li不一定写对应的/p和/li来关闭它们。但在XHTML中这是不合法的。单独不成对的标签在标签后加一个“/”来关闭它。所有元素和属性都必须小写所有的标签都必须合理嵌套所有的属性必须用西文引号括起来hrwidth=400/10XHTML代码规范把所有和&特殊符号用编码表示小于号（）不是标签的一部分必须被编码为<大于号（）不是标签的一部分必须被编码为>与号（&）不是实体的一部分的必须被编码为&空格（）必须被编码为 所有属性都必须赋值规定每一个属性都必须有一个值，没有值的属性用自己的名称作为值不要在注释内容中使“--”，用等号或者空格替换内部的虚线“--”只能出现在XHTML注释的开头和结束，在注释内容中不再有效。hrwidth=400noshade=noshade/!--这里是注释========这里是注释--11文档类型DOCTYPE是documenttype的简写，用来声明文档类型，浏览器根据DOCTYPE定义的DTD（文档类型定义）来解释页面代码。XHTML1.0提供了三种DOCTYPE：过渡型（transitional）这是一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合XHTML语法标准），过渡的DTD的写法如下：严格型（strict）是一种要求严格的DTD，不允许使用任何表现层的标识和属性。严格的DTD的写法如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN文档类型框架型（frameset）这是一种专门针对框架页面所使用的DTD，当页面中包含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：网页设计中使用严格的DTD当然是最理想的方式，但对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的DTD，因为这种DTD可以兼容html，也比较容易通过w3c的代码校验()。!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN“”13声明名字空间在html元素中必须使用xmlns（xmlnamespace）属性声明文档的名字空间。一个名字空间是收集元素类型和属性名字的一个详细的DTD，它允许通过一个URL指向来识别名字空间。为什么要使用名字空间？因为xml允许网页设计者定义自己的标签，为了避免相同标签产生冲突，xml采用名字空间声明。允许通过一个网址指向来识别特定的标签。由于xhtml是html向xml过渡的标记语言，需要符合xml文档规则，因此也需要定义名字空间，而xhtml1.0不能自定义标识，所以它的名字空间指向都相同。14结构元素根元素html用来定义XHTML文档数据区域格式为：htmlxmlns=文档内容/html15结构元素文档头元素head：用来描述文档的基本信息，可以包含title、meta等元素，该部分内容不显示在浏览器中。title元素位于head标签所包含的范围内，标示网页文件的标题标题出现于浏览器的标题栏中，每页需要有明确的标题title简单的HTML例子/titlemeta元素用来指定HTML文档的相关属性，帮助主页被各大搜索引擎登录、定义页面的使用语言等。16结构元素文档体元素body：包含网页中所有可显示的内容。文字颜色背景色超链接点击过的超链接点击超链接平铺图象做为背景bodytextbgcolorlinkvlinkalinkbackgroundbodybgcolor=blacktext=yellowbodybackground=images/bg2.giftext=bluelink=red17色彩的使用颜色的使用有两种方法：颜色名、颜色值使用颜色名基本颜色名扩展颜色名bodybgcolor=navytext=orange18色彩的使用使用颜色值text=#FF0000RGB加色法256×256×256=1677万bodybgcolor=#000080text=#FFA50019常用颜色表20段落与文本元素用来控制段落和文本显示的元素可分为4类：控制段落文本的格式元素p和div用来控制文本换行、预设格式和分割文本内容的元素br、pre、hr用来控制标题的元素h1、h2、h3、h4、h5、h6控制文字显示效果的元素strong、em、i等21段落与文本元素段落元素p用来划分文档段落,p和/p之间的文字是一个段落palign=right还可选left，center段落内部自动换行段落之间有一行半的垂直距离palign=center清华大学介绍/ppalign=left    清华大学是中国著名高等学府，坐落于北京西北郊风景秀丽的清华园。今天的清华大学面临前所未有的历史机遇，清华人秉承“自强不息、厚德载物”的校训、“行胜于言”的校风以及“严谨、勤奋、求实、创新”的学风，为中华民族的伟大复兴而努力奋斗。/ppalign=right2017年3月1日/p22段落与文本元素换行元素br令文字、图像、表格等在下一行显示。浏览器会自动忽略HTML代码中空格和回车！春眠不觉晓，br/处处闻啼鸟。br/夜来风雨声，br/花落知多少？br/春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少？23段落与文本元素水平线元素hr宽度hralignsizewidthcolornoshade/对齐方式高度颜色无阴影align：left，right，centersize：单位是像素width：像素或百分比noshade：设定线条为平面显示hrhrsize=4noshade=noshadehralign=leftwidth=70%color=#FF00FFhrsize=4width=150color=#BF80CC24段落与文本元素使文字、图像、表格等居中显示居中元素center（xhtml不鼓励使用）center欢迎光临燕达的主页/centercenterimgsrc=line2.gif“//centercenterimgsrc=fighter2.gif“/imgsrc=cat_thin.gif/imgsrc=fighter1.gif//centercenterimgsrc=line1.gif//center25段落与文本元素区域元素div为文档分节，使文档的不同部分应用不同的格式，常配合样式表使用。div的常用属性有align、style、class，其中style和class配合样式使用，align属性用来定义区域的水平对齐方式，有四个取值：left、center、right、justify。div包含的内容/divdivalign=center春眠不觉晓，br/处处闻啼鸟。br/夜来风雨声，br/花落知多少？br//div26段落与文本元素按照源代码的排列方式显示（保留源代码中的空格和回车）预设格式元素pre不换行元素nobr建议折行元素wbr令某些文字不因太长而绕行，显示于同一行或下一行预设折行部位27段落与文本元素标题元素h共有6级，h1，h2，h3，h4，h5，h6每个标题标记所标示的字句将独占一行且上下留一空白行h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6h1alignleftrightcenter28段落与文本元素设置文字显示的元素分两类：基于物理样式、基于内容基于物理样式的元素有加