HTML5正确用法：此代码是否正确？

时间：2011-07-10 18:34:53

标签： html5

我正在开展一个涉及将HTML代码转换为HTML5的项目，我想要一些关于我是否正确编码的反馈。

这是我的精简代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title Goes Here</title>
<!--[if IE 9]>
<script src="/jsp/fileFolderPath/js/html5shiv.js"></script>
<![endif]-->

<link rel="stylesheet" href="/jsp/fileFolderPath/css/global.css">

<!--[if IE 7]> <body class="ie7"> <![endif]-->
<!--[if IE 8]> <body class="ie8"> <![endif]-->

<script src="/jsp/fileFolderPath/js/jquery-1.4.2.min.js"></script>
<script src="/jsp/fileFolderPath/js/jquery.colorbox-min.js"></script>
<script src="/jsp/fileFolderPath/js/tip.js"></script>
<script src="/jsp/fileFolderPath/js/jquery.calendar.js"></script>

<script src="/jsp/fileFolderPath/js/modernizer-2.0.6.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#whatsthis').mouseover(function(){
        tooltip.show('Tooltip text goes here');
    }).mouseout(function(){
        tooltip.hide();
    });

    $('#printthis').mouseover(function(){
        tooltip.show('&lt;strong&gt;Print&lt;/strong&gt;');
    }).mouseout(function(){
        tooltip.hide();
    }).click(function(){
        printCalendar();
    });
});
</script>

</head>
<body>

    <!-- container start --> 
    <div id="container">

        <!-- header start --> 
        <header>
            <figure>
                <img src="headerImg.png" width="600" height="100" alt="header image">
            </figure>
            <div class="clear">&nbsp;</div>
            <nav>
                <!-- header code goes here - this is actually an include file -->
            </nav>
        </header>       
        <!-- header end -->

        <nav>
            <!-- primary navigation start -->
            <div class="clear">&nbsp;</div>
            test
            <!-- primary navigation end -->
        </nav>

        <!-- Application Name start -->
        <div id="applicationName">mySchedule <a href="#" id="whatsthis"><img src="images/what-this.png" width="21" height="21" alt=""></a>
            <!-- breadcrumbs start --> 
            <nav>
                <div id="breadcrumbs">
                    <ul>
                        <li><a href="#MyConnections">Home</a></li>
                        <li>&rarr;</li>
                        <li><a href="#Exhibitors">mySchedule</a></li>
                    </ul>
                </div>
            </nav>
            <!-- breadcrumbs end --> 
        </div>
        <!-- Application Name end -->

        <!-- Features Toolbar start -->
        <div id="features" class="right">
            <div class="featuresAddOn"> <a href="#" id="printthis">Print mySchedule</a></div>
        </div>
        <!-- Features Toolbar end -->

        <div class="clear">&nbsp;</div> 

        <!-- Left Side Bar start -->
        <div class="left">
            <nav>
                <!-- Application Navigation start -->
                <div id="appMenuContainer">
                    <div class="appMenu">
                        <h4 class="firstitem"><a href="/jsp/Myclients/Myclients.jsp?action=ClientMyMatchTab">Client Matching</a></h4>
                    </div>
                    <div class="appMenu">
                        <h4 id="MyClient" class="menuitem header"><span><a href="/jsp/Myclients/Myclients.jsp">MyClients</a></span></h4>
                    </div>
                    <div class="appMenu">
                        <h4 id="MySched" class="menuitem header"> <span><a style ="cursor:default">MySchedule</a></span></h4>
                    </div>
                    <div class="appMenu">
                        <h4 id="MyHel" class="menuitem lastitem"> <span><a href="/jsp/Myclients/help.jsp">Help</a></span></h4>
                    </div>
                </div>
                <!-- Application Navigation end -->
            <nav>

            <!-- Alert Box start -->
            <aside>
                <div id="AlertBox" class="margin-bottom margin-top">
                    <div class="title">Alert</div>
                    <div class="contentAlert lastItem"> You have <span class="count New_Time">0</span> New Time Proposed Notifications. </div>
                </div>
            </aside>
            <!-- Alert Box ends -->
        </div>
        <!-- Left Side Bar end -->

        <section>
            <!-- Content -->
            <div id="calendar"></div>
        </section>

        <div class="clear">&nbsp;</div>

    </div>
    <!-- container end --> 

    <footer>
        © MyCompany, Inc. 2011
    </footer>

</body>
</html>

  • 项目的要求之一 是网站使用HTML5，和 支持IE7，IE8和IE9。这是 为什么我要使用条件 样式表。 根据指定的要求，这是正确的方法吗？

    html位于jsp页面上 包含很多动态代码。我做到了 不包括在示例中。

    我有3个导航区 - 一个在 标题，仪表板（下面 顶部标题）和侧面 导航。 这些是否需要ID？

    侧面导航与 面包屑 - 也应该如此 面包屑被包裹在导航中 标签吗

    这是几页中的一页。该 显示所有页面上的内容 在div id =“calendar”标签内。 这是动态替换的 取决于客户。此页面看起来像日历/日程表，客户可以为其设置约会。其他页面看起来像表格列表/购物车或表格。除了更新 HTML5的标签，几乎所有 内容是使用div构建的，所以我 打算离开他们。我认为 他们都应该被包围 部分标签虽然。 根据此说明，在此处使用section标签是否合适？

    我把警报箱包在下面 左侧导航在旁边 标签。警报框内容是 与日历内容相关 - 如果在日历上设置了约会，它会提醒客户 - 但是 如果它站起来就没有意义 它自己的。 这是正确的吗？

顺便说一下，我是一个参与这个项目的网站开发承包商。所以我基本上都在更新现有的代码。

我已经浏览过其他帖子，其他在线参考资料和几本书。我想我走在正确的轨道上。在向前推进之前，我想要一些确认。

感谢。

斯蒂芬

更新：好的。我根据所有建议对上面的代码进行了更新，并通过验证器（成功）运行。

我仍然不确定三件事：

  1. 如果我理解正确HTML5Shiv是一种解决方法，可以在旧版本的IE中启用HTML5元素。 Modernizr做了类似的事情并处理HTML5元素和CSS3。我不确定这对于IE7和IE8的备用样式表是否有帮助。这些是显示/设计问题，所以我相信我需要继续引用它们，直到更新使用这些类的代码。它们与CSS3规范无关。

  2. Saeed提到使用数字标签。不得不看那一个。我正在使用的第一个图像是标题徽标，它位于所有页面上。所以，听起来这个标签适用于标题徽标。或者，我不会将它用于帮助链接（what-this.png），这只是一个问号图标。 正确吗

  3. 关于页眉和页脚，我将div放在标签内的原因是因为附加了样式。自从我删除它们之后，我现在将样式添加到页眉和页脚标记中。 这是正确的方法吗？如果没有，样式在哪里？

    4. 感谢。

4 个答案:

答案 0 :(得分：2)

以下是建议清单：

  1. 请勿在{{1​​}}内使用<div id='header' />，因为它会破坏语义的目的
  2. 最好使用库来查询当前浏览器的功能（我强烈推荐Modernizr）。
  3. 使用HTML5Shiv（Google it）让IE8了解HTML5元素（这是一个黑客攻击）
  4. 将<header>标记放在<img>标记内。
  5. 用户<figure>，只要您有链接列表。这是导航元素的目的。
  6. 使用DOM事件的第2级（例如使用jQuery或<nav>代替addEventListener属性）

答案 1 :(得分：0)

一个很好的起点是HTML5 Boilerplate代码

答案 2 :(得分：0)

  • 没用，你有标题
  • 你需要一个html5shiv或类似的东西来在旧的IE或现代化器中设计它
  • 单独的stayle和标记（将最后一个对齐放在CSS中）

http://validator.w3.org/check，您可以在那里选择HTML5进行验证

还查看HTML5样板

答案 3 :(得分：0)

此

<head>
...

<!--[if IE 7]> <body class="ie7"> <![endif]-->
<!--[if IE 8]> <body class="ie8"> <![endif]-->
<!--[if IE 9]> <body class="ie9"> <![endif]-->

...
</head>
<body>
...

看起来很虚伪。虽然它被非IE浏览器忽略，但对于那里给出的IE版本，你最终在head元素中有一个body元素的开始标记，这肯定是无效的。 我认为这样的事情会更好：

<head>
...
</head>
<!--[if true]>
<![if IE 7]> <body class="ie7"> <![endif]>
<![if IE 8]> <body class="ie8"> <![endif]>
<![if IE 9]> <body class="ie9"> <![endif]>
<![if (!IE)|(lt IE 7)|(gt IE 9)]> <body> <![endif]>
<![endif]-->
<![if false]> <body> <![endif]>

（但我不确定最后一行中的<!...>非评论是否实际上是有效的HTML。）

相关问题
最新问题