HTML页面制作白皮书_V201111.docx

HTML页面制作白皮书设计制作部制作组 2011.11内容介绍HTML页面制作白皮书，围绕编辑在专题制作过程中的实际需要的代码知识，全面介绍了HTML和CSS的基本应用。每章节配合简单示例，并结合我网页面规范加以讲解，帮助大家更快入门；常见问题一览表，汇总了编辑在日常专题制作过程中遇到的问题，针对性给予解答。每一章节内容由三部分组成：1. 知识讲解2. 效果示例3. 相关规范其中，1、2属于知识性内容，编辑可根据自己情况选择性阅读；3为我网规范，所有编辑都须熟悉并遵守。鉴于编辑对代码熟悉程度不同，本文档不能满足所有编辑的学习需求，请见谅。希望本文档对您的工作有所帮助，有任何建议或意见请联系设计制作组，期待您的反馈。目录1. HTML页面构架2.HTML标签3. HTML标签实例4. HTML常用标签一览5. HTML属性6. HTML样式7.常见问题一览表1. HTML页面构架知识讲解本节通过一个简单例子，了解HTML页面的构成元素。以下示例可以通过Dreamweaver等编辑器工具来书写。HTML代码示例： 凤凰网 这是一个简单页面，这些文字会被显示在浏览器中。效果示例解释： 文档声明，告诉浏览器使用的文档类型。 标签限定了文档的开始点和结束点 标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）body 元素的内容会显示在浏览器中。相关规范01严格HTML页面框架结构。02之间内容显示在浏览器的标题栏中，根据专题内容进行更改，不得为空，不得使用与html代码规范混淆的标点。2. HTML标签2.1.概述知识讲解页面内容是通过 HTML 标签进行标记的，本节来认识HTML标签，示例最常用标签。 HTML 标签由开始标签和结束标签组成，开始标签是被括号包围的元素名，结束标签是被括号包围的斜杠和元素名，例如 XXXXXXX大部分情况下，浏览器对标签内的字母大小写不敏感，但从规范角度考虑统一采用小写。相关规范1. 标签必须完整闭合，除自完结标签外，开始标签与结束标签必须匹配成对，并且位置对称；2. 常用自完结标签包括： 2.2.标题标签知识讲解HTML 标题是通过 - 等标签进行定义的。HTML代码示例： 这里是标题这里是标题这里是标题相关规范 - 标签用来定义标题。我网常用、，一个页面只用唯一，来定义页面头条。用来定义第二头条，可重复使用。倾向于第三头条或者图文的标题。2.3.段落标签知识讲解HTML 段落是通过 标签进行定义的。HTML代码示例： 这里是段落这里另一段段落2.4.链接标签知识讲解HTML 链接是通过 标签进行定义的。HTML代码示例： 这里是链接2.5.图片标签知识讲解HTML 图像是通过 标签进行定义的。HTML代码示例：（图像的名称和尺寸是以属性的形式提供的。HTML属性将在下一节介绍。） 相关规范通过 标签定义图像。图像的名称和尺寸是以属性的形式提供的。alt 和title不得为空。alt是在图未下载的时候，图片内容的提示；title则是为了方便搜索引擎。2.6.列表标签 知识讲解 标签定义列表组，标签定义列表单元。HTML代码示例：（请注意结构） 首页 资讯 娱乐3. HTML标签应用实例HTML代码示例1：（其中涉及到样式和标签属性的部分会在后面的章节中进一步介绍）资讯频道_凤凰网/*链接颜色*/acolor:#004276;a:hovercolor:#ba2636;/*外框*/.box260width:260px;margin:0 auto;/*要闻*/.hgrouppadding:12px 0 8px 0;background:url(images/dotline.gif) repeat-x bottom;.hgroup h1font:normal 20px/22px 黑体;.hgroup h2font:normal 18px/20px 黑体;.hgroup h3color:#004276;font:normal 14px/22px 宋体; 第一头条，页面唯一H1的标签 这里是第三头条这里是第三头条 这里是第三头条这里是第三头条 这里是第二头条，规范用H2标签 这里是第三头条这里是第三头条 这里是第三头条这里是第三头条 效果示例HTML代码示例2：（其中涉及到样式和标签属性的部分会在后面的章节中进一步介绍）资讯频道_凤凰网acolor:#004276;a:hovercolor:#ba2636;/*外框*/.box260width:260px;margin:0 auto;/*新闻列表*/.listpadding:8px 0;.list liline-height:22px;.list li spanfloat:right;color:#666;font-size:12px;/*图文*/.picTxt lifloat:left;width:120px;padding:5px 20px 6px 0;.picTxt li.endpadding-right:0;.picTxt li imgmargin-bottom:4px;display:block;.picTxt h3font-weight:normal;font-size:12px;line-height:18px; 12:30新闻列表新闻列表新闻列表 12:30新闻列表新闻列表新闻列表 图片标题 图片标题 页面预览：效果示例4. HTML常用标签一览HTML 常用标签，请严格按照规范书写：（标红的标签为非成对标签即自完结标签）html框架类标签描述代表文档开始文档主体，显示在浏览器里文档头信息提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。文档的标题 XXhtml注释标签，内容不现实在浏览器里，作为友好提示。用法如示例：学习页面其他常用标签描述html层- 块标签html段落标签-里面可以加入文字,图片等 HTML列表，每一列使用标签定义列表内容toh1, h2, h3, h4, h5, h6- 文章的标题标签 定义文档中的行内元素定义链接定义要强调显示的内容，加粗效果 规定文本的字体、字体尺寸、字体颜色在 HTML 4.01 中，font 元素不被赞成使用。请用样式来定义文字图像标签，img标签是单独出现的，例如：换行标签，简单地开始新的一行。它没有结束标签html表格类标签描述表格用来表示表格的表头，表头的字是粗体显示的表格中的一行表格中的一个单元格html表单类标签描述表单标签 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。 .input标签是单独出现的选择列表标签多行的文字输入域5. HTML属性知识讲解HTML 标签可以拥有属性。属性定义了 HTML 元素的更多的信息。下面示例代码中，红色的部分就是属性的定义。属性总是以名称/值的形式出现，比如上面图片例子中的：width=40属性总是在 HTML 元素的开始标签中定义。HTML代码示例：凤凰网这是一个链接6. HTML样式通过几个例子，了解CSS语法和CSS样式三种创建方式6.1 CSS语法6.1.1 CSS基础语法：知识讲解 规则由两个主要的部分构成：选择器，以及一条或多条声明。如下图示例：相关规范01. 声明使用花括号来包围；02. 如果值为若干单词，则要给值加引号；03. 注意大小写，一律用小写；04. 每个属性定义以分号隔开。6.1.2 CSS 类选择器：知识讲解下面的HTML代码中，定义了字的大小、颜色、行高.f14 color: #ff6600; font-size:14px;line-height:22px;下面的HTML代码，引用了f14这个类 这个段落是14号字。类可以被重复引用。相关规范01. 类选择器以一个点号显示；02. 类名的第一个字符不能使用数字；6.1.3 CSS id 选择器：知识讲解id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#red color:red;#green color:green;下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。这个段落是红色。这个段落是绿色。相关规范01. id 选择器以 # 来定义。02. id 属性只能在每个 HTML 文档中出现一次。6.2 如何创建样式知识讲解当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。创建样式的方法有三种：外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 标签在文档头部定义内部样式表，尽量避免多个style标签的出现，将css放在一个style中。 hr color: sienna; p margin-left: 20px; body background-image: url(images/back40.gif);内联样式由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法。要使用内联样式，你需要在相关的标签内使用样式（style）属性。This is a paragraph综合示例：凤凰网.col width:500px; margin:0 auto; padding-top:30px;.col_L float:left;width:210px;height:50px;background:#cccccc;padding:5px; .col_R float:left;width:270px;height:80px;background:#eeeeee;padding:5px; 这是左列，文字颜色变红色了。这是右列，字号变大了。效果示例本节规范：相关规范01. 我网页面统一链接基础样式定义basic_new_v2.css02. 引用的class，必须是在样式里定义过的，样式名自定义，尽量语义化。03. 注意CSS放置的位置，放在前面是规范的做法。特殊情况下，比如改不了模板，可以直接在碎片内部定义样式。结构如蓝色代码示例，放在页面标签开始前或者标签闭合后位置。7. 常见问题一览表序号问题解决01页面错位怎么办？初步排查思路：1. 加了哪段代码出错，仔细检查该段代码2. 检查标签闭合情况3. 检查页面前面部分HTML结构是否严格。02从专题拷贝模块到另一专题，样式缺失怎么办？查找该模块引用到的CLASS和ID，从模块来源处的样式表，把相应样式拷贝到该专题。03HTML绝对路径和相对路径？HTML绝对路径指带域名的文件的完整路径。HTML相对路径指同一个目录的文件引用。为了加深理解，见下图示例：上面是绝对路径，底下是相对路径。04文字文字所引用的样式不起作用？1. 检查所引用 .XXXX 样式是否定义2. 检查样式是否被重复定义05无法改动模板，那要单独定义某个碎片怎么办？在碎片内部另外定义style06如何给图片加热区？选中所需要的图片，在Dreamweaver中的属性面板的左下方有三个热点工具，用来固定图片上的链接区域，选择相应工具，拖动出一定的渔区，根据自己的需要创建该区域的链接地址。07文字这种方式可以实现单独的颜色定义，但是不提倡使用。08样式命名有什么规则？1. 一律小写；2. 以英文开头，可以结合数字和下划线；3. 尽量语义化。09怎么保存HTML源文件？单击查看源文件菜单项，即可打开一个文本，或者鼠标放置到页面任何位置，右键菜单选择查看源文件，会打开一个文本，这里面的代码就是源文件，然后文件/保存即可。10如何创建电子邮件链接？11浏览器不兼容怎么办？了解各浏览器特性，针对定义。这块情况较复杂，可以找制作组协助解决。 12如何去除新闻链接？文字文字文字文字例如以上新闻要去掉链接，需要去掉整个a，标红的代码都需要去掉。防止出现文字文字文字文字连接去除不完全的错误。13如何改文字字体，字号，颜色，行间距？通过定义font-family，font-size，color，line-height属性来修改14如何书写style行内样式？例如: 文字文字文字15如何引用多个样式表？引用多个link16区块之间如何缩小或者加大间距？margin 或padding 例如： margin