HTML编码规范1.0

摘要:
XHTML元素的存在意味着标记内容的部分具有相应的结构含义。没有理由使用其他标记。在团队开发中遵循语义HTML结构可以减少成员编码风格差异造成的影响,并便于维护和提高开发效率。

1. HTML语义化 

2. 书写规范 

3. 补充 

4. 注释 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. HTML语义化 

分 离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由 使用其他的标记。换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代 替<h2>标记标题。 

遵循语义化的HTML结构在团队开发中可以减少因各成员编码风格的差异化所造成的影响,并且便于维护,提高开发效率。 

 

部分标签的语义: 

标签 

语义 

<div> 

Division(分隔) 

<span> 

Span(范围) 

<ol> 

Ordered List(有序列表) 

<ul> 

Unordered List(无序列表) 

<li>

List Item(列表项目)

部分使用场合:

1.标题

<h1>文档标题</h1>

<h2>次级标题</h2>

而不要使用

<div class=”title”>文档标题</div>,或者<span class=”title”>文档标题</span>.

PS: h1通常用于页面logo

PS2:严格语义研究者会建议你只有一个h1两个h2的,3个h3的等

2.表格

<table>用于显示表格数据。不建议用于页面布局。同时使用下列的结构可让你的表格更具可读性

(1)使用表标题( th )为表格的表头

(2)如果可以的话,使用thead , tbody和tfoot适当的区分表格

(3)为表格提供了一个caption,说明是什么信息在表格中

5. 定义列表

<dl>、<dt>、<dd>

例如:

<dl>

<dt>Dog</dt>

<dd>A carnivorous mammal of the family Canidae.</dd>

</dl>

<dd>是对<dt>的解释说明

2. 书写规范

1. 所有标签必须闭合,如:<p>内容</p> 或 <br />

2. 所有的HTML元素及其属性名称均使用小写

3. 标签要合理嵌套,避免inline元素嵌套block元素

4. 标签属性值必须包含在双引号中,如 <div class=content></div>

5. 特殊字符用编码标识,如: ” <” 用 ”<”表示,” >” 用 ”>”表示

6. 为图片增加alt属性

7. 尽量减少嵌套层次

8. 使用 Tab 键进行代码缩进,以节约代码大小(4个空格宽度)

9. 将编辑器中的换行符设置成Unix格式

3. 补充

对于浏览器的识别可采用IE条件注释,避免使用javascript(或其他)判断

<!–[if !IE]>除IE外都可识别<![endif]–>

<!–[if IE]> 所有的IE可识别 <![endif]–>

<!–[if IE 5.0]> 只有IE5.0可以识别 <![endif]–>

<!–[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]–>

<!–[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]–>

<!–[if IE 6]> 仅IE6可识别 <![endif]–>

<!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–>

<!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>

<!–[if IE 7]> 仅IE7可识别 <![endif]–>

<!–[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]–>

<!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–>

4.注释

<!o 新闻 by Tom@20090813 –>

正文

<!x 新闻 –>

每一个HTML section需包含有完整的起始和终结注释,如需要可在注释头部添加修改人相关信息。

这样可以让文本编辑器快速地定位到CSS section的头部与结尾。

免责声明:文章转载自《HTML编码规范1.0》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇解决txt乱码:将windows新建txt转换成utf-8格式PyTorch-网络的创建,预训练模型的加载下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

五:HttpServletResponse对象

一、HttpServletResponse对象介绍 HttpServletResponse对象代表服务器的响应。这个对象中封装了向客户端发送数据、发送响应头,发送响应状态码的方法。查看HttpServletResponse的API,可以看到这些相关的方法。 1.1、负责向客户端(浏览器)发送数据的相关方法    1.2、负责向客户端(浏览器)发送响应头的相...

网页HTML代码大全

1.结构性定义 文件类型 <HTML></HTML> (放在档案的开头与结尾) 文件主题 <TITLE></TITLE> (必须放在「文头」区块内) 文头 <HEAD></HEAD> (描述性资料,像是「主题」) 文体 <BODY></BODY> (文件本体)...

关于浏览器对html, js,css的解析先后顺序的理解

1.首先要了解页面的结构(包含哪些元素?哪些计算机语言能够在页面中运行 ) (1)html          不仅可以包含文字,还可以包含图片、链接,甚至音乐、程序等非文字元素的标记语言          (展示给用户,不能太单调,css) (2)css          是一种用来表现HTML的计算机语言,能使HTML页面变得更加美观        ...

Markdown 语法的超快速上手

本文支持WTFPL协议,因此你想往哪转就往哪转。 目录 Why markdown? 标记语言??我知道HTML啊,有什么区别么?? 他俩啥关系 他俩谁好用 How? 标题文本(巧了,说的不就是我么??) 粗体、斜体、粗斜体、删除线 引用 表格 代码块与行内代码 链接 图片 列表 有序列表 无序列表 数学公式($mathrm{LaTeX}...

jmeter 查看结果树之查看响应的13种方法

查看结果树查看响应有哪几种方法,可通过左侧面板底部的下拉框选择 1 Text 查看结果树中请求的默认格式为Text,显示取样器结果、请求、响应数据3个部分内容。 取样器结果:默认Raw展示,可以切换为Parsed视图,表单展示更直观。 请求:默认Raw展示,包括Restquest Body 及Restquest Headers两部分。 HTTP视图展示更...

【JavaWeb学习】过滤器Filter

一、简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 html 文件等进行拦截,从而实现一些特殊的功能。例如实现URL级别的权限访问控制、过滤敏感词汇、压缩响应信息等一些高级功能。 Servlet API中提...