HTML5标准规范有哪些

HTML5 标准规范有哪些，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

发展壮大离不开广大客户长期以来的信赖与支持，我们将始终秉承“诚信为本、服务至上”的服务理念，坚持“二合一”的优良服务模式，真诚服务每家企业，认真做好每个细节，不断完善自我，成就企业，实现共赢。行业涉及三维植被网等，在网站建设公司、成都全网营销、WAP手机网站、VI设计、软件开发等项目上具有丰富的设计经验。

1.1文档结构

文档类型

在每一个html页面的第一行添加标准模式的声明,必须使用

语言属性

必须为html根元素制定lang属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等

区分浏览器

参照以下写法

这样写的好处：

可以使用class作为全局条件区分低版本的IE浏览器并进行调整，这显然要优于使用CSS Hack
可以避免IE6条件注释引起的高版本IE文件阻塞问题，原文的解决方法是在前面加一个空白的条件注释，但是这里显然将原本无用空白的条件注释变得有意义了
仍然可以通过HTML验证
与Modernizr等特征检测类库使用相同的class，更具备通用性

no-js标签是需要与Modernizr等类库配合使用的

viewport

必须加上viewport可以让我们开发出来的页面在不同大小的设备上都能统一友好显示

兼容属性

IE 支持通过特定的标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则设置为edge mode，从而通知 IE 采用其所支持的最新的模式

字符编码

所有标记都应设置为utf–8，它应该同时指定在HTTP报头和文档头部

文档描述

为了更好让搜索引擎找到你的页面，必须写上keywords和description

页面title

必须给每个页面加上有意义的标题

HTML5 standardization

type属性：省略

将样式表和脚本中的type省略，除非你不是用的css或javascript，在html5，该值默认是text/css和text/javascript

协议部分

在指向图片或其他媒体文件、样式表和脚本的URL地址中省略http: https:协议部分，除非已知相应文件不能同时兼容2个协议

关注点分离

将结构(markup)、表现样式(style)和行为动作(script)分开处理,尽量使三者之间的关联度降到最小,这样有利于维护

必须将css文件引入并置于head中
必须将js文件引入并置于body底部 ###大小写：只使用小写所有的代码都应是小写的，包括元素名称、属性，属性值（除非text或CDATA的内容）、选择器、css属性、属性值（字符串除外）


Home



color: #E5E5E5;

color: #e5e5e5;

缩进

每次缩进使用4个空格不要使用Tab

.example {
    color: blue;
}

    Fantastic
    Great

树形结构

针对每一个块级元素都另起一行，并在每个子元素前缩进，可提升可读性


    
        
            header 1
            header 2
    
        
            
            
line 1 line 2


line 1	line 2

减少嵌套

尽可能减少嵌套,减少不必要的标签，如果结构可以满足上下文要求，就不需要有冗余的结构


test

test

test

test

标签嵌套规则

1.块级元素 address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h2~h7、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

2.内嵌元素 a、abbr、acronym、b、bdo、big、br、cite、code、 dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、 strong、sub、sup、textarea、tt、u、var

嵌套规则

1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：


 —— 对

 —— 对

 —— 错

2. 块级元素不能放在

里面：

—— 错

3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

h2、h3、h4、h5、h6、h7、p、dt

4. 块级元素与块级元素并列、内嵌元素与内嵌元素并列：


 —— 对

 —— 对

 —— 错

1.2代码规范

注释

单行注释，需在前空一格
多行注释，注释起始和结尾都另起一行，注释内容缩进4个空格，不要使用Tab

This is a comment

HTML有效性验证

使用有效的html标签，并利用工具如W3C html validator进行检查


Demo
This is  a demo.

Demo
This is a demo.

语义性

根据标签的语义来合理使用它如使用footer元素来定义页脚，section元素来定义文档中的章节这对代码的执行效率和可读性都非常重要



Journey
One day you finally knew what you had to do, and began.



Journey
One day you finally knew what you had to do, and began.

HTML5 data-* 自定义属性

添加属性的时候需要去掉前缀data-*，-后为一个单词小写.如下


    Click Here

字符实体引用

为了良好的阅读性，不要使用实体引用的方式，除了以下几种情况：

键盘上没有该字符
在HTML中有特殊含义的字符，如：<,>,&
空格

常用HTML字符实体（建议使用实体）：

字符	名称	实体名	实体数
"	双引号	`"`	`"`
'	撇号	`'`(IE不支持)	`'`
&	和号	`&`	`&`
>	右尖括号（大于号）	`>`	`>`
<	左尖括号（小于号）	`<`	`<`
	空格
	中文全角空格

常用特殊字符实体（不建议使用实体）：

字符	名称	实体名	实体数
￥	元	`¥`	`¥`
		断竖线	`¦`
©	版权	`©`	`©`
®	注册商标R	`®`	`®`
™	商标TM	`™`	`™`
•	间隔符	`·`	`·`
«	左双尖括号	`«`	`«`
»	右双尖括号	`»`	`»`
°	度	`°`	`°`
×	乘	`×`	`×`
÷	除	`÷`	`÷`
‰	千分比	`‰`	`‰`

图片和颜色

给图片添加width和height，提升页面加载速度
给所有img添加alt属性
不要使用或尽量少用gif文件

避免长句

在IDE中，需要去来回拖动滚动条来查看末尾的代码是很不方便的，所以要在合适的位置来断句。

无内容元素

无内容元素是一种不能包含任何内容的特殊元素，比较常见的无内容元素有：br,hr,img,input,link,meta 此类元素不要使用无闭合标签，且在>前无空格

待定项

将未实现或待定内容用TODO标记出来，如需要可将TODO项的负责人也列出来，并可再写上需要做的内容

布尔属性

布尔型属性在声明时必须为其赋值

1.3文档内容

展现内容分离

无论你是否使用框架，99%的展现设计应该在stylesheets中，以下几点应避免去做：

不要使用内联样式，如：
用
来代替来对内容换行
不要使用和,用css来控制
不要使用和，HTML5不赞成使用

HTML5中移除的元素

元素	解决方法
	使用标签替代
	使用
	使用CSS来设置大小
	使用CSS中font size来实现
	使用标签代替
	使用CSS来实现
	糟糕的可用性和访问性
	糟糕的可用性和访问性
	使用HTML5表单控件来替代
</code></td><td>糟糕的可用性和访问性</td></tr><tr><td><code><s></code></td><td>使用CSS来实现</td></tr><tr><td><code><strike></code></td><td>使用CSS来实现</td></tr><tr><td><code><tt></code></td><td>使用CSS来实现</td></tr><tr><td><code><u></code></td><td>使用CSS来实现</td></tr></tbody></table><h4>HTML5中移除的属性</h4><table><thead><trl><th>属性</th><th>所属的元素</th></tr></thead><tbody><tr><td>align</td><td>caption, iframe, img, input, object, legend, table, hr, div, h2, h3, h4, h5, h6, h7, p, col, colgroup, tbody, td, tfoot, th, thead and tr</td></tr><tr><td>alink</td><td>body</td></tr><tr><td>link</td><td>body</td></tr><tr><td>vlink</td><td>body</td></tr><tr><td>text</td><td>body</td></tr><tr><td>background</td><td>body</td></tr><tr><td>bgcolor</td><td>table, tr, td, th and body</td></tr><tr><td>border</td><td>table and object</td></tr><tr><td>cellpadding</td><td>table</td></tr><tr><td>cellspacing</td><td>table</td></tr><tr><td>char</td><td>col, colgroup, tbody, td, tfoot, th, thead and tr</td></tr><tr><td>charoff</td><td>col, colgroup, tbody, td, tfoot, th, thead and tr</td></tr><tr><td>clear</td><td>br</td></tr><tr><td>compact</td><td>dl, menu, ol and ul</td></tr><tr><td>frame</td><td>table</td></tr><tr><td>compact</td><td>dl, menu, ol and ul</td></tr><tr><td>frame</td><td>table</td></tr><tr><td>frameborder</td><td>iframe</td></tr><tr><td>hspace</td><td>img and object</td></tr><tr><td>vspace</td><td>img and object</td></tr><tr><td>marginheight</td><td>iframe</td></tr><tr><td>marginwidth</td><td>iframe</td></tr><tr><td>noshade</td><td>hr</td></tr><tr><td>nowrap</td><td>td and th</td></tr><tr><td>rules</td><td>table</td></tr><tr><td>scrolling</td><td>iframe</td></tr><tr><td>size</td><td>hr</td></tr><tr><td>type</td><td>li, ol and ul</td></tr><tr><td>valign</td><td>col, colgroup, tbody, td, tfoot, th, thead and tr</td></tr><tr><td>width</td><td>hr, table, td, th, col, colgroup and pre</td></tr></tbody></table><p>关于HTML5 标准规范有哪些问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。</p> <br> 网站名称：HTML5标准规范有哪些 <br> URL标题：<a href="http://cqcxhl.com/article/gsojcs.html">http://cqcxhl.com/article/gsojcs.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dopjce.html">7z和zip有什么区别-创新互联</a> </li><li> <a href="/article/dopjcs.html">微信自定义支付顺序如何更改微信默认支付方式？-创新互联</a> </li><li> <a href="/article/dopgpo.html">OSPF单区域基本配置-创新互联</a> </li><li> <a href="/article/dopghs.html">cocosCCScrollView-创新互联</a> </li><li> <a href="/article/dopggc.html">OracleEBS应用产品-外币重估原则-创新互联</a> </li> </ul> </div> </div> <div class="footer"> <div class="footer_content"> <div class="footer_content_top clear"> <div class="content_top_share fl"> <div><img src="/Public/Home/img/logo.png"></div> <div class="top_share_content"> <dd>分享至：</dd> <dt class="bdsharebuttonbox clear" id="share"> <a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a> </dt> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]\|\|body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div> </div> <div class="content_top_left fl clear"> <div class="top_left_list fl"> <dd><a href="/about/">关于我们</a></dd> <dt> <a href="/about/#gsjj">公司简介</a> <a href="/about/#fzlc">发展历程</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/service/">服务项目</a></dd> <dt> <a href="/service/">高端网站建设</a> <a href="/miniprogram/">小程序开发</a> <a href="/service/app.html">APP开发</a> <a href="/service/yingxiao.html">网络营销</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/jianzhan/">建站知识</a></dd> <dt> <a href="/jianzhan/2.html">网站建设</a> <a href="/jianzhan/3.html">网站设计</a> <a href="/jianzhan/4.html">网站制作</a> <a href="/jianzhan/5.html">小程序</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/contact/">联系我们</a></dd> <dt> <a href="/contact/#lxwm">公司地址</a> <a href="/contact/#rczp">人才招聘</a> </dt> </div> </div> <div class="content_top_right addressR fr"> <div class="top_right_title addressf_title"> <a href="javascript:;" class="on">成都</a> <a href="javascript:;">重庆</a> </div> <div class="top_right_content addressf"> <div class="right_content_li on"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：成都市太升南路288号锦天国际A幢1002号</dt> </div> </div> <div class="right_content_li"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：重庆市南岸区弹子石腾龙大道58号2栋21-6</dt> </div> </div> </div> </div> </div> </div> <div class="footer_content_copyright clear">版权所有：成都创新互联科技有限公司重庆分公司 <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">渝ICP备2021005571号-4</a> </div> </div> <!--浮窗--> <div class="FloatingWindow clear"> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt><span>在线</span>咨询</dt> </div> </a> <a href="javascript:;" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>服务热线</dt> </div> <div class="FloatingWindow_list_down fadeInRight animated">服务热线：028-86922220</div> </a> <a href="javascript:;" class="FloatingWindow_list fr STop"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>TOP</dt> </div> </a> </div> <script src="/Public/Home/js/jquery-1.8.3.min.js"></script> <script src="/Public/Home/js/comm.js"></script> <script src="/Public/Home/js/wow.js"></script> <script src="/Public/Home/js/common.js"></script> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); </script>

重庆分公司，新征程启航