HTML5编码规范标准详Word文件下载.docx
《HTML5编码规范标准详Word文件下载.docx》由会员分享，可在线阅读，更多相关《HTML5编码规范标准详Word文件下载.docx（11页珍藏版）》请在冰豆网上搜索。
p-段落
h1,h2,h3,h4,h5,h6-层级标题
strong,em-强调
ins-插入
del-删除
abbr-缩写
code-代码标识
cite-引述来源作品的标题
q-引用
blockquote-一段或长篇引用
ul-无序列表
ol-有序列表
dl,dt,dd-定义列表
[建议]在CSS可以实现相同需求的情况下不得使用表格进行布局。
1.4属性
[强制]属性必须使用小写字母，其属性值必须用双引号包围。
[建议]布尔类型的建议不添加属性值。
自定义属性建议以xxx-为前缀，推荐使用data-
1.5所有编码均遵循xhtml标准,标签&
属性&
属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br（<
br/>
）,hr（<
hr/>
）等;
属性值必须用双引号包括;
目的:
更加符合web标准（w3c）,也有利于seo。
1.6语义化html,
如标题根据重要性用h*（同一页面只能有一个h1）,
段落标记用p,
列表用ul,
联元素中不可嵌套块级元素;
目的：
减少代码量，
1.7尽可能减少div嵌套,如
<
divclass=”box”>
divclass=”welcome”>
欢迎访问XXX,您的用户名是
divclass=”name”>
用户名<
/div>
完全可以用以下代码替代:
p>
span>
用户名
/span>
/p>
/div>
;
1.8引入JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如jquery-1.4.1.min.js;
引入插件,文件名格式为库名称+插件名称,比如jQuery.cookie.js;
1.9书写地址时,必须避免重定向，例如：
href=”.haogu./”,即须在URL地址后面加上“/”；
2.0在页面中尽量避免使用style属性,即style=”„”除非考虑http请求，响
应速度等因素比重情况具体分析;
2.页面头部
2.1DOCTYPE
[强制]使用doctype来启用标准模式，建议使用大写的DOCTYPE
2.2语言编码
[建议]有助于提高页面的可访问性，必须设置正确的lang属性，例：
htmllang="
zh-CN"
>
[强制]页面必须指定字符编码的meta，且必须是head的第一个直接子元素，例：
metacharset="
UTF-8"
。
Meta标记用于定义页面的相关信息，为非成对标记，位于<
head>
标记之间。
可以有三部分，namehttp-equivcontent
http-equiv属性值可以是：
refresh（页面刷新）http-equiv=“refresh”content=“5；
url=.baidu.”
reply-to（页面回复信息）
keywords（页面关键字）用于某些搜索引擎
content-type（页面容格式）content-type:
text/html
author（页面作者）
description（页面容摘要）
注：
如果没有name属性，那么名称/值对中的名称会采用http-equiv属性的值。
Base页面中的所有标签在新窗口中打开，target值有_blank,_parent,_self,_top。
对应的是连接，href的值可以确定。
Title定义文档的标题
Link用于样式的连接
Style用于直接写样式
Script定义用户客户端脚本文件
2.3CSS和JavaScript引入
[强制]引入css时必须指明rel="
stylesheet"
，在引入css和javascript时必须指明type属性。
[建议]Javascript代码必须放在页面末尾或采用异步加载。
2.4Head容
[强制]Title标签必须设置为head的直接子元素，并紧随charset声明之后。
[强制]Favicon保证可访问，例：
linkrel="
shortcuticon"
href="
path/favicon.ico"
[强制]Viewport属性必须指定。
3.图片
[强制]禁止img的src取值为空，延迟加载的图片也要增加默认的src属性值。
[建议]重要图片添加alt属性值。
[建议]添加width和height属性以避免页面抖动。
4.表单
4.1控件标题
[强制]文本标题的控件必须使用label标签将其与其标题相关联，例：
label>
inputtype="
checkbox"
name="
confirm"
value="
on"
我已确认上述条款
/label>
或
labelfor="
user"
用户：
text"
id="
4.2按钮
[强制]使用button元素时必须指明type属性值
4.3可访问性
[建议]当使用JavaScript进行表单提交时，应使原生提交功能正常工作。
[建议]根据容类型指定输入框的type属性，例：
date"
5.多媒体
[建议]使用audio以及video标签来播放音频、视频时，应当注意格式：
音频格式：
MP3、WAV、Ogg视频格式：
MP4、WebM、Ogg
6.注释
[强制]针对页面或模块的CSS、javascript代码必须进行详细的注释
7.Css命名
7.1样式命名推荐使用英文避免使用汉语拼音,尽量使用简易的单词组合;
命名方式采用驼峰命名法和划线命名法两种，提高可读性。
例如：
dropMenu、subNavMenu、drop-menu、sub_nav_menu。
驼峰命名法用来区别不同的单词。
划线命名法表明从属关系。
如：
“.timeList”和“.time_list”分别表示时间列表和时间部分下的列表。
7.2css属性书写顺序,建议遵循布局定位属性–>
自身属性–>
文本属性–>
其他属性.此条可根据自身习惯书写,但尽量保证同类属性写在一起.
1.H5新标签请查看
2.Css文件命名
模块：
module.css
基本共用：
base.css
布局、版面：
layout.css
主题：
themes.css
专栏：
columns.css
文字：
font.css
表单：
forms.css
补丁：
mend.css
打印：
print.css3.
页面框架命名强制书写必须使用
3.1页眉H5新语义化标签<
header>
3.2导航H5新语义化标签<
nav>
3.3页脚H5新语义化标签<
footer>
无H5新标签的页面框架，一般具有唯
一性，推荐用ID命名。
3.4主体使用main命名。
3.5容使用container命名。
3.6侧栏使用sidebar命名。
3.7栏目使用column命名。
3.8外围整体布局宽度使用wrapper命名。
4页面结构命名:
左右中：
leftrightcenter
子导航：
subnav
顶导航：
topnav
边导航：
sidebar
左导航：
leftsidebar
右导航：
rightsidebar
菜单：
menu
子菜单：
submenu
标题:
title
摘要:
summary+功能
标志：
logo
广告：
banner
登陆：
login
登录条：
loginbar
注册：
regsiter
搜索：
search
功能区：
shop
标题：
title
加入：
joinus
状态：
status
按钮：
btn
滚动：
scroll
标签页：
tab
文章列表：
list
提示信息：
msg
5模块结构命名
友情：
friendlink
：
copyright
小技巧：
tips
指南：
guild
服务：
service
投票：
vote
合作伙伴：
partner
H5与之前的兼容性问题
具有boolean值的属性
在html中有一些元素的属性，当只写属性名称而不指定属性值时，表求属性值为true,如果设置该属性值为false，则不使用该属性即可。
另外，要想将属性值设定true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。
例如input元素中的disabled与readonly就是这样的属性。
引号使用
在html中使用属性时，属性值可以使用双引号，也可以使用单引号括起来，在HTML5中做了一些改进，当属性值不包括空字符串、“<
”、“>
”、“=”、单引号、双引号等字符时，属性两边的引号是可以省略的。
页面布局的W3C盒子模型
每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。
属性
描述
margin
有1-4个值设置元素的边界，每个值都是长度、百分比或者auto，百分比值参考上级元素的宽度，允许使用负边界值。
还可以使用margin-leftmargin-rightmargin-bottommargin-left
padding
设置区域的边距，是边框和元素容之间的间隔距离可以分开四个单独设置
border
可以设置边框的风格、颜色、宽度，也可以分开四个单独设置
width
可以设置百分比、像素、auto等值，不允许使用负值
height
Marginpadding
样式挨着写，布局，颜色最好分开
升级会员 