前端基础（十二）：HTML规范

程序员文章站 2022-06-22 20:02:55

HTML规范缩进使用soft tab（4个空格）；嵌套的节点应该缩进；在属性上，使用双引号，不要使用单引号；属性名全小写，用中划线做分隔符；不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可选的）；不要忽略可选的关闭标签，例：和。DOCTYPE 大写在 html 标签上加上 lang 属性字符编码通常指定为 ‘UTF-8’IE兼容模式引入CSS, JS 通常在引入CSS和JS时不需要指明 type属性顺序bo...

资源：前端开发规范

HTML

规范

缩进使用soft tab（4个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可选的）；
不要忽略可选的关闭标签，例：</li> 和 </body>。
DOCTYPE 大写
在 html 标签上加上 lang 属性
字符编码通常指定为 ‘UTF-8’
IE兼容模式
引入CSS, JS 通常在引入CSS和JS时不需要指明 type
属性顺序
boolean属性
量避免JS生成标签这种情况的出现
减少标签数量,减不必要的标签

<!DOCTYPE html>

<html lang="zh-cn">

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=Edge">

        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">

        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

        <title>Page title</title>

        <!-- External CSS -->
        <link rel="stylesheet" href="code_guide.css">

        <!-- External JS -->
        <script src="code_guide.js"></script>

    </head>

    <body>

        <img src="images/company_logo.png" alt="Company">

        <h1 class="hello-world">Hello, world!</h1>

        <input type="text" disabled>

        <select>
            <option value="1" selected>1</option>
        </select>

        <!-- In-document JS -->
        <script>
            // ...
        </script>

    </body>

</html>

属性顺序
- class是为高可复用组件设计的，所以应处在第一位；
- id更加具体且应该尽量少使用，所以将它放在第二位。
- class
- id
- name
- data-*
- src, for, type, href, value , max-length, max, min, pattern
- placeholder, title, alt
- aria-*, role
- required, readonly, disabled
IE兼容模式

语义化

结构性元素
- p 表示段落. 只能包含内联元素, 不能包含块级元素;
- li 本身无特殊含义, 可用于布局. 几乎可以包含任何元素;
- br 表示换行符;
- hr 表示水平分割线;
- h1 - h6 表示标题. 其中 h1 用于表示当前页面最重要的内容的标题;
- blockquote 表示引用, 可以包含多个段落. 请勿纯粹为了缩进而使用blockquote, 大部分浏览器默认将 blockquote 渲染为带有左右缩进;
- pre 表示一段格式化好的文本；
头部元素
- title 每个页面必须有且仅有一个 title 元素;
- base 可用场景：首页、频道等大部分链接都为新窗口打开的页面;
- link 用于引入 css 资源时, 可省去 media(默认为all) 和 type(默认为text/css) 属性;
- style type 默认为 text/css, 可以省去;
- script type 属性可以省去; 不赞成使用lang属性; 不要使用古老的<!– //–>这种hack脚本, 它用于阻止第一代浏览器(Netscape 1和Mosaic)将脚本显示成文字;
- noscript 在用户代理不支持 JavaScript 的情况下提供说明；
文本元素
- a 存在 href 属性时表示链接, 无 href 属性但有 name 属性表示锚点;
- em,strong em 表示句意强调, 加与不加会引起语义变化, 可用于表示不同的心情或语调;
- strong 表示重要性强调, 可用于局部或全局, strong强调的是重要性, 不会改变句意
- abbr 表示缩写;
- sub,sup 主要用于数学和化学公式, sup还可用于脚注;
- span 本身无特殊含义;
- ins,del 分别表示从文档中增加(插入)和删除；
媒体元素
- img 请勿将img元素作为定位布局的工具, 不要用他显示空白图片; 必要时给img元素增加alt属性;
- object 可以用来插入Flash;
列表元素
- dl 表示关联列表, dd是对dt的解释; dt和dd的对应关系比较随意：一个dt对应多个dd、多个dt对应一个dd、多个dt对应多个dd, 都合法; 可用于名词/单词解释、日程列表、站点目录;
- ul 表示无序列表;
- ol 表示有序列表, 可用于排行榜等;
- li 表示列表项, 必须是ul/ol的子元素;
表单
- 推荐使用 button 代替 input, 但必须声明 type
- 推荐使用 fieldset , legend 组织表单
- 表单元素的 name 不能设定为 action, enctype, method, novalidate, target, submit 会导致表单提交混乱
用 TODO 标示待办事项和正在开发的条目
- 
省略嵌入式资源协议头
- <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
- background: url(//www.google.com/images/example);
<img src="banner.jpg" alt="520即将到来，爱就大声说出来" />

按模块添加注释

<!-- 新闻列表模块 --> 
<div class="m-news g-mod">
    ...
</div> 
<!-- /新闻列表模块 --> 

<!-- 排行榜模块 --> 
<div class="m-topic g-mod">
    ...
</div> 
<!-- /排行榜模块 -->

标签缩进
- <div><h1>asdas</h1> <p>dff<em>asd</em>asda<span>sds</span>dasdasd</p> </div>

模块化

每个模块必须有一个模块名；
每个模块的基本组成部分应该一致；
模块的子节点类名需带上模块名（防止模块间嵌套时产生不必要的覆盖）；
孙辈节点无需再带模块名。

<section class="m-detail"> 
    <header class="m-detail-hd"> 
        <h1 class="title">模块标题</h1> 
    </header> 
    <div class="m-detail-bd"> 
        <p class="info">一些实际内容</p> 
    </div> 
    <footer class="m-detail-ft"> 
        <a href="#" class="more">更多</a> 
    </footer> 
</section>

模版

<!DOCTYPE html>
<html lang="zh-cmn-hans">

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable =no">
    <title>title不可缺少，控制在25个字、50个字节以内。“二级栏目 - 一级栏目 - 网站名称”。</title>
    <meta name="keywords" content="关键词,5个左右,单个8汉字以内">
    <meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！">
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico">
    <!--[if lt IE 9]> 
    <script>
        (function(){
            var e = "abbr, article, aside, audio, canvas, datalist, detail s, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
            var i = e.length;
            while(i--) { 
                document.createElement(e[i])
            }
        })() 
    </script> 
    <![endif]-->
    <link href="http://www.a.com/css/style.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/1.8.2/jquery.js"></script>
</head>

<body>
    <header>
        <!--头部-->
    </header>

    <div>
        <!--内容-->
    </div>

    <footer>
        <!--头部-->
    </footer>

    <!--End of Footer-->
    <script src="http://www.a.com/Lib/a.min.js"></script>

    <!--下方是cnzz统计代码，请在自己项目中干掉-->
    <script>
        var cnzz_protocol = ...
    </script>
</body>

</html>

本文地址：https://blog.csdn.net/weixin_43526371/article/details/107362005

前端基础（十二）：HTML规范

HTML

语义化

模版

前端html,css基础总结

Web前端基础(2):HTML(二)

前端基础之HTML

Web前端基础(1):HTML(一)

【前端知识体系】HTML基础知识强化总结

Web前端基础(3):HTML(三)

前端开发之基础知识-HTML（一）

前端基础一些关于html基本的介绍

Web前端基础怎么学？ JavaScript、html、css知识架构图

前端基础 - HTML

前端基础（十二）：HTML规范

HTML

语义化

模版

前端html,css基础总结

Web前端基础(2):HTML(二)

前端基础之HTML

Web前端基础(1):HTML(一)

【前端知识体系】HTML基础知识强化总结

Web前端基础(3):HTML(三)

前端开发之基础知识-HTML（一）

前端基础 一些关于html基本的介绍

Web前端基础怎么学？ JavaScript、html、css知识架构图

前端基础 - HTML

前端基础一些关于html基本的介绍