xhtml的编写规范是什么_第1页
xhtml的编写规范是什么_第2页
xhtml的编写规范是什么_第3页
xhtml的编写规范是什么_第4页
xhtml的编写规范是什么_第5页
已阅读5页,还剩14页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

xhtml 的编写规范是什么篇一:XHTML 和 CSS 开发规范与命名参考XHTML 和 CSS 开发规范与命名参考 目录 1 Web 标准 . 2 2 Web 标准是什么?. 2 采用 web标准的好处.2 页面的基本构成和开发标准. 4 选择合适的 DOCTYPE 现阶段统一使用 Transitional 标准 5 定义名字空间 标准必须引用 . 5 定义语言编码 默认使用 utf-8 编码. 5 下面的语句是针对老版本浏览器写的,以保证各种浏览器都能正确解释页面。 5 设置页面标题,必须设置,不准留空。必须根据页面内容进行设置,不准随调用样式表,除简单的独立页面之外全部采用外部调用的方式加载样式表 5 HEAD 区域其它相关设置 .5 CSS 统一放在里,不允许放在里 . 6 内的模块都要加注释 标准注释格式如下:. 6 便设置。 . 5 各个模块合理嵌套和缩进 缩进一律用 Tab,禁止用空格. 6 页面中的图片,必须填写 alt 属性,不允许为空。6 尽可能少的使用 target=”_blank”,不要总是让用户在新标签页中打开网页 6 每页有尽可能少的 HTTP 请求。. 6 尽可能的使用 css sprite 技术,减少页面中图片请求数量 7 同一个页面中尽量避免重复包含 CSS 文件或 JS 文件。7 绝对不允许引用其他网站的 css 和 Javascript 等文件。. 7 3 (X)HTML 书写规范 . 74 基本书写规范.7 相关标签的语义 . 7 模块效果与标签写法. 8 CSS 编码规范. 9 基本书写规范.9 CSS 命名参考. 10 5 6 其它规范 .13 页面质量评估标准 .13 1 Web 标准 Web 标准是什么? “WEB 标准”是一系列标准的总称,包括、 、 、 、 、 、 等等。一般的误区经常把 WEB 标准说成 DIV+CSS。准确的说法应该是:采用 W3C 推荐的 WEB 标准中的 结合 样式表制作页面的方法,DIV 应该指的是 XHTML 标签,而 CSS 指的是样式表了。 1. 采用 web 标准的好处 节约运营成本 采用 WEB 标准制作,我们可以做到表现和形式及内容的分离,我们采用 XHTML 语言来表现(数据),用 CSS 来控制(页面元素呈现的)形式。写的好的页面,XHTML 代码中基本上都是用户要看的数据,而其他修饰性的东西,全部由 CSS 来控制。这样一来(XHTML)页面的体积就大大减小了,这样带宽上的费用就会大家降低了 2. 用户友好性 第一类:普通用户(每个访问我们网站的人); 第二类:搜索引擎; 第三类:更多的设备(手机、PDA、媒体机等) 采用 WEB 标准开发的页面,结构清晰,页面体积小,浏览器兼容性好。普通用户访问的时候,页面打开速度快,而且不管用户使用那种浏览器,都能够正常访问(显示)页面,且页面的结构清晰,要找的数据可以很方便的浏览到。而对搜索引擎来说,一个好的采用 WEB 标准开发的页面,都是做过 SEO 优化的,访问起来很友好,很容易理解页面中哪里是标题(H1H6 标签),哪里是段落(p 标签),哪里是段落里要强调的内容(strong 标签) 等,它可以很容易的分析出来。而一个 SEO 好的站点,被搜索引擎收录的机会更多,这个也意味着会被更多的普通用户访问到,搜索引擎会带来更多的用户。随着智能手机的大量普通及 Wifi 配置渐渐成为主流,手机上网需求变得越来越迫切,以使我们也不得不考虑到页面在手机上的显示,对于当前标准化形式下,基于标准,将是可行之道! 3. 内容跨平台的可用性 通过将内容与设计进行分离的方法,可以使信息以较低的成本实现跨平台的转换。 4. 加快页面解析速度 通过实际测试证明,采用内容与设计分离的结构进行页面设计,可使浏览器对网页的解析速度大幅提高,相对于老式的内容与设计混编的方法,浏览器在解析中可以更好的解析结构、内容和设计。 5. 更良好的用户体验 采用表现与内容分离技术使我们在建设网站时,能够充分的对网站的内容、设计统一性、可用性进行思考与设计,从而提高网站的可用性,改善用户体验及印象。同时更加适用于在 web 浪潮中不断变化的互联网形态。 2 页面的基本构成和开发标准选择合适的 DOCTYPE 现阶段统一使用 Transitional 标准 定义名字空间 标准必须引用 定义语言编码 默认使用 utf-8 编码 下面的语句是针对老版本浏览器写的,以保证各种浏览器都能正确解释页面。 设置页面标题,必须设置,不准留空。必须根据页面内容进行设置,不准随便设置。 页面标题标准命名原则: 各级首页:开心网 - 宣传语 子频首页:开心网 - 子频道名 - 宣传语 内容页:内容标题 - 子频道标题 - 开心网 专题页:专题标题 开心网 调用样式表,除简单的独立页面之外全部采用外部调用的方式加载样式表 外部调用法:将样式表写在一个独立的.css 文件中,然后在页面 head 区用以下代码调用。HEAD 区域其它相关设置 收藏夹图标: 允许搜索机器人搜索站内所有链接 篇二:HTML 与 XHTML 的区别HTML 与 XHTML 的区别 HTML 与 XHTML 是一种语言还是两种语言?基本上可以认为,它们是一种语言的不同阶段,有点类似于文言文和白话文之间的关系。因此它们也经常被写作(X)HTML。下面首先从它们的渊源和区别开始本教程的讲解: 一、追根溯源 (X)HTML 是所有上网的人每天都离不开的基础,所有网页都是使用(X)HTML 编写的。随着网络技术日新月异的发展HTML 也经历了不断的改进。可以认为 XHTML 是 HTML 的“严谨版” 。 HTML 在初期,为了它更广泛地被接受,大幅度放宽了标准的严格性,例如标记可以不封闭,属性可以加引号,也可以不加引号,等等,导致出现了很多混乱和不规范的代码。这 显然不符合标准化的发展趋势,影响了互联网的进一步发展。 为此,相关规范的制订者W3C 组织一直在不断地努力,逐步推出新的版本规范。从 HTML 到 XHTML大致经历了以下几个版本。 HTML : 于 1995 年 l 1 月发布。 HTML : 于 1996 年 1 月 14 日发布 HTML : 于 1997 年 12 月 18 日发布。 HTML (微小改进): 于 1999 年 12 月 24 日发布, XHTML : 于 XX 年 1 月发布,后叉经迂修订于 XX年 8 月 1 日重新发布。 XHTML : 于 XX 年 5 月 31 日发布。 XHTML : 正在制定中。 在正式的标准序列中,没有版,这是因为在最初阶段各个机构都推出了目己的方案,没有形成统一的标准。因此W3C 组织发布的 HTML 是形成标准以后的第一个正式规范。 这些规范实际上主要是为浏览器的开发者阅读的,因为他们必须了解这些规范的所有细节。而对于网页设计师来说,并不需要了解规范之间的细微差别,这与 实际工作并不十分相关。因此,网页设计师通常只要知道一些大的原则就可以了。而且这些规范的文字也都比较晦涩,并不易阅读。当然如果设计师真的能够花 一 些时间把 HTML 和 css 的规范仔细通读一遍,将会有巨大的收获。因为这些规范是所有设计师的“圣经” 。 知识:W3C 组织就是 World Wide Web Consortium(全秋万维网联盟)的简称。W3C 组织创建于 l994 年研究Web 规范和指导方针,致力于推动 Web 发展,保证各种 Web技术能很 好地协同工作。W3C 的主要职责是确定来来万维网的发展方向,并且制定相关的建议(Recommendation由 W3C 是一个民间组织,没有约束性,因此只提供建议) 。HTML 规范建议(HTML Specification Recommendation)就是由 W3CF 制定的。它还负制CSS、XML、XHTML 和 MathML 等其他网络语言规范。 二、DOCTYPE(文档类型)的含义与选择 从 Dreamweaver MX XX 版开始,在使用 Dreamweaver新建一个网页文档的时候,默认情况下生成的基本网页代码是这样的: 1. 2. “/retype/zoom/970136156edb6f1aff001f3f?pn=2&x=0&y=0&raww=254&rawh=113&o=png_6_0_0_303_893_286_127_&type=pic&aimh=113&md5sum=ca7273bf4651791be32d51591aad59ae&sign=84db2e07c1&zoom=&png=124-15113&jpg=0-0“ target=“_blank“点此查看 图 1 在 Dreamweaver 中选择文档类型对于 HTML 和 XHTML 分别对应于一种严格(Strict)类型和一种过渡(Transitional)类型。过渡类型兼容以前版本定义的,而在新版本已经废弃的标记和属性。严格类型则不兼容已经废弃的标记和属性。 注意:目前,建议读者使用 XHTML transitional(XHTML 过渡类型) ,这样设计师可以按照XHTML 的标准书写符合 Web 标准的网页代码。司时在一些特蛛情况下还可以使用传统的做法。三、XHTML 与 HTML 的重要区别 尽管目前浏览器都兼容 HTML但是为了使网页能够符合标准,设计师应该尽量使用 XHTML 规范来编写代码,需要注意以下事项。 1.在 XHTML 中标记名称必须小写 在 HTML 中,标记名称可以大写或者小写。例如,下面的代码在 HTML 中是正确的。 1. 2. 3. 网页学习网() 但是在 XHTML 中,则必须写为: 1. 2. 3. 网页学习网() 2.在 XHTML 中属性名称必须小写 HTML 属性的名称也必须是小写的。例如,在 XHTML 中下面的代码的写法是错误的。 1. 正确的写法应该是: 1. 3.在 XHTML 中标记必须严格嵌套 HTML 中对标记的嵌套没有严格的规定。例如,下面的代码在 HTML 中是正确的。 1. 这行文字以粗体倾斜显示 然而在 XHTML 中,必须改为: 1. 这行文字以粗体倾斜显示 此外,经常被忽略的是对列表标记的嵌套写法。例如,下面的写法在 XHTML 中是错误的。 1.2. 3. 4. 5. 6. 7. 8. 9. 咖啡茶 红茶 绿茶 牛奶 正确的写法是: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 咖啡 茶 红茶绿茶 牛奶 4.在 XHTML 中标记必须封闭 在 HTML 规范中,下列代码是正确的。 1. 2. 网页学习网 上述代码中,第 2 个 标记就意味着前一个 标记的结束,但是在 XHTML 中,这是不允许的,二必须严格地使标记已封闭,正确写法如下所示。 1. 2. 网页学习网 5.在 XHTML 中,即使是空元素的标记也必须封闭 这里说的空元素的标记,就是指那些, 等不成对的标记,它们也必须封闭,例如下面的写法是错误的。1. 2. 3. 换行 水平线 图像正确的写法应该是:1. 2. 3. 换行 水平线 图像 6.在 XHTML 中属性值用双引号括起来 在 HTML 中,属性可以不必使用双引号,例如: 1. 而在 XHTML 中,必须严格写作: 1. 7.在 XHTML 中属性值必须使用完整形式 在 HTML 中,一些属性经常使用简写方式设定属性值,例如: 1. 而在 XHTML 中,必须完整地写作: 1. 8.在 XHTML 中,应该区分“内容标记”与结构标记”例如 标记是一个内容标记,而标记是结构标记,因此不允许将标记置于 内部。而如果将 标记置于之间,则是完全正确的。 有时这种错误不容易被注意到,在 Dreamweaver 中也得不到提示。但是在微软公司新推出的网页制作软件 Expression Web 中。则会给出明确的提示,如图 2 所示。 图 2 在 Expression Web 中提示错误 在标记的下方出现红色波浪线,表示存在错误。将鼠标指针移动到 标记上,则会出现提示文字“在 XHTML Transitional 中,标记 不能包含标记” 。有兴趣的读者可以尝试一下这个新的网页设计软件。 篇三:HTML+CSS 编写规范HTML+CSS 编写规范 在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一、代码维护和扩展。由于 Web 项目开发的分散性、独立性、整合的交互性等,所以定制一套完整的约定和规则显得尤为重要。第一节 CSS 样式文件的命名 建立样式表文件时,分类编写样式到下列样式表文件中,并统一放在【CSS】文件夹里: 在项目初期,会把不同类别的样式放于不同的 CSS 文件,是为了 CSS 编写和调试的方便,在项目后期会为了网站性能上的考虑会整合不同的 CSS 文件到一个 CSS 文件,必要时可压缩。 第二节 CSS 选择符的命名所 有选择符必须有小写英文字母或“_”下划线组成,样式名必须是表示该样式的大概含义(禁止出现如Div1、div2、Style1?) ,参考后面的“样 式命名参考” 。对 CSS 选择器的使用只允许派生选择器、类选择器和属性选择器,以及它们的组合使用,严禁使用 ID 选择器(ID 是用于 JavaScript 的编写) 。 如:li span ? ?inputtype=“text“? 当定义的样式名比较复杂时用下划线把层次分开,比如:dcrm_logo ? dcrm_logo_ico? 第三节 图片的命名与书写 图片的命名原则小写英文字母名称放在头尾两部分,用“_”下划线隔开,头部表示此图片的大类性质例如广告、标志、菜单、按钮等等;尾部表示图片的概念。设计人员在 PS 中保存图片时,请使用“文件”“存储为 Web 和设备所用的格式” 。 第四节 CSS 注释书写规范提示和标签信息注释 这是注释最常用的途径,可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最为重要。 注意:注释内容和前面样式语句间有 3 个空格,后面1 个空格修改样式注释(时间和相关人员) 文档结构注意:相对独立的 2 段内容之间空 1 行。 第五节 CSS 布局编码标准和建议建立样式表索引 样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息,它一般是一段格式化的 CSS 注释文本写在 中。给出该 CSS 文件作者的相关信息;定义站点的布局,记录文件版本号(利于多作者协作及将来更新) 命名锚点 的使用命 名锚点是用来规划整个 CSS 文件结构的(就好像书签一样) ,从而使整个 CSS 文件获得良好的组织

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论