设为首页 加入收藏

TOP

HTML规范(二)
2017-10-10 16:46:08 】 浏览:10006
Tags:HTML 规范
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 属性,能获得友好的输入体验

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

 

<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">
首页 上一页 1 2 下一页 尾页 2/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇CSS深入理解学习笔记之border 下一篇不同布局属性浏览器兼容性汇总

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目