html5+CSS3的编码规范

HTML5+CSS3的编码规范是为了达到一份整洁、易读、易维护的代码目标而制定的。在此分享一份完整攻略：

HTML部分

1. 文档声明

<!DOCTYPE html>

统一使用HTML5的文档声明方式，且在html标签中不需要再写上版本信息，即：<html>而非<html lang="zh-cn">。

2. 缩进及排版

统一使用四个空格，而不是Tab键。

对于HTML自身标签，一般只写开始标签。

对于自闭合标签，不需要写/。

对于多重嵌套标签，需要在每一层进行缩进。

<div>
    <p>这是一段文字</p>
</div>

3. 标签及属性命名

标签名和属性名使用小写字母，多个单词均以短横线分隔。

<div class="container">
    <img src="image.jpg" alt="图片">
</div>

4. 引入CSS、JavaScript、Icon等

引入的CSS及JavaScript需要写在页面底部。

引用外部资源的时候，需要写入完整的URL。

对于自定义Icon等，建议使用SVG或字体图标等方式，而不是使用<img>标签。

<head>
    <link rel="stylesheet" href="normalize.css">
</head>
<body>
    <!-- 页面代码 -->
    <script src="script.js"></script>
</body>

5. 表单元素

对于表单元素，需要为每个元素添加for属性，结合label标签，提高用户体验。

对于单选、多选、下拉列表等需要使用<select>标签时，需要使用<option>标签来包裹每一个选项。

<form>
    <label for="username">用户名：</label><input type="text" id="username">
    <br>
    <label for="gender_male">性别：</label><input type="radio" name="gender" id="gender_male">男
    <label for="gender_female"><input type="radio" name="gender" id="gender_female">女</label>
    <br>
    <label for="area">地区：</label>
    <select id="area">
        <option value="1">北京</option>
        <option value="2">上海</option>
    </select>
</form>

CSS部分

1.文档类型及引入方式

同样要以text/css作为文档类型。

CSS文件需通过link标签引入，而不是使用@import方式。

引入时应使用相对路径，避免使用绝对路径。

<head>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

2. 使用ID、Class及命名规范

ID选择器建议只用于唯一元素的样式控制。

尽量使用Class选择器。

Class命名应该使用有意义的、表述性强的名称，命名要具有可读性，在单词之间使用连字符(如.page-title)。

3. 属性顺序及书写规范

建议按照以下顺序书写属性：

布局相关属性：display、position、top、right、bottom、left、float、clear、margin、padding、width、height；
背景相关属性：background、background-image、background-color、background-repeat、background-position；
字体相关属性：font-size、font-family、font-weight、line-height、text-align、text-indent、text-decoration；
边框相关属性：border、border-color、border-style、border-width；
填充相关属性：outline、box-shadow、text-shadow；
其他属性：color、list-style、transition等。

属性选择器中，属性名和属性值之间要加一个空格。

属性值使用双引号也可以使用单引号，但不建议使用无引号情况。

4. 注释规范

注释建议放在特定样式声明上方，而非在末尾。

每个注释行前需要使用两个星号(**)及一个空格分隔。

注释内容尽量简洁明了，要有可读性。

注释中不得出现敏感信息。

/* header */
header {
    margin: 0;
    padding: 0;
}

/* page wrapper */
.page-wrapper {
    display: block;
    width: 100%;
}

以上便是html5+CSS3代码规范的完整攻略，以下是两个代码示例：

示例1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1 class="logo">logo</h1>
            <ul class="nav">
                <li><a href="#">导航1</a></li>
                <li><a href="#">导航2</a></li>
                <li><a href="#">导航3</a></li>
            </ul>
        </div>
    </header>
</body>
</html>

/* Reset */
* {
    margin: 0;
    padding: 0;
}

/* Global */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    background: #f5f5f5;
    color: #222;
}
.container {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

/* Header */
header {
    background: #fff;
    border-bottom: 1px solid #dcdcdc;
    padding: 20px 0;
}
.logo {
    float: left;
    font-size: 2rem;
    margin-right: 20px;
}
.nav {
    float: right;
    list-style: none;
}
.nav li {
    float: left;
    margin-left: 30px;
}
.nav li a {
    color: #444;
    text-decoration: none;
}

示例2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1 class="page-title">新闻详情</h1>
        <div class="news-content">
            <div class="thumb">
                <img src="https://via.placeholder.com/320x180.png?text=图片" alt="图片">
            </div>
            <div class="desc">
                <p class="date">2022.09.20</p>
                <h2 class="news-title">标题</h2>
                <p class="news-abstract">简介简介简介简介简介简介简介简介</p>
                <p class="news-body">
                    正文正文正文正文正文正文正文
                    正文正文正文正文正文正文正文
                    正文正文正文正文正文正文正文
                </p>
            </div>
        </div>
    </div>
</body>
</html>

/* Global */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
}

/* Container */
.container {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

/* Page Title */
.page-title {
    margin: 20px 0;
}

/* News Content */
.thumb {
    float: left;
    margin-right: 20px;
}
.thumb img {
    display: block;
    width: 100%;
}
.desc {
    width: 680px;
    float: left;
}
.news-title {
    margin: 10px 0;
    font-size: 2rem;
}
.news-body {
    margin-top: 10px;
    line-height: 1.7;
}
.news-body p {
    margin-bottom: 10px;
}

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：html5+CSS3的编码规范 - Python技术站