html  规范

最新推荐文章于 2022-04-17 17:45:20 发布

原创最新推荐文章于 2022-04-17 17:45:20 发布 · 503 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #浏览器

概念（web）同时被 2 个专栏收录

26 篇文章

订阅专栏

开发规范

2 篇文章

订阅专栏

本文介绍了HTML5文档结构的最佳实践，包括文档类型声明、语言属性、兼容模式、字符编码等关键元素，并提供了针对不同浏览器的支持方案。

暂时先这么多，后面遇到再补充

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Page title</title>

    <link href="//cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <noscript>
        <style>
            body * { display:none; }
            .noscript { display:block; width: 50%; height: 20%; text-align: center; }
            .absolute-center {
              margin: auto;
              position: absolute;
              top: 0; left: 0; bottom: 0; right: 0;
            }
        </style> 
    </noscript>
  </head>
  <body>
    <noscript class="absolute-center noscript">你的浏览器不支持Javascript或关闭了Javascript，暂时无法浏览</noscript>
  </body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
    <meta content="telephone=no" name="format-detection" />
    <script type="text/javascript">
        var debounce = function(idle, action){
          var last
          return function(){
            var ctx = this, args = arguments
            clearTimeout(last)
            last = setTimeout(function(){
                action.apply(ctx, args)
            }, idle)
          }
        };

        (function() {
          // deicePixelRatio ：设备像素
          var scale = 1 / devicePixelRatio;
          //设置meta 压缩界面 模拟设备的高分辨率
            document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
          //debounce 为节流函数，自己实现。或者引入underscoure即可。
          var reSize = debounce(function() {
              var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
              //按照640像素下字体为100px的标准来，得到一个字体缩放比例值 6.4
              document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
          }, 50);
      window.onresize = reSize;
    })();
  </script>
    <title>Page title</title>
    <link href="//cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
    <noscript>
        <style>
            body * { display:none; }
            .noscript { display:block; width: 50%; height: 20%; text-align: center; }
            .absolute-center {
              margin: auto;
              position: absolute;
              top: 0; left: 0; bottom: 0; right: 0;
            }
        </style> 
    </noscript>
  </head>
  <body>
    <noscript class="absolute-center noscript">你的浏览器不支持Javascript或关闭了Javascript，暂时无法浏览</noscript>
  </body>
</html>

1 . HTML5 doctype
为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

2 . lang=”zh-CN”
强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。

<html lang="zh-CN">
  <!-- ... -->
</html>

3 . IE 兼容模式
IE 支持通过特定的标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。

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

4 . 字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。

<head>
  <meta charset="UTF-8">
</head>

5 . <noscript>元素
当浏览器不支持Javascript或者Javascript被禁用时，包含在中的元素才会显示出来，否则得话尽管页面中包含，但其中的内容并不会被显示。

<html> 
<head> 
<title></tilte>
<noscript>
    <!-- * display:none; -->
    <link href="aHaHaHaHaHaHaEvilLaugh.css" rel="stylesheet">
    or
    <style>
        * display:none;
    </style>
</noscript>
<script src="example.js" defer="defer" />
</head>
<body> 
<noscript> 
<p>本页面需要浏览器支持(启用)Javascript。</p> 
</noscript> 
</body> 
</html>

6 . 注释
无法识别<script>标签的浏览器会把标签的内容显示到页面上。
为了避免浏览器这样做，您应当在注释标签中隐藏脚本。老式的（无法识别 <script> 标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！

<script>
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>

7 . IE9一下，支持html5和media queries

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

8 . CDATA

在XHTML(XML)中，CData片段是文档中的一个特殊区域，这个区域中可以包含不需要解析的任意格式的文本内容。因此，在CData片段中就可以使用任意字符，而且不会导致语法错误。

<script> 
// <![CDATA[ 
function compare(a,b){ 
if(a<b){ 
alert(“A is less than B”) ; 
}else if(a>b){ 
alert(“A is greater than B”) ; 
}else { 
alert(“A is equal to B”) ; 
} 
} 
//]]> 
</script>

9 . 重置浏览器的默认样式

<link href="//cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">

应用的文章连接

http://www.jb51.net/article/35462.htm
http://codeguide.bootcss.com/