前端新手需要知道的CSS规范-分类方法

前端开发标准尽管没有一个彻底的一致标准，可是在每个团队中必定有自己的开发标准。如果是独自的个人，也需求具有一套属于自己的标准。

CSS文件的分类和引证次序

我们依照CSS的性质和用途，将CSS文件分红“公共型款式”、“特别型款式”、“皮肤型款式”，并以此次序引证（按需求决议是否增加版本号）。

CSS内部的分类及其次序

一致处理：建议在这个方位一致调用背景图（这儿指多个布局或模块或元件共用的图）和铲除起浮（这儿指通用性较高的布局、模块、元件内的铲除）等一致设置处理的款式！

模块（module）（.m-）：一般是一个语义化的能够重复运用的较大的全体！比方导航、登录、注册、各种列表、谈论、查找等！

功用（function）（.f-）：为便利一些常用款式的运用，我们将这些运用率较高的款式剥离出来，按需运用，一般这些选择器具有固定款式体现，比方铲除起浮等！不行乱用！

状况（.z-）：为状况类款式参加前缀，一致标识，便利辨认，她只能组合运用或作为子孙出现（.u-ipt.z-dis{}，.m-list li.z-sel{}），详细详见命名规矩的扩展相关项。

功用类和皮肤类款式为体现化的款式，请不要乱用！以上次序能够按需求恰当调整。

/* 重置 */
div,p,ul,ol,li{margin:0;padding:0;}
/* 默许 */
strong,em{font-style:normal;font-weight:bold;}
/* 一致调用背景图 */
.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}
/* 一致铲除起浮 */
.g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}
.g-bdc,.m-dimg ul,.u-tab{zoom:1;}
/* 布局 */
.g-sd{float:left;width:300px;}
/* 模块 */
.m-logo{width:200px;height:50px;}
/* 元件 */
.u-btn{height:20px;border:1px solid #333;}
/* 功用 */
.f-tac{text-align:center;}
/* 皮肤 */
.s-fc,a.s-fc:hover{color:#fff;}

想要更深入学习的小伙伴可以加下我的前端学习交流群386250991，最新的免费学习资料，视频。欢迎各位的到来，觉得写的还可以的点下关注，欢迎大家转载文章！

上一节说到，我们可以快速的生成HTML的结构，如下图所示：

虽然能快捷生成，但是我们必须了解HTML的结构组成：

<!DOCTYPE html>

这是第一行代码，[DOC意思是document]，TYPE为类型，html为文件，这个是和浏览器说明，这是一个html的一个文件类型。

<!DOCTYPE html>
<html></html>

接下来我们将创建HTML标签，HTML所有的标签都应在此标签之中。

<!DOCTYPE html>
<html>
<head></head>
</html>

接着就像描述一个人一样，先把头给描述出来，头部元素在浏览器窗口是不可见的，所以这里会有一些标题，一些页面信息，以及链接CSS等其他东西

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

头出来了，就来创造我们的身体，身体元素是在浏览器页面上可见的，所以我们在页面的上能看见的元素都应该添加至身体元素里面。
刚刚说了，我们的HTML的标题需要包含在头部元素，这时候我们来为页面添加一个标题

<!DOCTYPE html>
<html>
<head>
    <title>HTML是最基本的网页语言</title>       
</head>
<body></body>
</html>

现在我们在身体元素里面添加一些浏览器页面可见的元素，例如一级标题

<!DOCTYPE html>
<html>
<head>
    <title>HTML是最基本的网页语言</title>       
</head>
<body>
    <h1>HTML是最基本的网页语言</h1>
</body>
</html>

现在我们保存代码，然后双击该html文件即可在浏览器打开查看效果。

天继续为大家分享前端的知识，如果对前端比较感兴趣的小伙伴，可以关注我，我会更大家继续分享更多与前端相关的内容，当然如果内容中又不当的或者文字错误的，欢迎大家在评论区留言，我会及时修改纠正。

1.初识HTML

HTML指的是超文本标记语言（Hyper Text Markup Language），是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言（markup language），标记语言是一套标记标签（markup tag）。
HTML标签描述网页元素，比如图片标签、文字标签、链接标签等。
HTML标签有自己的语法规范，并且所有的HTML标签都是用尖括号（<>）包起来。

2.HTML骨架结构

HTML基本骨架语法如下所示：

HTML基本骨架结构

HTML骨架标签说明：

HTML骨架标签说明

下面通过对HTML骨架的基本认识，你也可以小试牛刀，打开记事本，新建一个带有HTML骨架标签的.txt文件。

在.txt中写入HTML骨架标签，保存，并将.txt的后缀名修改为.html，右键单击你写好的文件，然后选择你要显示的浏览器，本人习惯用谷歌的浏览器，这个根据个人的习惯来选择就好了。

示例代码如下：

我的第一个HTML页面

注意：HTML标签名、标签的属性名以及大部分属性值都统一用小写，不要问我为什么，这是人家W3C的规范，咱们按规范行事就好啦。

正确示范：

书写规范

错误示范：

错误的规范

3.HTML标签的分类

HTML标签：在HTML页面中，带有“<>”尖括号符号的元素被称为HTML标签元素，如上面的<html>、<head>、<body>，它们都是用尖括号包起来，而且这几个标签还是HTML的骨架结构标签，就好比人之所以能站立，就是因为有骨架支撑。

通常我们将其分为常规元素和空元素，以下是对两种类型的介绍。

常规元素（双标签）

语法：<标签名>内容</标签名>，如<body>我的网页内容</body>。

说明：

该语法中"<标签名>"表示该标签的作用开始，一般称为"开始标签（start tag）"，"</标签名>"表示该标签的作用结束，一般称为"结束标签（end tag）"。
和开始标签相比，结束标签只是在前面加了一个封闭符"/"。
提示：HTML多数都是双标签。

空元素（单标签或自封闭标签）

语法：<标签名 /> ，比如 <br />

说明：

空元素用单标签来表示。简单说，就是里边不需要包含内容，属于自封闭标签。
提示：此类标签较少，只需要用到的时候记住就行，在开发过程中自己不断的积累。

4.HTML标签的关系

标签之间的关系主要是针对双标签，双标签之间的关系分为如下几种。

嵌套关系：

嵌套关系

并列关系：

并列关系

提示：在开发的过程中，如果标签之间是嵌套关系，那么子元素可以通过tab键进行缩进，让其结构和格式更加的清晰。

5.前端开发工具

之前我们是通过记事本来写html骨架结构，会发现这种情况针对几行代码，还是能消化的，但是碰上几千甚至几万以及更多，此时应该怎么办呢？这个时候就得用到我们的前端开发工具，通过前端开发工具，可以更快更高效的提高我们的开发效率，那我们常见的前端开发工具有如下几种：

常见的前端开发工具

说明：

Dreamweaver：学校用得多。
Sublime：推荐使用，轻量级，效率高，打开速度快，优点多，但是使用插件的时候，需要下载哦。
WebStorm：这个我没用过，但是有的人很喜欢，属于付费的。
Hbuilder：推荐使用，轻量级，免费，效率高，打开速度快，现在都是使用HbuilderX版本，这个是可以去官网下载到的，重点它免费、免费、免费，重要的事情说三遍！！！。
VS Code：这个是微软的，也属于开源免费的，功能很强大的，尤其是在JavaScript开发方面，也是本人推荐使用的。

提示：Hbuilder和VS Code谁更好？我只能说各有千秋，根据个人的习惯，我个人就比较喜欢Hbuilder，偶尔会用VS Code，如果你习惯用VS Code，继续用就行了。

以上开发工具的安装使用，在网络上都会有很多资料，可以动动小手指就能查到哦。

今天就分享到这儿吧，如果喜欢的记得点关注哦，也欢迎在留言区留言。

在线咨询

上一篇：你还在用静态线性罗列知识点复习？《滑轮》思维导图来了
下一篇：JavaScript 文字跟随鼠标

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端新手需要知道的CSS规范-分类方法

您的项目需求