uot;>
<li><a href="#">NAV1</a></li>
<li><a href="#">NAV2</a></li>
<!-- 更多导航项 -->
</ul>
<!-- /导航 -->
</div>
<!-- /头部 -->
【属性】
1、属性和值全部小写
2、属性值必须用双引号包围
3、布尔类型的属性,建议不添加属性值
4、自定义属性建议以 xxx-
为前缀,推荐使用 data-
5、可以省略style标签和script标签的type属性
<!-- good -->
<table cellspacing="0">...</table>
<!-- bad -->
<table cellSpacing="0">...</table>
<!-- good -->
<script src="esl.js"></script>
<!-- bad -->
<script src='esl.js'></script>
<script src=esl.js></script>
【属性顺序】
HTML 属性应该按照特定的顺序出现以保证易读性
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
特殊元素
【图片】
1、禁止 img
的 src
取值为空,否则会导致部分浏览器重新加载一次当前页面
2、为图片添加 alt
属性,提高图片加载失败时的用户体验
3、避免为 img
添加不必要的 title
属性,多余的 title 影响看图体验,并且增加了页面尺寸
4、为图片添加 width
和 height
属性,以避免页面抖动
<img src="#" alt="#" width="#" height="#">
5、有下载需求的图片采用 img
标签实现,无下载需求的图片采用 CSS
背景图实现
产品 logo、用户头像、用户产生的图片等有潜在下载需求的图片,以 img 形式实现,能方便用户下载
无下载需求的图片,比如:icon、背景、代码使用的图片等,尽可能采用 css 背景图实现
【表单】
1、有文本标题的控件使用 label
标签将其与其标题相关联。最好将控件置于 label 内,以减少不必要的 id
<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
2、使用 button
元素时必须指明 type
属性值。因为button 元素的默认 type 为 submit,如果被置于 form 元素中,点击后将导致表单提交
<button type="submit">提交</button>
<button type="button">取消</button>
3、在针对移动设备开发的页面时,根据内容类型指定输入框的 type
属性,能获得友好的输入体验
【多媒体】
1、在支持 HTML5
的浏览器中优先使用 audio
和 video
标签来定义音视频元素,并使用退化到插件的方式来对多浏览器进行支持
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<object width="100" height="50" data="audio.mp3">
<embed width="100" height="50" src="audio.swf">
</object>
</audio>
<video width="100" height="50" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<object width="100" height="50" data="video.mp4">
<embed width="100" height="50" src="video.swf">
</object>
</video>
2、只在必要的时候开启音视频的自动播放
<script type="text/java script" src="http://files.cnblogs.com/files/xiaohuochai/contextMenu.js">
<script type="text/java script" src="http://files.cnblogs.com/files/xiaohuochai/catalog.js">