HTML页面制作白皮书_V201111..docxVIP

HTML页面制作白皮书设计制作部·制作组 2011.11内容介绍HTML页面制作白皮书，围绕编辑在专题制作过程中的实际需要的代码知识，全面介绍了HTML和CSS的基本应用。每章节配合简单示例，并结合我网页面规范加以讲解，帮助大家更快入门；常见问题一览表，汇总了编辑在日常专题制作过程中遇到的问题，针对性给予解答。每一章节内容由三部分组成：知识讲解效果示例相关规范其中，1、2属于知识性内容，编辑可根据自己情况选择性阅读；3为我网规范，所有编辑都须熟悉并遵守。鉴于编辑对代码熟悉程度不同，本文档不能满足所有编辑的学习需求，请见谅。希望本文档对您的工作有所帮助，有任何建议或意见请联系设计制作组，期待您的反馈。目录1. HTML页面构架2.HTML标签3.HTML标签实例4. HTML常用标签一览5. HTML属性6. HTML样式7.常见问题一览表HTML页面构架知识讲解本节通过一个简单例子，了解HTML页面的构成元素。以下示例可以通过Dreamweaver等编辑器工具来书写。HTML代码示例：!DOCTYPE html html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title凤凰网/title /headbodyp这是一个简单页面，这些文字会被显示在浏览器中。/p/body/html效果示例解释：◆!DOCTYPE html文档声明，告诉浏览器使用的文档类型。◆html/html标签限定了文档的开始点和结束点◆head 标签用于定义文档的头部，它是所有头部元素的容器。head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。◆meta 元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。◆body/body元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）body 元素的内容会显示在浏览器中。相关规范01．严格HTML页面框架结构。02．title/title之间内容显示在浏览器的标题栏中，根据专题内容进行更改，不得为空，不得使用与html代码规范混淆的标点。HTML标签2.1.概述知识讲解页面内容是通过 HTML 标签进行标记的，本节来认识HTML标签，示例最常用标签。HTML 标签由开始标签和结束标签组成，开始标签是被括号包围的元素名，结束标签是被括号包围的斜杠和元素名，例如divXXXXXXX/div大部分情况下，浏览器对标签内的字母大小写不敏感，但从规范角度考虑统一采用小写。相关规范标签必须完整闭合，除自完结标签外，开始标签与结束标签必须匹配成对，并且位置对称；常用自完结标签包括：br / img / input /2.2.标题标签h知识讲解HTML 标题是通过 h1 - h6 等标签进行定义的。HTML代码示例： h1这里是标题/h1h2这里是标题/h2h3这里是标题/h3相关规范h1/h1 - h6/h6标签用来定义标题。我网常用h1/h1、h2/h2、h3/h3，一个页面只用唯一h1/h1，来定义页面头条。h2/h2用来定义第二头条，可重复使用。h3/h3倾向于第三头条或者图文的标题。2.3.段落标签p知识讲解HTML 段落是通过 p 标签进行定义的。HTML代码示例：p这里是段落/pp这里另一段段落/p2.4.链接标签a知识讲解HTML 链接是通过 a 标签进行定义的。HTML代码示例：a href=这里是链接/a2.5.图片标签img知识讲解HTML 图像是通过 img 标签进行定义的。HTML代码示例：（图像的名称和尺寸是以属性的形式提供的。HTML属性将在下一节介绍。）img src=picn_ame.jpg width=160 height=50 alt=”图片说明” title=”图片说明” /相关规范通过 img 标签定义图像。图像的名称和尺寸是以属性的形式提供的。alt 和title不得为空。alt是在图未下载的时候，图片内容的提示；title则是为了方便搜索引擎。2.6.列表标签ul li知识讲解ul 标签定义列表组，li标签定义列表单元。HTML代码示例：（请注意结构）ulli首页/lili资讯/lili娱乐/li/ulHTML标签应用实例HTML代码示例1：（其中涉及到样式和标签属性的部分会在后面的章节中进一步介绍）!DOCTYPE htmlhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title资讯频道_凤凰网/titlelink type=te