H5 基础
2018-09-06 本文已影响0人
zhaodadaya
文档类型
在每一个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，更具备通用性
兼容属性
IE 支持通过特定的<meta>标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则设置为edge mode，从而通知 IE 采用其所支持的最新的模式
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><meta http-equiv="X-UA-Compatible" content="IE=Edge" /></code>
字符编码
所有标记都应设置为utf–8，它应该同时指定在HTTP报头和文档头部
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><meta charset="utf-8"></code>
文档描述
为了更好让搜索引擎找到你的页面，必须写上keywords和description
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><meta name="description" content=""><meta name="keywords" content=""></code>
页面title
必须给每个页面加上有意义的标题
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><title>HTML5 standardization</title></code>
type属性：省略
将样式表和脚本中的type省略，除非你不是用的css或javascript，在html5，该值默认是text/css和text/javascript
关注点分离
将结构(markup)、表现样式(style)和行为动作(script)分开处理,尽量使三者之间的关联度降到最小,这样有利于维护
- 必须将css文件引入并置于head中
- 必须将js文件引入并置于body底部 ###大小写：只使用小写 所有的代码都应是小写的，包括元素名称、属性，属性值（除非text或CDATA的内容）、选择器、css属性、属性值（字符串除外）
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><!-- Not recommended --><A HREF="/">Home</A><!-- Recommended --><img src="hengtian.png" alt="hengtian"><!-- Not recommended -->color: #E5E5E5;<!-- Recommended -->color: #e5e5e5;</code>
缩进
每次缩进使用4个空格不要使用Tab
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;">.example { color: blue;}<ul> <li>Fantastic</li> <li>Great</li></ul></code>
减少嵌套
尽可能减少嵌套,减少不必要的标签，如果结构可以满足上下文要求，就不需要有冗余的结构
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><!-- Not recommended --><div><div>test</div></div><!-- Recommended --><div>test</div><!-- Not recommended --><div><div>test</div></div><!-- Recommended --><div>test</div></code>
标签嵌套规则
1.块级元素 address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、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. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素：
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><div><h1></h1><p></p></div> —— 对 <a href=”#”><span></span></a> —— 对 <span><div></div></span> —— 错</code>
2. 块级元素不能放在<p>里面：
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><p><ol><li></li></ol></p> —— 错 <p><div></div></p> —— 错</code>
3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;">h1、h2、h3、h4、h5、h6、p、dt</code>
4. 块级元素与块级元素并列、内嵌元素与内嵌元素并列：
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><div><h2></h2><p></p></div> —— 对 <div><a href=”#”></a><span></span></div> —— 对 <div><h2></h2><span></span></div> —— 错</code>
1.2代码规范
注释
- 单行注释，需在``前空一格
- 多行注释，注释起始和结尾都另起一行，注释内容缩进4个空格，不要使用Tab
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><!-- 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 --></code>
HTML有效性验证
使用有效的html标签，并利用工具如W3C html validator进行检查
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><!-- Not recommended --><title>Demo</title><article>This is a demo.<!-- Recommended --><title>Demo</title><article>This is a demo.</article></code>
语义性
根据标签的语义来合理使用它 如使用footer元素来定义页脚，section元素来定义文档中的章节 这对代码的执行效率和可读性都非常重要
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><!-- Not recommended --><div><h1>Journey</h1><p>One day you finally knew what you had to do, and began.</p></div><!-- Recommended --><section><h1>Journey</h1><p>One day you finally knew what you had to do, and began.</p></section></code>
HTML5 data-* 自定义属性
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;">添加属性的时候需要去掉前缀data-*，-后为一个单词小写.如下</code>
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><div id="J_test" data-age="24"> Click Here</div></code>
字符实体引用
为了良好的阅读性，不要使用实体引用的方式，除了以下几种情况：
- 键盘上没有该字符
- 在HTML中有特殊含义的字符，如：
<,>,& - 空格
常用HTML字符实体（建议使用实体）：
| 字符 | 名称 | 实体名 | 实体数 |
|---|---|---|---|
| " | 双引号 | " |
" |
| ' | 撇号 |
'(IE不支持) |
' |
| & | 和号 | & |
& |
| > | 右尖括号（大于号） | > |
> |
| < | 左尖括号（小于号） | < |
< |
| 空格 | |
  |
|
| 中文全角空格 | 　 |
常用特殊字符实体（不建议使用实体）：
| 字符 | 名称 | 实体名 | 实体数 |
|---|---|---|---|
| ￥ | 元 | ¥ |
¥ |
| 断竖线 | ¦ |
||
| © | 版权 | © |
© |
| ® | 注册商标R | ® |
® |
| ™ | 商标TM | ™ |
™ |
| • | 间隔符 | · |
· |
| « | 左双尖括号 | « |
« |
| » | 右双尖括号 | » |
» |
| ° | 度 | ° |
° |
| × | 乘 | × |
× |
| ÷ | 除 | ÷ |
÷ |
| ‰ | 千分比 | ‰ |
‰ |
图片和颜色
- 给图片添加
width和height，提升页面加载速度 - 给所有
img添加alt属性 - 不要使用或尽量少用
gif文件
避免长句
在IDE中，需要去来回拖动滚动条来查看末尾的代码是很不方便的，所以要在合适的位置来断句。
无内容元素
无内容元素是一种不能包含任何内容的特殊元素，比较常见的无内容元素有：br,hr,img,input,link,meta 此类元素不要使用无闭合标签，且在>前无空格
<code style="font-family:Menlo, 'Liberation Mono', Consolas, 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;color:inherit;background-color:transparent;"><meta name="author" content="Hengtian"></code>
