WEB前端项目开发中需注意的细节

WEB前端项目开发中需注意的细节

HTML5学堂:在WEB前端开发当中,书写基本的代码固然重要,而细节也是不容忽略的。在本文当中,我们整理了书写HTML与CSS代码时应当注意的基本细节,当我们对于细节有所了解时,在编写代码时的错误概率就会降低很多。

1.★为了解决标签的默认样式,需要引入重置文件。

2.★类名采用单词(语义)命名,多个单词采用中划线连接。

3.★HTML与CSS文件采用单词(语义)命名,禁止使用中文命名。

4.★HTML与CSS引号需要保持一致,禁止出现单引号与双引号混用。

5.★编写代码的时候,需要合理的缩进(不要出现空格与Tab格混用)与注释,HTML标签嵌套合理,CSS样式按照顺序书写:显示属性——>自身属性——文本>——其他>——>CSS3属性放最后。

6.★在移动端开发中,a标签的title和img标签的title可以删除。

7.★图片需要根据情况设置宽高,以及如何设置宽高

8.★单行文本显示为省略号(……),比如在模块标题需要进行设置,多行文本如果显示区域高度固定,需要设置超出隐藏。

9.★保持盒模型大小的一致性(如:增加左右padding,原有width需要变小)

10.★使用position的时候,按照CSS编码规范设置z-index的范围。

11.★字体大小最小为12px,不能小于12px(部分浏览器不支持,以及不好的用户体验)

欢迎沟通交流~HTML5学堂

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-11-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

简单好看的Android圆形进度条对话框开源库

本文介绍CircleProgressDialog开源库的使用及实现的详细过程,该开源库主要实现以下几个功能:

972
来自专栏Coco的专栏

不受控制的 position:fixed

1404
来自专栏极客生活

tableau绘制好看的折线图

881
来自专栏韩伟的专栏

Unity2D手册翻译(三)

Sprite Editor 有时候一个Sprite纹理只包含一个图形原素,但是把多个相关的图形一起合并到一个图片中会更方便。例如,这个图片可能包含某一个角色的多...

3054
来自专栏林德熙的博客

win10 uwp 截图 获取屏幕显示界面保存图片 水印

本文主要讲如何保存我们的屏幕显示的控件,保存为图片。这个也就是截图,截我们应用显示的,我们应用之外的不截图。

601
来自专栏非著名程序员

Android自定义下拉刷新动画--仿百度外卖下拉刷新

? 好久没写博客了,小编之前一段时间一直在找工作,从天津来到了我们的大帝都,感觉还不错。好了废话不多说了,开始我们今天的主题吧。现如今的APP各式各样,同样也...

17510
来自专栏iOS 开发杂谈

MarkDown 语法

直接回车不能换行, 可以在上一行文本后面补两个空格, 这样下一行的文本就换行了,或者就是在两行文本直接加一个空行,也能实现换行效果,但是这个行间距有点大。

876
来自专栏企鹅号快讯

CSS样式基础

定义 :全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。...

1838
来自专栏HTML5学堂

前端特效开发 | 点击查看大图相册效果

HTML5学堂(码匠):图片的展示是一个网站中最吸引人的区域,除了图片本身的内容精彩以外,常常还会有各种各样的展示形式。而对于前端开发来说,一个精美的图片展示效...

3668
来自专栏分享达人秀

新推出的GridLayout网格布局

本期主要学习的是网格布局是Android 4.0新增的布局,和前面所学的TableLayout表格布局 有点类似,不过他有很多前者没有的东西,也更加好用...

2318

扫码关注云+社区