您的位置：首页 > Web前端 > HTML

HTML代码编码规范

2016-03-16 11:03 537 查看
博客来自：http://www.gbtags.com/gb/tutorials/215/1163.htm

个人主页：http://www.itit123.cn/ 更多干货等你来拿

 HTML代码编码规范

为了保证项目代码的质量，书写HTML和CSS相关代码的时候，需要遵循一定的规则和逻辑，虽然HTML相关代码没有太复杂的逻辑，并且记得一定要验证代码正确性，下面是一些相关的编码规范

书写符合兼容性的代码

为了保证代码一致性，需要保证HTML代码嵌套正确，比如，是否正确的闭合元素

不符合编码规范
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.

符合编码规范
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>

使用语义化的元素
选择和使用具体元素的时候，注意一定要选择能够正确表达HTML结构和逻辑的元素，否则不利于他人理解书写代码的逻辑性

不符合编码规范
<span class="heading"><strong>欢迎登陆</span></strong>
<br><br>
好久没有登录本站，最近如何？
<br><br>

符合编码规范
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>

使用正确的文档结构
文档结构是HTML编辑基础，确定使用最新正确的文档结构，不要随意的删除和添加基础文档结构

不符合编码规范
<html>
<h1>Hello World</h1>
<p>This is a web page.</p>
</html>

符合编码规范
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>

保证语法的统一
随着页面内容的增加，管理HTML会非常的麻烦，好在这里有一些规则能够帮助我们将语法设计的更加干净和有组织。包扩：

在元素名称，属性，值中使用小写字母
缩进嵌套的元素
严格使用双引号，不要写单引号，或者干脆不使用引号
自闭合的元素不要写斜杠（例如，<img>）
忽略boolean属性对应的值
下面是一对例子：

不符合编码规范
<Aside>
<h3>Chicago</h3>
<H5 HIDDEN='HIDDEN'>City in Illinois</H5>
<img src=chicago.jpg alt="Chicago, the third most populous city in the United States" />
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</ASIDE>

符合编码规范
<aside>
<h3>Chicago</h3>
<h5 hidden>City in Illinois</h5>
<img src="chicago.jpg" alt="Chicago, the third most populous city in the United States">
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</aside>

使用实在的ID或者Class值
创建id和class可能是书写HTML代码最坑的地方。这些定义必须和页面逻辑和结构息息相关，而并非仅仅用来定义页面的样式。下面是具体代码例子：

不符合编码规范
<p class="red">出错，请刷新~</p>

符合编码规范
<p class="alert">出错，请刷新~</p>

在图片中使用说明文字
书写图片中alt属性对应值，会帮助其它相关体验软件更好的识别文字，同时对于搜索引擎来说，alt属性能更好的帮助搜索引擎找到对应的内容

不符合编码规范
<img src="puppy.jpg">

符合编码规范
<img src="puppy.jpg" alt="漂亮的小宠物">

将内容和样式隔离
千万不要使用行内的样式。 这样会造成非常差的代码维护性和重用性。尽量使用外部的样式文件来定义样式。

不符合编码规范
<p style="color: #393; font-size: 24px;">Thank you!</p>

符合编码规范
<p class="alert-success">Thank you!</p>

避免过度使用div
div在过去的前端代码开发中会被广泛的使用，用来定义布局或者具体内容，但随着HTML5标准的发布，带来了一些新的HTML元素，例如：

section
article
aside
更多
因此我们尽量使用语义明显的标签来构建布局，例子如下：

不符合编码规范
<div class="container">
<div class="article">
<div class="headline">Headlines Across the World</div>
</div>
</div>

符合编码规范
<div class="container">
<article>
<h1>Headlines Across the World</h1>
</article>
</div>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航