HTML规范 - 代码格式

转载 2015年07月06日 21:17:50
说明文案的注释方法

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

  • 开始注释:<!-- 注释文案 -->(文案两头空格)。
  • 结束注释:<!-- /注释文案 -->(文案前加“/”符号,类似标签的闭合)。
  • 允许只有开始注释!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 头部 -->
<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
5
6
7
<!-- <h1 class="m-logo"><a href="#">LOGO</a></h1> -->
<!--
<ul class="m-nav">
    <li><a href="#">NAV1</a></li>
    <li><a href="#">NAV2</a></li>
</ul>
-->
HTML注释在IE6中的BUG
  • 如果两个浮动元素之间存在注释,那么可能导致布局错位或文字的BUG。
  • 所以,这种情况下,我们通常将注释去掉,或者索性采用模板语言(ftl、vm)的注释。
严格的嵌套
  • 尽可能以最严格的xhtml strict标准来嵌套,比如内联元素不能包含块级元素等等。
  • 正确闭合标签且必须闭合。
严格的属性
  • 属性和值全部小写,每个属性都必须有一个值,每个值必须加双引号。
  • 没有值的属性必须使用自己的名称做为值(checked、disabled、readonly、selected等等)。
  • 可以省略style标签和script标签的type属性。
常用的标签
常见标签表
标签 语义 嵌套常见错误 常用属性(加粗的为不可缺少的或建议的)
<a></a> 超链接/锚 a不可嵌套a href,name,title,rel,target
<br /> 换行    
<button></button> 按钮 不可嵌套表单元素 type,disabled
<dd></dd> 定义列表中的定义(描述内容) 只能以dl为父容器,对应一个dt  
<del></del> 文本删除    
<div></div> 块级容器    
<dl></dl> 定义列表 只能嵌套dt和dd  
<dt></dt> 定义列表中的定义术语 只能以dl为父容器,对应多个dd  
<em></em> 强调文本    
<form></form> 表单   action,target,method,name
<h1></h1> 标题 从h1到h6,不可嵌套块级元素  
<iframe></iframe> 内嵌一个网页   frameborder,width,height,src,scrolling,name
<img /> 图像   alt,src,width,height
<input /> 各种表单控件   type,name,value,checked,disabled,maxlength,readonly,accesskey
<label></label> 标签为input元素定义标注   for
<li></li> 列表项 只能以ul或ol为父容器  
<link /> 引用样式或icon 不可嵌套任何元素 type,rel,href
<meta /> 文档信息 只用于head content,http-equiv,name
<ol></ol> 有序列表 只能嵌套li  
<option></option> select中的一个选项 仅用于select value,selected,disabled
<p></p> 段落 不能嵌套块级元素  
<script></script> 引用脚本 不可嵌套任何元素 type,src
<select></select> 列表框或下拉框 只能嵌套option或optgroup name,disabled,multiple
<span></span> 内联容器    
<strong></strong> 强调文本    
<style></style> 引用样式 不可嵌套任何元素 type,media
<sub></sub> 下标    
<sup></sup> 上标    
<table></table> 表格 只可嵌套表格元素 width,align,background,cellpadding,cellspacing,summary,border
<tbody></tbody> 表格主体 只用于table  
<td></td> 表格中的单元格 只用于tr colspan,rowspan
<textarea></textarea> 多行文本输入控件   name,accesskey,disabled,readonly,rows,cols
<tfoot></tfoot> 表格表尾 只用于table  
<th></th> 表格中的标题单元格 只用于tr colspan,rowspan
<thead></thead> 表格表头 只用于table  
<title></title> 文档标题 只用于head  
<tr></tr> 表格行 嵌套于table或thead、tbody、tfoot  
<ul></ul> 无序列表 只能嵌套li  

相关文章推荐

用nodepad++将代码文件导出html格式

  • 2013年05月31日 14:52
  • 238KB
  • 下载

html中插入wmv格式视频文件的代码

1.avi格式 2.mpg格式 3.rm格式 4.wmv...

textview完美展示html格式代码

  • 2016年12月09日 13:48
  • 333KB
  • 下载

Js编写的日历代码html格式

  • 2013年06月20日 23:37
  • 5KB
  • 下载

一个显示日历的页面代码(后缀格式为html)

摘自百度的JavaScript+HTML日历 - www.6a8a.com             body,td,.p1,.p2,.i{font-family:arial} ...

【CSS】CSS详细介绍:(HTML/CSS结合方式、CSS代码格式、选择器、盒子模型)

(一)CSS概述 : CSS的概念: CSS是层叠样式表(Cascading Style Sheets)用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期...

HTML用来显示计算机代码的标签 pre 预定义格式标签

对于HTML,您无法通过在HTML代码中添加额外的空格或换行来改变输出的效果。 当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的的空格或空行都会被算作一个空格。 《春晓...

ubuntu下用java代码调用命令将java格式文件转换为html格式文件

首先我们应该在电脑上装上GNU Source-highlight 3.1.7,给个链接参考: http://www.gnu.org/software/src-highlite/#mozTocId120...

阿里java编码规范(一)命名风格,常量定义,和代码格式

最近阿里出了一个java开发手册,里面涉及到很多工作规范的地方,有很多借鉴和参考的作用,也可以给新入行的工程师作为参考。 下载地址是在:http://techforum-img.cn-hangzho...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML规范 - 代码格式
举报原因:
原因补充:

(最多只允许输入30个字)