HTML 书写规范
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）⽹页显⽰字符集
（2）可选标签<!--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">
<!--the site is designed by Bob at 2016.9.24-->
drawablepadding是什么意思
<meta name="author" content="123456@qq"><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=www.baidu">
telnet client
<meta name="robots" content="none">
3、根据页⾯内容和需求填写适当的keywords和descriptionhtml个人网页完整代码顺序
<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/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>
【结构优化】
  1、尽量遵循 HTML 标准和语义，但是不要以牺牲实⽤性为代价。任何时候都要尽量使⽤最少的标签并保持最⼩的复杂度
  2、结构顺序和视觉顺序基本保持⼀致，按照从上⾄下、从左到右的视觉顺序书写HTML结构。有时为了便于搜索引擎抓取，也会将重要内容在HTML结构顺序上提前
  3、结构、表现、⾏为三者分离，避免内联in duplicate什么意思
  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 属性， ElementById 可能获得不期望的元素。所以在对元素的 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注释统⼀格式
  开始注释：<!-- 注释⽂案 -->（⽂案两头空格）
shellout什么意思中文
  结束注释：<!-- /注释⽂案 -->（⽂案前加“/”符号，类似标签的闭合）
  允许只有开始注释
<!-- 头部 -->
<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>
<!-- 更多导航项 -->
user1什么意思
</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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。