【图片】

　　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 属性，能获得友好的输入体验

<input type="date">

【多媒体】

　　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、只在必要的时候开启音视频的自动播放

原文链接：https://www.qiquanji.com/post/7063.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。