来自：麦田
链接：http://itmyhome.com/html/(点击尾部阅读原文前往)
基本规范
语义
使用符合语义的标签书写 HTML 文档, 选择恰当的元素表达所需的含义;[h2]大小写[/h2]
元素的标签和属性名必须小写, 属性值必须加双引号; 例如[h2]缩进[/h2][h2]
[/h2]- [h2]使用四个空格来表示缩进，不要使用 tab 键;[/h2]
- [h2]在块状元素，列表，表格元素后面使用新行，并且对它的子元素进行缩进.[/h2]
例如[h2]空格[/h2]
去除比不必要的空格; 例如[h2]嵌套[/h2][h2]
[/h2]- [h2]元素嵌套遵循 (X)HTML Strict 嵌套规则, 推荐使用Firefox插件 HTML Validator 进行检查;[/h2]
- [h2]正确区分自闭合元素和非自闭合元素. 非法闭合包括：..、、, 非法闭合会导致页面嵌套错误问题;[/h2]
Test
This is only a test. Test
This is only a test.
使用双引号来标识 html 的属性; 例如[h2]自定义属性[/h2]
通过给元素设置自定义属性来存放与 JavaScript 交互的数据, 属性名格式为 data-xx (例如：data-lazyload-url)
DOCTYPE
页面文档类型统一使用HTML5 DOCTYPE. 代码如下：[/quote][h2]编码[/h2]
声明方法遵循HTML5的规范.推荐使用 utf-8 编码.
[quote]
建议对超过10行的页面模块进行注释, 以降低开发人员的嵌套成本和后期的维护成本. 例如：[h2]协议[/h2]
如果链接和当前页面一致则忽略链接的协议部分，例如/* 不推荐 */
.example {
backgroundnull:url(https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-411c7985702b673e31ffd33cacbca909.css);
} /* 推荐 */
.example {
background: url(//www.taobao.com/fp.css);
}
[/h2]- [h2]使用 TODO 来标记待做事情，便于后期搜索.[/h2]
- [h2]在 TODO 后添加 (姓名或邮件) 来表示分类.[/h2]
例如[h2]焦点分离[/h2][h2]
[/h2]- [h2]将表现，行为和结构分离：不要在 html 和模板中加入除了结构以外的东西.[/h2]
- [h2]在文档中引入尽可能少的样式和脚本while(!game_over)[/h2]
HTML sucks
HTML sucks
I’ve read about this on a few sites but now I’m sure:
HTML is stupid!!1
I can’t believe there’s no way to control the styling of
my website without doing everything all over again! My first CSS-only redesign
My first CSS-only redesign
I’ve read about this on a few sites but today I’m actually
doing it: separating concerns and avoiding anything in the HTML of
my website that is presentational.
It’s awesome!
[h2]结构性元素[/h2][h2]
[/h2]- [h2]p 表示段落. 只能包含内联元素, 不能包含块级元素;[/h2]
- [h2]div 本身无特殊含义, 可用于布局. 几乎可以包含任何元素;[/h2]
- [h2]br 表示换行符;[/h2]
- [h2]hr 表示水平分割线;[/h2]
- [h2]h1-h6 表示标题. 其中 h1 用于表示当前页面最重要的内容的标题;[/h2]
- [h2]blockquote 表示引用, 可以包含多个段落. 请勿纯粹为了缩进而使用 blockquote, 大部分浏览器默认将 blockquote 渲染为带有左右缩进;[/h2]
- [h2]pre 表示一段格式化好的文本;[/h2]
[h2]
[/h2][h2]头部元素[/h2][h2]
[/h2]- [h2]title 每个页面必须有且仅有一个 title 元素;[/h2]
- [h2]base 可用场景：首页、频道等大部分链接都为新窗口打开的页面;[/h2]
- link link 用于引入 css 资源时, 可省去 media(默认为all) 和 type(默认为text/css) 属性;
- style type 默认为 text/css, 可以省去;
- script type 属性可以省去; 不赞成使用lang属性; 不要使用古老的这种hack脚本, 它用于阻止第一代浏览器(Netscape 1和Mosaic)将脚本显示成文字;
- noscript 在用户代理不支持 JavaScript 的情况下提供说明;
[h2]
[/h2][h2]文本元素[/h2][h2]
[/h2]- [h2]a a 存在 href 属性时表示链接, 无 href 属性但有 name 属性表示锚点;[/h2]
- [h2]em,strong em 表示句意强调, 加与不加会引起语义变化, 可用于表示不同的心情或语调; strong 表示重要性强调, 可用于局部或全局, strong强调的是重要性, 不会改变句意;[/h2]
- [h2]abbr 表示缩写;[/h2]
- [h2]sub,sup 主要用于数学和化学公式, sup还可用于脚注;[/h2]
- [h2]span 本身无特殊含义;[/h2]
- [h2]ins,del 分别表示从文档中增加(插入)和删除[/h2]
[h2]
[/h2][h2]媒体元素[/h2][h2]
[/h2]- [h2]img 请勿将img元素作为定位布局的工具, 不要用他显示空白图片; 给img元素增加alt属性;例如[/h2]
[h2]
[/h2][h2]列表元素[/h2][h2]
[/h2]- [h2]dl 表示关联列表, dd是对dt的解释; dt和dd的对应关系比较随意： 一个dt对应多个dd、多个dt对应一个dd、多个dt对应多个dd, 都合法; 可用于名词/单词解释、日程列表、站点目录;[/h2]
- [h2]ul 表示无序列表;[/h2]
- [h2]ol 表示有序列表, 可用于排行榜等;[/h2]
- [h2]li 表示列表项, 必须是ul/ol的子元素;[/h2]
[h2]
[/h2][h2]表单元素[/h2][h2]
[/h2]- [h2]推荐使用 button 代替 input, 但必须声明 type;[/h2]
- [h2]推荐使用 fieldset, legend 组织表单[/h2]
- [h2]表单元素的 name 不能设定为 action, enctype, method, novalidate, target, submit 会导致表单提交混乱[/h2]
[h1]文档模板[/h1]Sample page
页头
主体
页尾
// 你的代码
- http://www.w3.org/TR/html4/
- http://www.w3.org/TR/html5/
- http://reference.sitepoint.com/html/
- http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
●本文编号85，以后想阅读这篇文章直接输入85即可。
●输入m可以获取到全部文章目录
|
|
转播
