本文共 3023 字,大约阅读时间需要 10 分钟。
优秀的项目源码,即使是多人开发,看代码也如出一人之手。统一的编码规范,可使代码更易于阅读,易于理解,易于维护
统一两个空格缩进
HTML 文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明:
团队约定:
pc 端:
移动端:
html 标签分为以下几类:
团队约定:
<x-tags>
、 <my-element>
和 <my-awesome-app>
都是正确的名字,而 <tabs>
和 <foo_bar>
是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素,哪些是自定义元素 推荐:web前端开发直播教程Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路
复制代码
不推荐:
不要让非内容信息污染了你的 HTML,打乱了 HTML 结构。可以使用:before、:after 等伪类元素
推荐:
HTML 代码
See the square next to me?
CSS 代码:
/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */.text-box:before { content: ''; display: inline-block; width: 1rem; height: 1rem; background-color: red;}
不推荐:
HTML 代码:
See the square next to me?
CSS 代码:
.text-box > .square { display: inline-block; width: 1rem; height: 1rem; background-color: red;}
符号 | 描述 | 转义符 |
---|---|---|
空格 | | |
< | 小于 | < |
> | 大于 | > |
& | 和 | & |
" | 引号 | " |
使用 type="tel" 而不是 type="number"
不需要为 CSS、JS 指定类型属性,HTML5 中默认已包含。
推荐:
不推荐:
单行注释
推荐:web前端开发直播教程Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路
...
不推荐:
......
模块注释
推荐:
.........
标签 | 语义 |
---|---|
<p> | 段落 |
<hn> | 标题(h1~h6) |
<ul> | 无序列表 |
<ol> | 有序列表 |
<nav> | 标记导航,仅对文档中重要的链接群使用 |
<main> | 页面主要内容,一个页面只能使用一次。如果是 web 应用,则包围其主要功能 |
<article> | 定义外部的内容,其中的内容独立于文档的其余部分 |
<section> | 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。 |
<aside> | 定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表 |
<header> | 页眉通常包括网站标志、主导航、全站链接以及搜索框 |
<footer> | 页脚,只有当父级是 body 时,才是整个页面的页脚 |
<figure> | 规定独立的流内容(图像、图表、照片、代码等等)(默认有 40px 左右 margin) |
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69901074/viewspace-2649127/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/69901074/viewspace-2649127/