`
liujun11
  • 浏览: 21202 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

HTML css书写规范的建议

 
阅读更多

为什么要规范?

1,降低每个组员介入项目的门槛成本;

2,提高工作效率及协同开发的便捷性;
3,高度统一的代码风格;

4,提供一整套HTML、CSS解决方案,来帮助开发人员快速做出高质量的符合要求的页面;

 

 

css通用约定

 (1)分离

结构(HTML)、表现(CSS)、行为分离(JavaScript) 将结构与表现、行为分离,保证它们之间的最小耦合,这对前期开发和后期维护都至关重要
(2) 缩进
使用tab(4个空格宽度)来进行缩进,可以在IDE里进行设置
(3)编码
以 UTF-8 无 BOM 编码作为页面格式;
在HTML中文档中用 来指定编码;
不需要为CSS显示定义编码,因为它默认为utf-8;
(4)小写
所有的HTML标签必须小写
所有的HTML属性必须小写
所有的样式名及规则必须小写
(5)注释
尽可能的为你的代码写上注释。解释为什么要这样写,它是新鲜的方案还是解决了什么问题。

(6)行尾空格

删除行尾空格,这些空格没有必要存在

 

 HTML规范

 (1)文档类型
统一使用HTML5的标准文档类型:<!doctype html> HTML5文档类型具备前后兼容的特质,并且易记易书     写
在文档doctype申明之前,不允许加上任何非空字符 任何出现在doctype申明之前的字符都将使得你的             HTML文档进入非标准模式
不允许添加属性强制改变文档模式 避免出现不可控的问题

(2)省略type属性

在调用CSS和JavaScript时,可以将type属性省略不写 不推荐:
<link type="text/css" rel="stylesheet" href="base.css">
<script type="text/javascript" src="base.js"></script>
 推荐:
<link rel="stylesheet" href="base.css">
<script src="base.js"></script>
 (3)属性值省略
非必须属性值可以省略
不推荐:
<input type="text" readonly="readonly">
<input type="text" disabled="disabled">
 
推荐:
<input type="text" readonly>
<input type="text" disabled>
 (4)使用img的alt属性
为img元素加上alt属性
不推荐:
<img src="banner.jpg">

推荐:
<img src="banner.jpg" alt="520即将到来,爱就大声说出来">
(5)格式
将每个块元素、列表元素或表格元素都放在新行
Inline元素视情况换行,以长度不超过编辑器一屏为宜
每个子元素都需要相对其父级缩进
不推荐:
<div><h1>asdas</h1><p>dff<em>asd</em>asda<span>sds</span>dasdasd</p></div>

推荐:
<div>
   <h1>asdas</h1>
   <p>dff<em>asd</em>asda<span>sds</span>dasdasd</p>
</div>
 
分享到:
评论

相关推荐

    HTML页面CSS书写规范(大型网站统一规范)

    ### HTML页面CSS书写规范详解 #### 一、概述 随着互联网技术的发展,网站的设计与建设变得日益重要。为了确保网站的美观性和一致性,制定一套统一的CSS书写规范至关重要。本篇文章将详细介绍《HTML页面CSS书写规范...

    css书写规范 web设计css

    以下是对CSS书写规范的一些基本要点和建议。 #### 1. 结构化命名 在CSS中合理地命名选择器是非常重要的。通过使用具有描述性的命名规则可以增强代码的可读性。例如: - `header`: 页面头部区域。 - `loginBar`: ...

    css书写代码要求规范

    ### CSS书写代码要求规范 #### 一、引言 CSS(Cascading Style Sheets),即层叠样式表,是用于描述HTML文档外观和格式的一种样式语言。随着网站复杂度的提高,良好的CSS代码规范变得尤为重要。它不仅能提高代码的...

    CSS书写规范

    ### CSS书写规范详解 #### 一、常规书写规范及方法 **1. 选择DOCTYPE** 在开始编写HTML或XHTML文档之前,选择正确的文档类型声明(DOCTYPE)非常重要。DOCTYPE不仅帮助浏览器确定如何解析文档,还能确保文档符合...

    CSS_命名规范参考及书写注意事项.rar

    本资料“CSS_命名规范参考及书写注意事项”将为你提供相关的指导原则。 1. BEM(Block Element Modifier)命名法:BEM是一种流行的CSS命名方法,由Yandex公司提出。它的核心理念是将CSS类名分为三部分:Block(块)...

    CSS参考手册_第3章__CSS基础与书写规范

    ### CSS参考手册_第3章__CSS基础与书写规范 #### CSS基础知识概览 CSS,全称Cascading Style Sheets,即层叠样式表,是由W3C组织制定的用于控制网页样式的标记语言。其核心功能在于允许网页设计者独立于HTML结构来...

    HTML+CSS布局、规范、兼容

    规范方面,为确保不同浏览器下的兼容性,建议统一定义常用标签的默认属性,可以通过引入一个基础样式文件(如base.css)来实现。使用DOCTYPE声明可以确保文档按标准模式解析。指定文档的语言和字符集,确保内容正确...

    CSS编码规范.docx

    非主要内容的装饰性图片,建议作为背景图片处理,以方便通过CSS调整而无需修改HTML。例如,`.logo`的背景图片设置。 5. **结构与样式分离** HTML文件只包含结构,所有样式定义在CSS文件中,通过外部链接引入,...

    书写高效的CSS

    ### 书写高效的CSS #### 概述 在Web开发领域,CSS(层叠样式表)是一种用于描述HTML或XML文档的外观和格式的语言。随着Web技术的发展与网站复杂度的提升,编写高效的CSS成为了前端工程师的一项必备技能。本文将...

    TOM_HTML_CSS开发规范

    - **DOCTYPE选择**: 规范建议使用XHTML1.0 Transitional DOCTYPE,这是为了兼容不同浏览器,并允许使用某些过渡性的HTML元素。 - **定义名字空间**: 遵循W3C标准,所有XHTML文档应引用`...

    如何规范 CSS 的命名和书写

    本文将详细介绍如何规范CSS的命名和书写,包括CSS书写顺序、书写规范、命名规范、以及一些实用的技巧。 #### CSS书写顺序 为了提高CSS代码的可读性和维护性,可以按照以下顺序组织属性: 1. **位置属性**:如`...

    html+css文档.pdf

    Html+Css 代码书写时,要结构清晰,能够手动书写,尽量少用"套用源格式"。在 Html 代码中,父级标签跟子级标签,最好换行之后空出"2 个空格"。在 Css 代码中,可以用空格划分各属性,也可以将相同类型的属性放在同一...

    Web前端开发规范手册-html5-css3.0

    3. CSS书写规范:CSS样式分为自定义样式、重新定义HTML样式和链接状态样式。自定义样式以“.”加上描述性单词命名,文字样式以“.no”加上字号、行距和颜色缩写命名,而重新定义HTML标签样式则直接使用标签名,链接...

    CSS规范手册.doc

    1.1 CSS书写顺序通常按照功能模块来组织,先定义元素的基本显示属性,如`display`、`position`、`float`和`clear`,接着处理盒模型相关的属性,包括`margin`、`padding`、`width`和`height`。然后是排版和文字属性,...

    HTML&CSS 开发规范1

    HTML 和 CSS 开发规范是确保代码可读性、可维护性和高效性的基石。规范的遵循有助于团队协作,提高代码质量,降低出错概率。以下是一些关键的规范要点: 1. **目录结构**: - 项目目录应清晰,如示例所示,包括 `...

    高效、可维护、组件化的CSS

    首先,我们需要了解CSS书写规范,这是因为一个统一的书写规范有助于团队协作和代码的维护。通常,CSS书写规范会涉及选择器命名、属性顺序、代码注释等规则,以确保代码的一致性和可读性。 接下来是写出高效易懂CSS...

    CSS书写规范、顺序和命名规则

    以下是一些关于CSS书写规范、顺序和命名规则的详细说明: **一、CSS书写顺序** 1. **位置属性**:首先设置元素的位置属性,如`position`, `z-index`, `display`, `float`等,它们决定了元素如何在页面上定位。 2. ...

    HTML+CSS编写规范大全.docx

    四、CSS 注释书写规范 4.1 提示和标签信息注释 这是注释最常用的途径,可以为自己或其他开发人员留下提示信息,以避免后期引起的不必要的困惑和麻烦。 例如: .search{border:1px solid #fff; /*Border Color*/ ...

    豆瓣css规范

    ### 豆瓣CSS规范详解 #### 一、引言 随着前端技术的不断发展与进步,CSS作为网页表现层的核心语言之一,在实现丰富的视觉效果和交互体验方面扮演着至关重要的角色。为了确保代码的一致性、可维护性和易读性,制定...

Global site tag (gtag.js) - Google Analytics