HTML书写规范

主页 > 学习 > php >

mate 361

HTML是描述网页结构的超文本标记语言,HTML规范能够使HTML代码风格保持一致,使得HTML更容易理解和维护。

 整体结构


【页面头部】


  1、文件应以“<!DOCTYPE ......>”首行顶格开始,推荐使用“<!DOCTYPE html>”

<!DOCTYPE html>

  2、必须声明文档的编码charset,且与文件本身编码保持一致,指定字符编码的 meta 必须是 head 的第一个直接子元素。推荐使用UTF-8编码<meta charset="utf-8">

<meta charset="utf-8">

(1)网页显示字符集


<!--html5格式-->

<meta charset="UTF-8">

<!--简体中文-->

<meta http-equiv="content-type" content="text/css;charset=gb2312">

<!--繁体中文-->

<meta http-equiv="content-type" content="text/css;charset=gbk">

<!--英文-->

<meta http-equiv="content-type" content="text/css;charset=utf-8">

(2)可选标签

公司的版权注释

<!--the site is designed by Bob at 2016.9.24-->

网页制作者信息

<meta name="author" content="123456@qq.com">

网站简介

<meta name="description" content="麦子学院创立于xxx年,学院开设了xxx课程,老师拥有x年的教学经历">

设定网页的到期时间,一旦网页过期,必须到服务器上重新调阅

<meta http-equiv="expires" content="Wed,26 Feb 2017 08:24:00 GMT">

禁止浏览器从本地机缓存中调阅内容

<meta http-equiv="pragma" content="no-cache">

用来防止别人在框架中调用你的页面

<meta http-equiv="Window-target" content="_top">

自动跳转

<meta http-equiv="refresh" content="5;url=http://www.baidu.com">

网页搜索机器人向导,用来告诉机器人哪些页面需要搜索,哪些页 面不需要搜索

<meta name="robots" content="none">

收藏夹图标

<link rel="Shortcut Icon" href="favicon.icon">

3、根据页面内容和需求填写适当的keywords和description

<meta name="description" content="不超过150个字符">
<meta name="keywords" content="">

4、页面title是不可缺少的一项,title 必须作为 head 的直接子元素,并紧随 charset 声明之后

<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>

【资源引入】


  1、保证 favicon 可访问

<link rel="shortcut icon" href="path/to/favicon.ico">//用于显示网页导航栏上的logo

  2、引入 CSS 和 JavaScript 时无须指明 type 属性


  3、引入 CSS 时必须指明 rel="stylesheet"

<link rel="stylesheet" href="page.css">

  4、使用link将css文件引入,并置于head中;使用script将js文件引入,并置于body底部


  5、移动环境或只针对现代浏览器设计的 Web 应用,如果引用外部资源的 URL 协议部分与页面相同,建议省略协议前缀。这是因为使用 protocol-relative URL 引入 CSS,在 IE7/8 下,会发两次请求。是否使用 protocol-relative URL 应充分考虑页面针对的环境

<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>

【结构优化】


  1、尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度


  2、结构顺序和视觉顺序基本保持一致,按照从上至下、从左到右的视觉顺序书写HTML结构。有时为了便于搜索引擎抓取,也会将重要内容在HTML结构顺序上提前


  3、结构、表现、行为三者分离,避免内联


  4、每一个块级元素都另起一行,每一行都使用Tab缩进对齐(head和body的子元素不需要缩进)。删除冗余的行尾空格


  5、对于内容较为简单的表格,建议将tr写成单行


  6、可以在大的模块之间用空行隔开,使模块更清晰


【语义化】


  浏览器会根据标签的语义给定一个默认的样式。判断网页标签语义化是否良好的一个简单方法:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性


  1、尽可能少地使用无语义标签span和div


  2、在语义不明显,既可以使用p也可以使用div的地方,尽量用p


  3、在既可以使用div也可以使用section的地方,尽量用section


  4、不要使用纯样式标签,如b、u等,而改用CSS设置


 


代码格式

【命名】


  1、class 必须单词全字母小写,单词间以 - 分隔


  2、class 必须代表相应模块或部件的内容或功能,不得以样式信息进行命名

<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="left"></div>

  3、同一页面,应避免使用相同的 name 与 id。因为IE7-浏览器会混淆元素的 id 和 name 属性, document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心


【标签】


  1、标签名必须使用小写字母


  2、对于无需自闭合的标签,不需要自闭合


  3、对 HTML5 中规定允许省略的闭合标签,不允许省略闭合标签


  4、HTML 标签的使用应该遵循标签的语义,且要符合标签嵌套规则

<!-- good -->
<p>Hello StyleGuide!</p>
<!-- bad -->
<P>Hello StyleGuide!</P>

<!-- good -->
<input type="text" name="title">
<!-- bad -->
<input type="text" name="title" >

【注释】


  采用类似标签闭合的写法,与HTML统一格式;注释文案两头空格,与CSS注释统一格式


  开始注释:<!-- 注释文案 -->(文案两头空格)


  结束注释:<!-- /注释文案 -->(文案前加“/”符号,类似标签的闭合)


  允许只有开始注释

<!-- 头部 -->
<div class="g-hd">
    <!-- LOGO -->
    <h1 class="m-logo"><a href="#">LOGO</a></h1>
    <!-- /LOGO -->
    <!-- 导航 -->
    <ul class="m-nav">
        <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>

--------------------- 

版权声明:本文为CSDN博主「wujingj」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/sinat_19803127/article/details/80524165


随机新闻
收藏文章
表情删除后不可恢复,是否删除
取消
确定
图片正在上传,请稍后...
评论内容为空!
还没有评论,快来抢沙发吧!