• Html书写规范


    1、推荐使用html5的文档声明

    1. <!DOCTYPE HTML>

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

    1. <meta charset="utf-8">

    3、title 不可缺少,控制在25个字、50个字节以内。“二级栏目 - 一级栏目 - 网站名称”。

    4、keywords很重要,关键词,针对SEO。

    注意: 5个左右,单个8汉字以内;禁忌堆砌,与网站主题无关。

    5、description网站描述,字数尽量空制在80个汉字,160个字符以内

    6、采用栅格化处理,常用980栅格,1000栅格

    7、书写注释,方便程序开发嵌套。注释方式:

    开始注释:<!-- 注释 -->
    结束注释:<!-- /注释文案 -->
    允许只有开始注释

    注意: 浮动的地方不要加注释,可能导致布局错位或文字的BUG。

    8、img添加alt属性,增加可访问性。

    1. <img src="" alt="图片描述" title="图片描述">

    9、带有实体名称的 ASCII 实体或特殊字符要使用实体名。

    注意: 实体名称对大小写敏感。

    字符 名称 实体名
    ¥ 人民币符号:元 &yen;
    © 版权 &copy;
    ® 注册商标 &reg;
    商标TM &trade;
    · 间隔符号 &middot;
    " 双引号 &quot;
    & &符 &amp;
    < 左尖括号(小于号) &lt;
    > 右尖括号(大于号) &gt;
      半角空格 &nbsp;
    × 乘号 &times;
    ÷ 除号 &divide;

    10、标签一定要正确嵌套,标签一定要闭合。

    11、用div等标签布局;表格型数据,table首选。

    12、代码风格采用树形结构,提高可读性;避免冗余嵌套。

    13、模块之间必须保持独立,区块化布局,方便随意增删改,多人协作维护。

    下面给出html模版:

    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    7. <title>网站标题,控制在25个字、50个字节以内</title>
    8. <meta name="keywords" content="关键词,5个左右,单个8汉字以内">
    9. <meta name="description" content="网站描述,字数尽量空制在80个汉字,160个字符以内!">
    10. <!--[if lt IE 9]>
    11. <script type="text/javascript" src="plug/html5.js"></script>
    12. <![endif]-->
    13. <link href="templates/lfsp/css/lfsp.css" rel="stylesheet" type="text/css" />
    14. <link href="templates/lfsp/css/style.css" rel="stylesheet" type="text/css" /><!--自己的样式-->
    15. <!--[if IE 6]>
    16. <script type="text/javascript" src="plug/DD_belatedPNG_0.0.8a-min.js" ></script>
    17. <script>DD_belatedPNG.fix('.pngfix,.icon');</script>
    18. <![endif]-->
    19. </head>
    20. <body>
    21. <header>网站头部</header>
    22. <div>内容部分</div>
    23. <footer>页脚</footer>
    24. <script type="text/javascript" src="plug/jquery.min.js"></script>
    25. <script type="text/javascript" src="templates/lfsp/lfsp.js"></script>
    26. </body>
    27. </html>

    <参考:http://lfsp.btwlo.com/htmlStructure.html>

    没有人告诉你,生活会是这样:你工作无趣,你袋里没钱,你的爱情总是昙花一现;妈妈警告过你,会有这样的日子但她没有告诉你,世界将让你屈服。但是,别怕,有我在你身边,谁让我们是friends呢……
  • 相关阅读:
    vue -resource 文件提交提示process,或者拦截处理
    利用vue写一个复选框的组件
    webpack处理媒体文件(图片/视频和音频)
    函数——惰性函数
    函数——函数的节流与防抖
    函数——箭头函数&自执行函数(二)
    js重点——作用域——作用域分类及变量提升
    js重点——作用域——内部原理
    js之数据类型(对象类型——单体内置对象——JSON)
    js之数据类型(对象类型——单体内置对象——Math)
  • 原文地址:https://www.cnblogs.com/ChandlerVer5/p/html_guifan.html
Copyright © 2020-2023  润新知