前端基本上第一课都是需要掌握前端的各种编码规范，但是实际上并不是所有的人都能够在后期的项目开发中明白这一点的，所以需要我们在项目进行中，时刻用这些规范激励自己，进一步地明白这些规范的深层次的意义，从而能够达到灵活自如地运用到工作中。
今天我就总结下html的前端规范，包括书写的规范和html标签的使用规范。以及在webstorm中html里可以使用的快捷键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html规范</title>
</head>
<body>
<!--1.id和name使用不同的命名法-->
<input type="text" name="foo">
<div id="foo"></div><!-- 这种情况ie6去得document.getElementById('foo').tagName会显示为input -->
<!-- 2.对于无需自闭合的标签，不允许自闭合，常见的无需自闭合标签有meta,input,br,img,hr等 -->
<!-- good -->
<input type="text" name="title">
<!--bad-->
<input type="text" name="title"/>
<!--3.标签使用必须符合标签嵌套规则-->
<!-- div不得置于p中， tbody必须置于table中 -->
<!-- 4.HTML标签的使用应该遵循标签的语义 -->
<!-- 下面是常见语义标签 -->
<!-- p 段落 -->
<!-- h1,h2,h3,h4,h5,h6 层级标题 -->
<!-- strong,em 强调 -->
<!-- ins 插入 -->
<!-- del 删除 -->
<!-- abbr 缩写 -->
<!-- code 代码标识 -->
<!-- cite 引述来源作品的标题 -->
<!-- q 引用 -->
<!-- blockquote 一段或长篇引用 -->
<!-- ul 无序列表 -->
<!-- ol 有序列表 -->
<!-- dl,dt,dd 定义列表 -->
<!--5.在Css可以实现相同需求的情况下不得使用表格进行布局 -->
<!-- 兼容性允许的情况下应尽量保持语义正确性，对网格对齐和拉伸性有严格要求的场景允许例外 -->
<!--6.属性名必须使用小写字母 -->
<!--7.属性值必须使用双引号包围 -->
<!--8.布尔类型的属性，建议不添加属性值 -->
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<!--9.自定义属性建议以xxx-为前缀，推荐使用data-,使用前缀有助于区分自定义属性和标准定义的属性 -->
<ol data-ui-type="Select"></ol>
<!-- 10.页面必须使用精简形式，明确指定字符编码。指定字符编码的meta必须是head的第一个直接子元素 -->
<!-- 11.引入css和Javascript时无需指明type属性 -->
<!-- text/css和text/javascript是type的默认值 -->
<!--12.保证favicon可访问 未指定favicon时，大多数浏览器会请求Web Server根目录下的favicon.ico -->
<!-- 在Web Server 根目录放置favicon.ico文件 使用link指定favicon -->
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- 13.若页面欲对移动设备友好，需指定页面的viewport -->
<!-- 14.禁止img的src取值为空，延迟加载的图片也要增加默认的src -->
<!-- src取值为空，会导致部分浏览器重新加载一次当前页面 -->
<!-- 15.避免为img添加不必要的title属性，多余的title影响看图体验，并且增加了页面尺寸 -->
<!-- 16.为重要图片添加alt属性，可以提高图片加载失败时的用户体验 -->
<!-- 17.添加width和height属性，以避免页面抖动 -->
<!-- 18.有下载需求的图片采用img标签实现，无下载需求的图片采用css背景图实现 -->
<!-- 产品logo,用户头像，用户产生的图片等有潜在下载需求的图片，以img形式实现，能方便用户下载 -->
<!-- 下载需求的图片，比如：icon,背景，代码使用的图片等，尽可能采用css背景图实现 -->
<!-- 19.有文本标题的控件必须使用label标签将其与其标题项关联 (推荐使用第一种，减少不必要的id,如果Dom结构不允许直接嵌套，则应使用第二种) -->
<!-- 将控件置于lable内 -->
<lable><input type="checkbox" name="confirm" value="on">我已确认上述条款</lable>
<!-- label的for属性指向控件的id -->
<label for="username">用户名</label><input type="textbox" name="username" id="username">
<!-- 20.使用button元素时必须指明type属性值 -->
<button type="submit">提交</button>
<button type="button">取消</button>
<!-- 尽量不要使用按钮类元素的name属性，使用按钮的name属性会带来许多难以发现的问题 -->
<!-- 当使用javascript进行表单提交时，如果条件允许，应使用原生提交功能正常工作 -->
<form action="/login" method="post">
<p><input name="username" type="text" placeholder="用户名"></p>
<p><input name="password" type="password" placeholder="密码"></p>
</form>
<!-- 21.在针对移动设备开发的页面时，根据内容类型指定输入框的type属性，能获得友好的输入体验 -->
<input type="date">
<!-- 22.使用退化到插件的方式来对多浏览器进行支持,只有必要的时候开启音视频的自动播放 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<object width="100" height="100" data="audio.mpg3">
<embed width="100" height="50" src="audio.swf">
</object>
</audio>
<!--尽量采用HTML5规范-->
<!--确保正确的HTML层级：嵌套元素时确保元素首尾完整，在一个有大量内容的元素的结束标签后应添加注释，这样有助于后期debug,特别是在使用模板的时候-->
<div id="foobar">
...
</div><!-- foobar ends -->
<!--所有不能自动结束的元素末尾添加结束标签-->
<!--</li>结束标签不是必须的，所以有些人认为可以不写</li>,这可以接受，但是</ul>和</ol>标签一定要加-->
<!--<article>内容中的标题应该从<h1>开始-->
<!-->>>>>>> 代码校验 <<<<<<<<-->
<!--1.尽量采用HTML5规范-->
<!--2.确保正确的HTML层级：嵌套元素时确保元素首尾完整，在一个有大量内容的元素的结束标签后应添加注释，这样有助于后期debug,特别是在使用模板的时候-->
<!--<div id="foobar">-->
<!--...-->
<!--</div><!– foobar ends –>-->
<!--3.所有不能自动结束的元素末尾添加结束标签-->
<!--4.</li>结束标签不是必须的，所以有些人认为可以不写</li>,这可以接受，但是</ul>和</ol>标签一定要加-->
<!--5.<video>和<audio>元素必须要有结束标签-->
<!--6.去掉冗余的代码：-->
<!--<img>和<link>这一类元素可以不加结束标签-->
<!--布尔型的属性可以不赋值，只要该属性出现，值就为true-->
<!--7.css和javascript链接不要type属性-->
<!-->>>>>>> 代码的排版 <<<<<<<<-->
<!--1.项目中保持统一的HTML代码风格-->
<!--2.统一所有引号的使用规则，不要这里用单引号，那里又用单引号-->
<!-->>>>>>> 语义化 <<<<<<<<-->
<!--1.修改字体样式时，<em>和<strong>要比<i>和<b>更好些，前者的语义更加明显-->
<!--2.<form>中要包含<label>元素，input元素要有type、placeholder以及其他必要的属性，即使值为空都可以-->
<!--3.不要把文字和元素混在一起，容易导致布局出错（eg.<div>Name:<input type="text"/></div>）-->
<!--4.标题使用<h1>(<h2>,<h3>等)，列表使用<ul>或者<ol>-->
<!--5.<article>内容中的标题应该从<h1>开始-->
<!--6.正文中的文本内容要用<p>标签，内容结构化可以使用HTML5的新元素（或者<div>）-->
<!-->>>>>>> 布局 <<<<<<<<-->
<!--1.<p>元素用来放文字，而不是用来布局，在浏览器自身的样式表中默认<p>有margin和其他样式-->
<!--2.想要换行可以使用<block>元素或者CSS的display属性，尽量避免使用<br>来换行，有时在诗文中会把<br>作为标点来使用-->
<!--3.避免使用<hr>,因为这个元素对语义和结构没有太大帮助，反而<hr>极差的灵活性对布局和显示有很大影响-->
<!--4.不要滥用<div>,W3C对<div>的描述是这样的：当没有其他元素可用时才能使用<div>-->
<!--5.知道哪些是块级元素，这样就可以避免把块级元素放到<div>里面（eg.列表就不需要放到div里面）-->
<!--6.<table>是用来放表格数据的，不要用来布局-->
<!--7.学会使用Flex box-->
<!--8.使用margin的规则，通常情况下，margin都是添加在元素的bottom和right,或者top和left,尽量避免同时使用bottom和top,或者right和left-->
<!-->>>>>>> 易访问性 <<<<<<<<-->
<!--1.要准备备用内容：比如给<track>元素添加说明和副标题，给<video>和<audio>元素添加备用的文字或者图片，-->
<!--视频内容要配上相应的截图或海报，每张图片都要加alt属性-->
<!--2.链接要加title属性-->
<!--3.<input>元素中要加入type和placeholder-->
<!--尽量少用iframe-->
<!--创建iframe元素的开销要比创建其他元素的开销高几十倍甚至几百倍；iframe会阻塞onload事件-->
<!-- HTML的在webStorm的快捷键 -->
<!-- 1. link:css -->
<!--<link rel="stylesheet" href="style.css">-->
<!-- 2. ul+ -->
<ul>
<li></li>
</ul>
<!-- 3. a:link -->
<a href="http://"></a>
<!-- 4. a:mail -->
<a href="mailto:"></a>
<!-- 5. form:get -->
<form action="" method="get"></form>
<!-- 6. input:hidden -->
<input type="hidden" name="">
<!-- 7. div#name -->
<div id="name"></div>
<!-- 8. div.name -->
<div class="name"></div>
<!-- 9. div.one.two.three -->
<div class="one two three"></div>
<!-- 10. p+p -->
<p></p>
<p></p>
<!-- 11. p*4 -->
<p></p>
<p></p>
<p></p>
<p></p>
<!-- 12. ul>li.item*6 -->
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<!-- 13. ul>li.item$*6 -->
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
</ul>
<!-- 14. ul.menu>li.item*6>a[href="href://www.baidu.com"] -->
<ul class="menu">
<li class="item"><a href="href://www.baidu.com"></a></li>
<li class="item"><a href="href://www.baidu.com"></a></li>
<li class="item"><a href="href://www.baidu.com"></a></li>
<li class="item"><a href="href://www.baidu.com"></a></li>
<li class="item"><a href="href://www.baidu.com"></a></li>
<li class="item"><a href="href://www.baidu.com"></a></li>
</ul>
<!-- 15. script:src -->
<script src=""></script>
<!-- 16. script -->
<script></script>
</body>
</html>
扫一扫
395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
