zoukankan      html  css  js  c++  java
  • 标准的HTML代码

    标准的HTML代码指的是HTML代码符合W3C的最新标准。

    1、验证代码是否符合标准

    标准的页面的优点:

        标准的页面会保证浏览器正确地渲染;

        网页能更容易被搜索引擎搜寻,提高网站的搜索排名;

        提高网站的易用性;

        网页更好维护和扩展。

    验证页面代码最直接的方式是用W3C提供的一项免费的验证服务W3C  Validator。它提供三种验证方式:URL、文件上传、直接输入代码。

    推荐使用HTML Validator,它是一个Firefox浏览器的插件。

    2、标准的HTML页面结构

    一个基本的HTML文档结构就是:   

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

    <!DOCTYPE html>为文档类型声明(HTML5中),使得HTML文档能兼容标准格式。

    head部分包含文档的一些基本信息,如网站的编码格式、网站的标题、网站引用的样式和脚本等。

             网站的标题:是作为站点的名称和简短描述显示在浏览器的标题栏上的。

       <title>网站标题</title>

             如果引用JavaScript和CSS外部文件,则需要把外部文件的链接添加到head部分

        <link rel="stylesheet" type="text/css" href="my_style.css"/>
        <script type="text/javascript" src="my_script.js"></script>

            head部分还会包含一些必要的meta标签,是对HTML文档内容的描述,用来表明文档的编码、关键字、介绍、作者等信息。

         <meta charset="utf-8">
         <meta name="keywords" content="HTML,web">
         <meta name="description" content="一个展示HTML页面的例子">

    body部分则包含所有在浏览器上展示的内容,如文本、图片、表格、音视频等。

    一个稍微完善的页面:

    <!DOCTYPE html>
    <html>
        <head>
            <title>网站标题</title>
            <meta charset="utf-8">
            <meta name="keywords" content="HTML,web">
            <meta name="description" content="一个展示HTML页面的例子">
            <link rel="stylesheet" type="text/css" href="my_style.css">
            <script type="text/javascript" src="my_script.js"></script>
        </head>
        <body>
            <h1>Sample page</h1>
            <p>This is a <a href="demo.html">simple</a> page.</p>
            <!--  This is a comment  -->
        </body>
    </html>

    3、正确闭合HTML标签

        HTML中有一些元素是空元素,即不能包含任何内容,也称为自闭合标签。

        HTML中的所有自闭合标签:area、base、br、col、command、embed、hr、img、input、keygen、link、param、source、track、wbr。

        HTML多个版本的规范都规定了非自闭合标签必须有开始标签和结束标签,而自闭合标签没有闭合标签。

    <!-- 非自闭合标签必须有开始标签和结束标签 -->
    <a href="demo.html">simple</a>
    <!-- 自闭合标签必须没有结束标签 -->
    <img src="demo.png" alt="demo" />
    有关自闭合标签中是否应该添加符号“/”,在XHTML的规范中最严格,必须添加“/”来表明标签的结束。在HTML4.01的规范中不推荐在自闭合标签中添加“/”来表明标签的结束。
    在HTML5中是最宽松的,自闭合标签中添加“/”是可选的。
    4、停止使用不标准的标签和属性,简化HTML代码
    不推荐使用单纯设置样式的标签,如basefont、big、center、font等,应该通过CSS设置样式。
    不推荐在HTML标签中添加样式属性,应该通过CSS样式来实现。
    不推荐使用<blink>或<marquee>(闪动或滚动)。应该通过JavaScript代码来实现,可以使用jQuery Marquee插件。
    不推荐使用不具语义的标签,如<b>和<i>显示黑体字和斜体,使用更具有语义的<strong>和<em>。
    移除不常用的HTML标签,包括acronym、applet、dir等。
    5、样式与结构分离
    把CSS样式应用于HTML总共有4种方式:
    (1)在HTML页面中链接一个CSS文件,做到了样式与结构的分离。(最佳实践的方式,推荐使用)
    <link rel="stylesheet" type="text/css" href="my_style.css">
       (2)在HTML页面中内嵌CSS样式。(在某些场合有选择地灵活使用)
    <style type="text/css">
         body {
            margin: 0;
            padding: 0;
         }
    </style>

               (3)在HTML标签中添加内联CSS样式。(应避免在页面中直接使用)

    <span style="color: green; background: transparent">green</span>

                (4)在CSS样式文件中加载CSS样式文件。(在任何场合都应该避免使用)

    @import "my_style.css";
    @import url("my_style.css");
    6、添加JavaScript禁用的提示信息
    <noscript>标签是在当JavaScript被禁用或者不被支持时提供的一个代替方式,即<noscript>标签中的内容会在此时被浏览器解析。
    <script>
        //一些操作
    </script>
    
    <noscript>
        <p>浏览器不支持JavaScript</p>
    </noscript>
       <noscript>不够灵活,有时JavaScript不可用并不是因为脚本被禁用导致的。因此最好不要使用<noscript>标签。
    最佳的实践是:提示用户JavaScript已被禁用,并同时提供一个功能简单、不依赖于JavaScript的代替网站供用户继续浏览,做到平稳降级。
    7、添加必要的<meta>标签
    <meta>标签中基本上包含网站的一些描述信息,如简介、作者等。
    <meta>元素有4个属性:name、http-equiv、content和charset。
    <meta>可以分为三类:
    (1)name属性和content属性的组合,构成名/值对,用于描述网站的信息。标准的<meta>名称包括:application-name、author、description、generator等。
        <!-- 页面关键字 -->
        <meta name="keywords" content="HTML,web">
       (2)http-equiv属性和content属性的组合。设置特定的HTTP指令。
    在HTML5的规范中,指令型meta总共有5种,其中content-type、default-style、refresh已经确定,content-language和set-cookie还未正式确定。
        <!-- 页面加载5分钟后刷新 -->
        <meta http-equiv="refresh" content="300">

                (3)charset属性,设置页面字符编码。提供了一种保存和传输文档的编码格式。

        <!-- 声明文档为UTF-8格式 -->
        <meta charset="utf-8">

                 为了让浏览器能准确识别编码格式,务必在<title>标签之间设置charset,保证标题能正确显示。

                 

                 W3C规范中允许自定义meta类型,但为了防止自定义的meta名称重复,所有的自定义meta应该事先注册。

  • 相关阅读:
    使用Fiddler捕获Java程序中的HTTP请求
    js解析json对象和json字符串
    写代码 在与思考
    sql 逻辑读取次数
    WbeAPI 学习笔记
    大话设计模式阅读笔记
    行转列
    sql server 的多表查询(left join )
    union 和union all比较
    sql 跨库和域插入数据库
  • 原文地址:https://www.cnblogs.com/209yin/p/7653320.html
Copyright © 2011-2022 走看看