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 条评论
登录 后参与评论

相关文章

来自专栏用户画像

H5新增的行内的语义元素

mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字,其比较典型的应用就是在搜索结果中高亮显示搜索关键词。

912
来自专栏分享达人秀

新推出的GridLayout网格布局

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

2558
来自专栏Golang语言社区

Golang-实现图片缩放

package main import ( "fmt" "graphics" "image" "image/png" ...

3884
来自专栏数据小魔方

半圆型动态仪表盘风格图表

今天跟大家分享一款半圆型动态仪表盘风格图表!真的可以动起来哦! ▼ 下午在浏览论坛的时候,刚好看到秋叶老师的一个图表教程,风格是半圆型饼图,用VBA控制。 ? ...

3566
来自专栏简书专栏

基于Excel2013的合并计算

工作组、求和、利用函数randbetween、合并计算 比如在excel表格中填入=randbetween(1,10),输入时如果需要补全要用鼠标点击,不能按...

821
来自专栏Python小屋

Python使用tkinter编写图片浏览程序

代码要点:1)使用tkinter的Label显示图片;2)tkinter的PhotoImage支持的图片格式较少,使用pillow扩展库的Image和Image...

4629
来自专栏极客生活

tableau绘制好看的折线图

1161
来自专栏青玉伏案

视错觉升级版:多个视错觉效果实现

之前发表过一篇关于视错觉的文章:《视错觉:从一个看似简单的自定义控件说起》,虽然不是用iOS开发中的Mask来实现的,但是原理和Mask原理是一样的,相当于手动...

19310
来自专栏Create Sun

highcharts 系统梳理笔记

前言    highcharts最早接触它是在4年前,后来项目中很少用到图表这些东西,就算有也是用echart。他们思路都一样自己去官网上看api即可,构造数据...

4286
来自专栏iOS 开发杂谈

MarkDown 语法

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

986

扫码关注云+社区