HTML5编码规范Word文件下载.docx
《HTML5编码规范Word文件下载.docx》由会员分享,可在线阅读,更多相关《HTML5编码规范Word文件下载.docx(9页珍藏版)》请在冰豆网上搜索。
div不得置于p中,tbody必须置于table中。
[建议]标签的使用必须遵循标签的语义,
例:
p-段落
h1,h2,h3,h4,h5,h6-层级标题
strong,em-强调
ins-插入
del-删除
abbr-缩写
code-代码标识
cite-引述来源作品的标题
q-引用
blockquote-一段或长篇引用
ul-无序列表
ol-有序列表
dl,dt,dd-定义列表
[建议]在CSS可以实现相同需求的情况下不得使用表格进行布局。
属性
[强制]属性必须使用小写字母,其属性值必须用双引号包围。
[建议]布尔类型的建议不添加属性值。
自定义属性建议以xxx-为前缀,推荐使用data-
所有编码均遵循xhtml标准,标签&
属性&
属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(<
br/>
),hr(<
hr/>
)等;
属性值必须用双引号包括;
目的:
更加符合web标准(w3c),也有利于seo。
语义化html,
如标题根据重要性用h*(同一页面只能有一个h1),
段落标记用p,
列表用ul,
内联元素中不可嵌套块级元素;
目的:
减少代码量,
尽可能减少div嵌套,如
<
divclass=”box”>
divclass=”welcome”>
欢迎访问XXX,您的用户名是
divclass=”name”>
用户名<
/div>
完全可以用以下代码替代:
p>
span>
用户名
/span>
/p>
/div>
;
引入JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如引入插件,文件名格式为库名称+插件名称,比如
书写链接地址时,必须避免重定向,例如:
href=”即须在URL地址后面加上“/”;
在页面中尽量避免使用style属性,即style=””除非考虑网站http请求,网站响
应速度等因素比重情况具体分析;
2.页面头部
DOCTYPE
[强制]使用doctype来启用标准模式,建议使用大写的DOCTYPE
语言编码
[建议]有助于提高页面的可访问性,必须设置正确的lang属性,例:
htmllang="
zh-CN"
>
[强制]页面必须指定字符编码的meta,且必须是head的第一个直接子元素,例:
metacharset="
UTF-8"
。
Meta标记用于定义页面的相关信息,为非成对标记,位于<
head>
标记之间。
可以有三部分,namehttp-equivcontent
http-equiv属性值可以是:
refresh(页面刷新)http-equiv=“refresh”content=“5;
url=页面回复信息)
keywords(页面关键字)用于某些搜索引擎
content-type(页面内容格式)content-type:
text/html
author(页面作者)
description(页面内容摘要)
注:
如果没有name属性,那么名称/值对中的名称会采用http-equiv属性的值。
Base页面中的所有标签在新窗口中打开,target值有_blank,_parent,_self,_top。
对应的是连接,href的值可以确定。
Title定义文档的标题
Link用于样式的连接
Style用于直接写样式
Script定义用户客户端脚本文件
CSS和JavaScript引入
[强制]引入css时必须指明rel="
stylesheet"
,在引入css和javascript时必须指明type属性。
[建议]Javascript代码必须放在页面末尾或采用异步加载。
Head内容
[强制]Title标签必须设置为head的直接子元素,并紧随charset声明之后。
[强制]Favicon保证可访问,例:
linkrel="
shortcuticon"
href="
path/"
[强制]Viewport属性必须指定。
3.图片
[强制]禁止img的src取值为空,延迟加载的图片也要增加默认的src属性值。
[建议]重要图片添加alt属性值。
[建议]添加width和height属性以避免页面抖动。
4.表单
控件标题
[强制]文本标题的控件必须使用label标签将其与其标题相关联,例:
label>
inputtype="
checkbox"
name="
confirm"
value="
on"
我已确认上述条款
/label>
或
labelfor="
user"
用户:
text"
id="
按钮
[强制]使用button元素时必须指明type属性值
可访问性
[建议]当使用JavaScript进行表单提交时,应使原生提交功能正常工作。
[建议]根据内容类型指定输入框的type属性,例:
date"
5.多媒体
[建议]使用audio以及video标签来播放音频、视频时,应当注意格式:
音频格式:
MP3、WAV、Ogg视频格式:
MP4、WebM、Ogg
6.注释
[强制]针对页面或模块的CSS、javascript代码必须进行详细的注释
7.Css命名
样式命名推荐使用英文避免使用汉语拼音,尽量使用简易的单词组合;
命名方式采用驼峰命名法和划线命名法两种,提高可读性。
例如:
dropMenu、subNavMenu、drop-menu、sub_nav_menu。
驼峰命名法用来区别不同的单词。
划线命名法表明从属关系。
如:
“.timeList”和“.time_list”分别表示时间列表和时间部分下的列表。
css属性书写顺序,建议遵循布局定位属性–>
自身属性–>
文本属性–>
其他属性.此条可根据自身习惯书写,但尽量保证同类属性写在一起.
1.H5新标签请查看
2.Css文件命名
模块:
基本共用:
布局、版面:
主题:
专栏:
文字:
表单:
补丁:
打印:
3.
页面框架命名强制书写必须使用
页眉H5新语义化标签<
header>
导航H5新语义化标签<
nav>
页脚H5新语义化标签<
footer>
无H5新标签的页面框架,一般具有唯
一性,推荐用ID命名。
主体使用main命名。
内容使用container命名。
侧栏使用sidebar命名。
栏目使用column命名。
外围整体布局宽度使用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
样式挨着写,布局,颜色最好分开