html整体页⾯居中顶格对齐,HTML规范
前⾔
HTML是描述⽹页结构的超⽂本标记语⾔，HTML规范能够使HTML代码风格保持⼀致，使得HTML更容易理解和维护。
整体结构
1、⽂件应以“.....>”⾸⾏顶格开始，推荐使⽤“”
2、必须声明⽂档的编码charset，且与⽂件本⾝编码保持⼀致，指定字符编码的 meta 必须是 head 的第⼀个直接⼦元素。推荐使⽤UTF-8编码
abstract可以修饰变量吗3、根据页⾯内容和需求填写适当的keywords和description
4、页⾯title是不可缺少的⼀项，title 必须作为 head 的直接⼦元素，并紧随 charset 声明之后
页⾯标题
资源引⼊
电缸
1、保证 favicon 可访问
rmit canvas login
2、引⼊ CSS 和 JavaScript 时⽆须指明 type 属性
3、引⼊ CSS 时必须指明 rel="stylesheet"
4、使⽤link将css⽂件引⼊，并置于head中；使⽤script将js⽂件引⼊，并置于body底部
结构优化
qq飞车源码论坛1、尽量遵循 HTML 标准和语义，但是不要以牺牲实⽤性为代价。任何时候都要尽量使⽤最少的标签并保持最⼩的复杂度
2、结构顺序和视觉顺序基本保持⼀致，按照从上⾄下、从左到右的视觉顺序书写HTML结构。有时为了便于搜索引擎抓取，也会将重要内容在HTML结构顺序上提前
3、结构、表现、⾏为三者分离，避免内联
4、每⼀个块级元素都另起⼀⾏，每⼀⾏都使⽤Tab缩进对齐(head和body的⼦元素不需要缩进)。删除冗余的⾏尾空格
5、对于内容较为简单的表格，建议将tr写成单⾏
6、可以在⼤的模块之间⽤空⾏隔开，使模块更清晰
语义化
浏览器会根据标签的语义给定⼀个默认的样式。判断⽹页标签语义化是否良好的⼀个简单⽅法：去掉样式，看⽹页结构是否组织良好有序，是否仍然有很好的可读性
1、尽可能少地使⽤⽆语义标签span和div
2、在语义不明显，既可以使⽤p也可以使⽤div的地⽅，尽量⽤p
3、在既可以使⽤div也可以使⽤section的地⽅，尽量⽤section
4、不要使⽤纯样式标签，如b、u等，⽽改⽤CSS设置
代码格式
1、缩进
使⽤2个空格代替1个Tab(⼤多数编辑器中可设置)
one
two
2、命名
1、class 必须单词全字母⼩写，单词间以 - 分隔
2、class 必须代表相应模块或部件的内容或功能，不得以样式信息进⾏命名
3、同⼀页⾯，应避免使⽤相同的 name 与 id。因为IE7-浏览器会混淆元素的 id 和 name 属性， ElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要⾮常⼩⼼
3、标签
1、标签名必须使⽤⼩写字母
2、对于⽆需⾃闭合的标签，不需要⾃闭合
3、对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签
4、HTML 标签的使⽤应该遵循标签的语义，且要符合标签嵌套规则
4、注释
采⽤类似标签闭合的写法，与HTML统⼀格式；注释⽂案两头空格，与CSS注释统⼀格式
开始注释：(⽂案两头空格)
结束注释：(⽂案前加“/”符号，类似标签的闭合)
5、属性
1、属性和值全部⼩写
2、属性值必须⽤双引号包围
3、布尔类型的属性，建议不添加属性值
4、⾃定义属性建议以 xxx- 为前缀，推荐使⽤ data-
5、可以省略style标签和script标签的type属性
html个人网页完整代码顺序
6、属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性
php工厂模式作用id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
特殊元素
img
1、禁⽌ img 的 src 取值为空，否则会导致部分浏览器重新加载⼀次当前页⾯
2、为图⽚添加 alt 属性，提⾼图⽚加载失败时的⽤户体验
3、避免为 img 添加不必要的 title 属性，多余的 title 影响看图体验，并且增加了页⾯尺⼨
4、为图⽚添加 width 和 height 属性，以避免页⾯抖动
5、有下载需求的图⽚采⽤ img 标签实现，⽆下载需求的图⽚采⽤ CSS 背景图实现
产品 logo、⽤户头像、⽤户产⽣的图⽚等有潜在下载需求的图⽚，以 img 形式实现，能⽅便⽤户下载
⽆下载需求的图⽚，⽐如：icon、背景、代码使⽤的图⽚等，尽可能采⽤ css 背景图实现
表单
1、有⽂本标题的控件使⽤ label 标签将其与其标题相关联。最好将控件置于 label 内，以减少不必要的 id
同意
2、使⽤ button 元素时必须指明 type 属性值。因为button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交
提交
取消
3、在针对移动设备开发的页⾯时，根据内容类型指定输⼊框的 type 属性，能获得友好的输⼊体验

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。