Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

网页重构的html规范 #2

Open
matthew-sun opened this issue Jan 2, 2015 · 0 comments
Open

网页重构的html规范 #2

matthew-sun opened this issue Jan 2, 2015 · 0 comments

Comments

@matthew-sun
Copy link
Owner

html代码规范：

html基础设施

  • 如我们所知不同的Doctype声明，将会触发浏览器不同的渲染模式，主要分为遵循W3C规范的标准模式和怪异模式。而因为html5的流行，我们不需要去管因为遗留下原因的不同dtd，主需要统一的在文件的顶格开始声明""。

  • 必须申明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码。

  • 根据页面内容和需求填写适当的keywords和description。

  • 页面title是极为重要的不可缺少的一项。

  • 对于兼容性的处理可以考虑使用IE注释法加上class锚点

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>页面标题</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" href="img/touchicon.png"/>
</head>
<body>

</body>
</html>

结构、表现、行为三者分离，避免内联

  • 使用link将css文件引入，并置于head中。

  • 使用script将js文件引入，并置于body底部。

    保持良好的简洁的树形结构

    1. 每一个块级元素都另起一行，每一行都使用Tab缩进对齐（head和body的子元素不需要缩进）。删除冗余的行尾的空格。
    2. 使用4个空格代替1个Tab（大多数编辑器中可设置）。
    3. 你也可以在大的模块之间用空行隔开，使模块更清晰。
    4. 模块首尾使用注释标示
    <body>
<!--S 侧栏内容区 -->
<div class="m-side">
    <div class="side">
        <div class="sidein">
            <!-- 热门标签 -->
            <div class="sideblk">
                <div class="m-hd3"><h3 class="tit">热门标签</h3> </div>
                ...
            </div>

            <!-- 最热TOP5 -->
            <div class="sideblk">
                <div class="m-hd3"><h3 class="tit">最热TOP5</h3> <a href="#" class="s-fc02 f-fr">更多»</a></div>
                ...
            </div>
        </div>
    </div>
</div>
<!--E 侧栏内容区 -->
</body>

另外，请做到以下几点

  • 结构上如果可以并列书写，就不要嵌套。

    如果可以写成<div></div><div></div>那么就不要写成<div><div></div></div>
  • 如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。

    比如<div><h2></h2></div>已经能满足要求，那么就不要再写成<div><div><h2></h2></div></div>
  • 一个标签上引用的className不要过多，越少越好。

    比如不要出现这种情况：<div class="class1 class2 class3 class4"></div>
  • 对于一个语义化的内部标签，应尽量避免使用className。

    比如在这样一个列表中，li标签中的itm应去除：<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>

严格的嵌套

  • 尽可能以最严格的xhtml strict标准来嵌套，比如内联元素不能包含块级元素等等。
  • 正确闭合标签且必须闭合。

严格的属性

  1. 属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号。
  2. 没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected等等）。
  3. 可以省略style标签和script标签的type属性。

内容类型决定使用的语义标签

  • 在网页中某种类型的内容必定需要某种特定的HTML标签来承载，也就是我们常常提到的根据你的内容语义化HTML结构。

加强“资源型”内容的可访问性和可用性

  • 在资源型的内容上加入描述文案，比如给img添加alt属性，在audio内加入文案和链接等等。

加强“不可见”内容的可访问性

  • 背景图上的文字应该同时写在html中，并使用css使其不可见，有利于搜索引擎抓取你的内容，也可以在css失效的情况下看到内容。

适当使用实体

  • 以实体代替与HTML语法相同的字符，避免浏览解析错误。
    常用HTML字符实体（建议使用实体）：
    字符名称实体名实体数
    "双引号&quot;&#34;
    &&符&amp;&#38;
    <左尖括号（小于号）&lt;&#60;
    >右尖括号（大于号）&gt;&#62;
     空格&nbsp;&#160;
    常用特殊字符实体（不建议使用实体）：
    字符名称实体名实体数
    ¥元&yen;&#165;
    ¦断竖线&brvbar;&#166;
    ©版权&copy;&#169;
    ®注册商标R&reg;&#174;
    ™商标TM&trade;&#8482;
    ·间隔符&middot;&#183;
    «左双尖括号&laquo;&#171;
    »右双尖括号&raquo;&#187;
    °度&deg;&#176;
    ×乘&times;&#215;
    ÷除&divide;&#247;
    ‰千分比&permil;&#8240;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@matthew-sun