HTML5 标准规范有哪些,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
在每一个html页面的第一行添加标准模式的声明,必须使用
<!DOCTYPE html>
必须为html根元素制定lang属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等
<html lang="zh">
参照以下写法
<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="zh"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="zh"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js" lang="zh"> <!--<![endif]-->
这样写的好处:
可以使用class作为全局条件区分低版本的IE浏览器并进行调整,这显然要优于使用CSS Hack
可以避免IE6条件注释引起的高版本IE文件阻塞问题,原文的解决方法是在前面加一个空白的条件注释,但是这里显然将原本无用空白的条件注释变得有意义了
仍然可以通过HTML验证
与Modernizr等特征检测类库使用相同的class,更具备通用性
no-js标签是需要与Modernizr等类库配合使用的
<script src="js/libs/modernizr-2.5.0.min.js"></script>
必须加上viewport
可以让我们开发出来的页面在不同大小的设备上都能统一友好显示
<meta name="viewport" content="width=device-width">
IE 支持通过特定的<meta>
标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则设置为edge mode
,从而通知 IE 采用其所支持的最新的模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
所有标记都应设置为utf–8
,它应该同时指定在HTTP报头和文档头部
<meta charset="utf-8">
为了更好让搜索引擎找到你的页面,必须写上keywords
和description
<meta name="description" content=""> <meta name="keywords" content="">
必须给每个页面加上有意义的标题
<title>HTML5 standardization</title>
将样式表和脚本中的type省略,除非你不是用的css
或javascript
,在html5,该值默认是text/css
和text/javascript
在指向图片或其他媒体文件、样式表和脚本的URL地址中省略http:
https:
协议部分,除非已知相应文件不能同时兼容2个协议
<!-- Not recommended --> <script src="http://www.hengtiansoft.com/js/demo.js"></script> <!-- Recommended --> <script src="//www.hengtiansoft.com/js/demo.js"></script>
将结构(markup)、表现样式(style)和行为动作(script)分开处理,尽量使三者之间的关联度降到最小,这样有利于维护
必须将css文件引入并置于head中
必须将js文件引入并置于body底部 ###大小写:只使用小写 所有的代码都应是小写的,包括元素名称、属性,属性值(除非text或CDATA的内容)、选择器、css属性、属性值(字符串除外)
<!-- Not recommended --> <A HREF="/">Home</A> <!-- Recommended --> <img src="hengtian.png" alt="hengtian"> <!-- Not recommended --> color: #E5E5E5; <!-- Recommended --> color: #e5e5e5;
每次缩进使用4个空格不要使用Tab
.example { color: blue; } <ul> <li>Fantastic</li> <li>Great</li> </ul>
针对每一个块级元素都另起一行,并在每个子元素前缩进,可提升可读性
<table> <thead> <tr> <th scope="col">header 1</th> <th scope="col">header 2</th> <tbody> <tr> <td>line 1</td> <td>line 2</td> </table>
尽可能减少嵌套,减少不必要的标签,如果结构可以满足上下文要求,就不需要有冗余的结构
<!-- Not recommended --> <div><div>test</div></div> <!-- Recommended --> <div>test</div> <!-- Not recommended --> <div><div>test</div></div> <!-- Recommended --> <div>test</div>
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. 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素:
<div><h2></h2><p></p></div> —— 对 <a href=”#”><span></span></a> —— 对 <span><div></div></span> —— 错
2. 块级元素不能放在<p>
里面:
<p><ol><li></li></ol></p> —— 错 <p><div></div></p> —— 错
3. 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:
h2、h3、h4、h5、h6、h7、p、dt
4. 块级元素与块级元素并列、内嵌元素与内嵌元素并列:
<div><h3></h3><p></p></div> —— 对 <div><a href=”#”></a><span></span></div> —— 对 <div><h3></h3><span></span></div> —— 错
单行注释,需在<!--
后空一格,在-->
前空一格
多行注释,注释起始和结尾都另起一行,注释内容缩进4个空格,不要使用Tab
<!-- This is a one line comment --> <p>This is a comment</p> <!-- This comment is require more than one line, so we should use block-style indented text -->
使用有效的html标签,并利用工具如W3C html validator进行检查
<!-- Not recommended --> <title>Demo</title> <article>This is a demo. <!-- Recommended --> <title>Demo</title> <article>This is a demo.</article>
根据标签的语义来合理使用它 如使用footer
元素来定义页脚,section
元素来定义文档中的章节 这对代码的执行效率和可读性都非常重要
<!-- Not recommended --> <div> <h2>Journey</h2> <p>One day you finally knew what you had to do, and began.</p> </div> <!-- Recommended --> <section> <h2>Journey</h2> <p>One day you finally knew what you had to do, and began.</p> </section>
添加属性的时候需要去掉前缀data-*,-后为一个单词小写.如下
<div id="J_test" data-age="24"> Click Here </div>
为了良好的阅读性,不要使用实体引用的方式,除了以下几种情况:
键盘上没有该字符
在HTML中有特殊含义的字符,如:<
,>
,&
空格
常用HTML字符实体(建议使用实体):
字符 | 名称 | 实体名 | 实体数 |
---|---|---|---|
" | 双引号 | " | " |
' | 撇号 | ' (IE不支持) | ' |
& | 和号 | & | & |
> | 右尖括号(大于号) | > | > |
< | 左尖括号(小于号) | < | < |
空格 | |   | |
中文全角空格 |   |
常用特殊字符实体(不建议使用实体):
字符 | 名称 | 实体名 | 实体数 |
---|---|---|---|
¥ | 元 | ¥ | ¥ |
断竖线 | ¦ | ||
© | 版权 | © | © |
® | 注册商标R | ® | ® |
™ | 商标TM | ™ | ™ |
• | 间隔符 | · | · |
« | 左双尖括号 | « | « |
» | 右双尖括号 | » | » |
° | 度 | ° | ° |
× | 乘 | × | × |
÷ | 除 | ÷ | ÷ |
‰ | 千分比 | ‰ | ‰ |
给图片添加width
和height
,提升页面加载速度
给所有img
添加alt
属性
不要使用或尽量少用gif
文件
在IDE中,需要去来回拖动滚动条来查看末尾的代码是很不方便的,所以要在合适的位置来断句。
无内容元素是一种不能包含任何内容的特殊元素,比较常见的无内容元素有:br
,hr
,img
,input
,link
,meta
此类元素不要使用无闭合标签,且在>
前无空格
<meta name="author" content="Hengtian">
将未实现或待定内容用TODO
标记出来,如需要可将TODO项的负责人也列出来,并可再写上需要做的内容
<!-- TODO(Jason) : add more items -->
布尔型属性在声明时必须为其赋值
<input type="text" disabled="diabled"> <select> <option value="1" selected="slected">1</option> </select>
无论你是否使用框架,99%的展现设计应该在stylesheets中,以下几点应避免去做:
不要使用内联样式,如:<div >
用<p>
来代替<br>
来对内容换行
不要使用<em>
和<strong>
,用css来控制
不要使用<i>
和<b>
,HTML5不赞成使用
元素 | 解决方法 |
---|---|
<acronym> | 使用<abbr> 标签替代 |
<applet> | 使用<object> 标签替代 |
<basefont> | 使用CSS来设置大小 |
<big> | 使用CSS中font size来实现 |
<dir> | 使用<ul> 标签代替 |
<font> | 使用CSS来实现 |
<frame> | 糟糕的可用性和访问性 |
<frameset> | 糟糕的可用性和访问性 |
<isindex> | 使用HTML5表单控件来替代 |
<noframes> | 糟糕的可用性和访问性 |
<s> | 使用CSS来实现 |
<strike> | 使用CSS来实现 |
<tt> | 使用CSS来实现 |
<u> | 使用CSS来实现 |
属性 | 所属的元素 |
---|---|
align | 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 |
alink | body |
link | body |
vlink | body |
text | body |
background | body |
bgcolor | table, tr, td, th and body |
border | table and object |
cellpadding | table |
cellspacing | table |
char | col, colgroup, tbody, td, tfoot, th, thead and tr |
charoff | col, colgroup, tbody, td, tfoot, th, thead and tr |
clear | br |
compact | dl, menu, ol and ul |
frame | table |
compact | dl, menu, ol and ul |
frame | table |
frameborder | iframe |
hspace | img and object |
vspace | img and object |
marginheight | iframe |
marginwidth | iframe |
noshade | hr |
nowrap | td and th |
rules | table |
scrolling | iframe |
size | hr |
type | li, ol and ul |
valign | col, colgroup, tbody, td, tfoot, th, thead and tr |
width | hr, table, td, th, col, colgroup and pre |
关于HTML5 标准规范有哪些问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。