1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

HTML规范之特殊元素

【图片】

  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

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: