文章目录
HTML代码规范
整理转载自：https://www.runoob.com/html/html5-syntax.html
使用正确的文档类型
<!DOCTYPE html>
规范大小写
虽然元素名可以使用大写和小写，但是推荐使用小写。
因为之前习惯了java的代码风格，不管是class名还是id名都很喜欢用大小驼峰式……
<section>
<p>这是一个段落。</p>
</section>
用斜杠关上元素！
有头就要有尾。
虽然一些标签可以不用关闭</ 标签> ，但是为了好的习惯还是关上吧。
而且关闭的时候别忘了斜杠！/
虽然html5支持没有斜杠的关闭方法，但是XML和XHTML不支持。
<meta charset="utf-8">
<meta charset="utf-8" />
给属性加上引号
HTML5的属性可以不用引号了，但是规范的代码是需要给属性加上引号的。
如：
<table class="table striped">
为图片加上alt属性
- 加入alt属性后，即便图片的链接失效了，也可以代替图片的显示。
比如这样：
如果链接失效了，就会变成这样：
- 为图片加入width和height属性，可以在加载的时候预留出空间，减少加载时的闪烁。
<img src="#" alt="这里是alt属性" style="width:128px;height:128px">
空格和等号
等号前后可以使用空格，但不推荐。
在Java中好看的代码格式是等号前后含有空格的，能使代码更清爽，但是html中不行。
不好解释！自己感受一下吧！
<link rel = "stylesheet" href = "styles.css">
<link rel="stylesheet" href="styles.css">
避免一行代码过长
每行控制在80个字符以内。因为横向滚动是很麻烦的。
空行
每个逻辑功能块之间可以加空行，比较短的代码间不需要加入空行。
如：
<body>
<h1>菜鸟教程</h1>
<h2>HTML</h2>
<p>
菜鸟教程，学的不仅是技术，更是梦想。
菜鸟教程，学的不仅是技术，更是梦想。
菜鸟教程，学的不仅是技术，更是梦想,
菜鸟教程，学的不仅是技术，更是梦想。
</p>
</body>
可以改成：
<body>
<h1>菜鸟教程</h1>
<h2></h2>
<p>菜鸟教程，学的不仅是技术，更是梦想。
菜鸟教程，学的不仅是技术，更是梦想。
菜鸟教程，学的不仅是技术，更是梦想。
菜鸟教程，学的不仅是技术，更是梦想。</p>
</body>
缩进
使用两个空格，而不是TAB缩进。
震惊！！！
而实际上HBuilder默认的缩进就是TAB
所以此条存疑！
<html>、<body>、<head>的省略
H5中可以省略<html>的标签，
在<head> </head> 后的body标签也可以不写。
但是依然不推荐。
顺便：markdown编辑器里的大于小于号依然可以使用< 与>替代。
要写title
如题。
样式表
样式表使用简洁的语法格式 ( type 属性不是必须的):
<link rel="stylesheet" href="styles.css">
短的规则可以写成一行:
p.into {font-family: Verdana; font-size: 16em;}
长的规则可以写成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
- 将左花括号与选择器放在同一行。
- 左花括号与选择器间添加一个空格。
- 使用两个空格来缩进。
- 冒号与属性值之间添加一个空格。
- 逗号和符号之后使用一个空格。
- 每个属性与值结尾都要使用分号。
- 只有属性值包含空格时才使用引号。
- 右花括号放在新的一行。
- 每行最多 80 个字符。
使用小写的文件名
如导入图片时，使用小写的文件名。
78
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
