【规范】前端编码规范——html 规范
2018-06-24 00:55:48来源:未知 阅读 ()
文档类型
推荐使用 html5 的文档类型申明:
<!DOCTYPE html>
语言属性
根据 html5 规范:
强烈建议为
html
根元素指定lang
属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。
这里列出了语言代码表。
<html lang="en"></html>
字符编码
通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是,可以避免在 html 中使用字符实体标记(character entity),从而全部与文档编码一致(一般采用 UTF-8 编码)。
<meta charset="UTF-8">
IE 兼容模式
IE 支持通过特定的 meta
标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
省略自闭合元素的斜线
不要在自闭合(self-closing)元素的尾部添加斜线 – html5 规范中明确说明这是可选的。
不推荐
<input type="text"/>
推荐
<input type="text">
不要省略结束标签
不要省略可选的结束标签(closing tag)。
不推荐
<ul> <li> </ul>
推荐
<ul> <li></li> </ul>
省略 type 属性
省略 css 与 js 的 type
属性。鉴于 html5 中以上两者默认的 type
值就是 text/css
和 text/javascript
,所以 type
属性一般是可以忽略掉的,甚至在老旧版本的浏览器中这么做也是安全可靠的。
语义化
使用具有语义的标签,比如 h1
、p
等等。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <title>Document</title> </head> <body> <h1>标题</h1> <h2>子标题</h2> <p>文本段落</p> <p><strong>加粗文本</strong></p> </body> </html> <script src="main.js"></script>
实用为王
尽量遵循 html 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
不推荐
<span class="avatar"> <img src="avatar.jpg"> </span>
推荐
<img class="avatar" src="avatar.jpg">
结构,表现与行为分离
一个完整的页面分为三个部分:结构(html)、表现(css)和行为(js)。为了使它们成为可维护的干净整洁的代码,我们要尽可能的将它们分离开来。
严格地保证结构、表现、行为三者分离,并尽量使三者之间没有太多的交互和联系。就是说,尽量在文档和模板中只包含结构性的 html;而将所有表现代码,移入样式表中;将所有动作行为,移入脚本之中。在此之外,为使得它们之间的联系尽可能的小,在文档和模板中也尽量少地引入样式和脚本文件。
清晰的分层意味着:
- 不使用超过一到两张样式表
- 尽量合并脚本
- 不使用内嵌样式(
<style>.no-good {}</style>
) - 不使用行内样式(
<hr style="border-top: 5px solid black">
) - 不使用内嵌脚本(
<script>alert('no good')</script>
) - 不使用表现元素(
<b>
,<u>
,<center>
,<font>
)
小写
html 标签及属性(包括自定义属性)都是小写字母,不要使用大写字母。
绑定数据
如果需要为标签绑定一些数据的话,请使用 html5 的自定义属性 data-*
来绑定相关数据。
<h1 data-age="20">张三</h1>
布尔型属性
布尔型属性可以在声明时不赋值。xhtml 规范要求为其赋值,但是 html5 规范不需要。
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> <option value="2"></option> </select>
html 引号
html 属性的引号请使用双引号而不是单引号。
参考文献
- Web Styleguide - Style guide to harmonize HTML, Javascript and CSS / Sass coding style
- http://www.css88.com/archives/5364
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash