最简前端规范——HTML篇(一)

前言：网上已经有很多关于前端开发规范的描述，为什么还要写呢？主要是很多规范太细而全，根本记不住，还有很多编译器也能够自动生成为什么要记这么多呢？是嫌前端学的东西还不够多吗？所以此系列文章主要讲解在开发过程中的重点事项，具体细则自可百度一下。好了，废话不多说，进入正题。

众所周知 前端学来学去就是HTML、CSS、JS。这里也不能落入俗套 没办法混口饭吃应该的。

HTML应该注意什么？

只要记住一点别给别人找麻烦、别给过段时间的自己找麻烦。

what?说好的规范呢，就这么简单，忽悠谁呢？？？

一切规范的制定，就是为了提高效率。

so 以下就是开发中，应该减少的事情

1、减少代码复杂度，举栗子

//多余代码
<div class="avatar">
    <img src="./photo.jpg">
</div>
//精简代码
<img class="avatar" src="./photo.jpg">

2、不大写、别问我为啥，从学英语的时候就是看小写，舒适

<!--头部-->
<header>
</header>
//难受
<HEADHER>
</HEADER>

<!--平常代码-->
<div class="test"></div>

//蓝瘦代码
<div class="TEST"></div>
<div CLASS="TEST"></div>

<!--单词更多-->
<div class="render-resource-update">
</div>

//蓝瘦代码
<div class="RENDER-RESOURCE-UPDATE"></div>
<div CLASS="RENDER-RESOURCE-UPDATE"></div>

3、Class 与 ID 命名规则（这个比较重要）

id唯一性就不介绍了，主要就是突出，我一眼就知道你这么独特是干嘛的。好吧，还是大概说下，记几个常用的。如图所示：

网页公共命名
#wrapper	页面外围控制整体布局宽度
#container或#content	容器,用于最外层
#layout	布局
#head, #header	页头部分
#foot, #footer	页脚部分
#nav	主导航
#subnav	二级导航
#menu	菜单
#submenu	子菜单
#sideBar	侧栏
#sidebar_a, #sidebar_b	左边栏或右边栏
#main	页面主体
#tag	标签
#msg #message	提示信息
#tips	小技巧
#vote	投票
#friendlink	友情连接
#title	标题
#summary	摘要
#loginbar	登录条
#searchInput	搜索输入框
#hot	热门热点
#search	搜索
#search_output	搜索输出和搜索结果相似
#searchBar	搜索条
#search_results	搜索结果
#copyright	版权信息
#branding	商标
#logo	网站LOGO标志
#siteinfo	网站信息
#siteinfoLegal	法律声明
#siteinfoCredits	信誉
#joinus	加入我们
#partner	合作伙伴
#service	服务
#regsiter	注册
arr/arrow	箭头
#guild	指南
#sitemap	网站地图
#list	列表
#homepage	首页
#subpage	二级页面子页面
#tool, #toolbar	工具条
#drop	下拉
#dorpmenu	下拉菜单
#status	状态
#scroll	滚动

class在写HTML时候是用到最多的，那这个命名的规则确实最多五花八门的。那到底应该如何写看的会舒适整齐呢？

首先要特别注意的是应以功能或内容命名，不以表现形式命名！

what?什么是功能和内容，什么又是表现形式？

举栗子时间：

背景颜色：bg-black 是取到一个功能作用用来区分背景的 

限制容器：比如nav-header、nav-brand、container这些都是做对内容模块的区分

而表现形式是怎么解释，难道叫小明的就给他定义一个class="xiaoming"的类吗？

4、属性的定义统一使用双引号""

5、多使用语义化标签、例如section、article、nav这些

以上就是本篇主要提及的重点，其他一些细节方面现在的编辑器大部分都能帮助做到也不提及了

下一篇：最简前端规范——CSS篇(二)