html5 js框架 html5基础框架

一、简介

HTML5 是一种专门用于组织 Web 内容的语言。它通过创建一种标准化的、直观的 UI 标记语言简化 Web 设计和开发。HTML5 提供了解析和划分页面的方法，它允许创建各种独立的组件来按照逻辑组织站点，同时还为站点提供联合功能。HTML5 可以称作 “面向站点设计的信息映射方法”，因为它融入了信息映射、信息划分和消息标签等基本内容，使信息变得易于使用和理解，这构成了 HTML5 的生动语义和审美工具的基础。HTML5 使具备不同能力的设计师和开发人员能够发布从简单文本到丰富的交互式多媒体等各种内容。

HTML5 提供了有效的数据管理、绘图、视频和音频工具。它简化了面向 Web 和便携式设备的跨浏览器应用程序的开发。HTML5 是推动移动云计算服务的技术之一，因为它可以实现更高程度的灵活性，可以开发出激动人心的交互式网站。它还引入了新的标记和增强，包括一个优雅的结构、表单控件、API、多媒体、数据库支持，并极大地加快了处理速度。

HTML5 中的新标记更能让人产生共鸣，封装了它们的角色和用法。以前的 HTML 版本使用的标记不容易进行区分。然而，HTML5 提供了高度描述的、直观的标签。它提供了丰富的内容便签，可以立即识别出内容。例如，<div>标记现在补充了 <section>和 <article>标记。此外，还增加了 <video>、<audio>、<canvas>和 <figure>标记，可以更准确地描述内容的具体类型。

HTML5 实现了以下功能：

• 提供了可以准确描述所包含的内容的标记
• 增强的网络通信
• 显著改善了一般存储
• 用于运行后台流程的 Web Worker
• 在应用程序和服务器之间建立持久连接的 WebSocket 接口
• 更好地检索存储的数据
• 改善了网页保存和载入速度
• 支持 CSS3 管理 GUI，意味着 HTML5 具备面向内容的特性
• 改善了浏览器的表单处理
• 一个基于 SQL 的数据库 API，允许客户端本地存储
• 画布和视频，无需安装第三方插件即可添加图形和视频
• Geolocation API 规范，使用智能手机位置功能来合并移动云服务和应用程序
• 智能表单减少了下载 JavaScript 代码的需求，在移动设备和云服务器之间实现了更有效的通信

HTML5 创建了更加吸引人的用户体验：使用 HTML5 设计的页面可以提供与桌面应用程序类似的体验。HTML5 还将 API 功能和浏览器结合在一起，提供了增强的多平台开发。通过使用 HTML5，开发人员可以提供在不同平台之间切换的现代应用程序体验。

HTML5 实际上是一系列创新的代表。HTML5 提供了新的标记、新的方法，并通过与 CSS3 和 JavaScript 的相互作用形成了一个通用的开发框架。这是以客户端为中心的应用程序处理的核心。除了将 HTML5 技术的技巧和方法部署到桌面外，还可以在特性丰富的 Web 移动手机浏览器中实现 HTML5 —随着 Apple iPhone、Google Android 的手机的流行和普及，这注定是一个不断增长的市场。

HTML5 的一个关键功能就是信息映射 —或内容阻塞 —可以生成更加容易理解的流程。随着 HTML5 在 Web 处理方面的地位越来越重要，将看到它在设计和开发方面是多么地高效。

HTML5 标志着更有效的文本级别的语义流程，以及对表单构建和使用的更高级别的控制。所有这些特性和 HTML5 创新的许多其他优点是使它成为主要范式的根本原因。许多商业的或其他代理组织（即使这些组织其中很多的主要代理行为并不是信息处理和通信）都或多或少地反映到了这种日益增长的模式开发中。

HTML5 的成功并不是出于偶然。相反，它的技术和方法才是它取得成功的后盾。

二、页面规划

您将创建一个简单的 Web 页面。在这个过程中，我将讨论 HTML5 中引入的几个新标记。要创建一个有效的、高效的 Web 页面，必须对页面进行规划，考虑到需要创建的所有的组件。

创建的页面将采用如图 1 所示的高级设计。页面设计包含一个 Header 区、一个 Navigation 区、一个 Article 区（包含三个部分）、一个 Aside 区和一个 Footer 区。该页面将用于 Google Chrome 浏览器，消除了一些会引起感官混乱的内容，这些内容会引起浏览器兼容性问题，并且不利于理解页面基本结构。这种结构的目的是清楚地展示新的 HTML5 标记的用法，展示如何使用它们创建构造良好的代码和优雅的页面设计。

图1 h5页面规划

 

在创建页面的过程中，使用了 CSS3，需要用 CSS3 正确地呈现 HTML5 页面。CSS3 是实现 HTML5 页面样式、导航和整体感官的重要工具。它的属性组包括一些有用的元素，如背景、字体、选框和动画效果。

在开始构建页面前，需要了解一些有关新的 HTML5 标记的知识。

二、Header 区

Header 区包含页面标题和副标题。使用 <header>标记创建页面的 Header区的内容。<header>标记可以包含有关 <section>和 <article>的信息以及 Web 页面本身。这里的 Web 页面包含页面的 Header区以及 Article 和 Section 区的 Header区，如图 1 所示。清单 1 提供了一个 <header> 标记示例。

清单 1.<header>标记示例：

<header> 
    <h1>标题文字</h1> 
    <p> 文字或图片可以包含在此处 </p> 
    <p> Logo也经常放在这里</p> 
</header>

标记<header>还可以包含 <hgroup>标记，如清单 2 所示。<hgroup>标记使用从 <h1>到 <h6>的标题级别对标题进行了分组，其中包含主标题和子标题。

清单 2. <hgroup> 标记示例：

<header> 
    <hgroup> 
        <h1>主标题</h1> 
        <h2>副标题 </h2> 
    </hgroup> 
    <p> 文字或图片可以包含在此处</p> 
</header>

三、Navigation 导航区

可以使用 <nav>标记创建页面的 Navigation 导航区。<nav>元素专门为导航功能定义了一个区域。 <nav>标记应当用于主站点的导航，而不是用于包含页面其他区域的链接。Navigation 区可以包含如清单 3 所示的代码。

清单 3. <nav> 标记示例：

<nav> 
     <ul> 
         <li><a href="#">首页</a></li> 
         <li><a href="#">关于我们</a></li> 
         <li><a href="#">产品</a></li> 
         <li><a href="#">联系我们</a></li> 
     </ul> 
</nav>

 

四、Article 和 Section 区

您设计的页面还包含 Article 区，其中包含页面的实际内容。将使用 <article>标记来创建这个区域，该标记定义可独立于其他页面内容使用的内容。例如，如果想要创建一个 RSS 提要，可以使用 <article>来唯一地识别内容。<article>标记识别可以移除并放到另一个上下文的内容，并且非常易于理解。

first.html 页面规划中的 Article 区包含了三个 Section 区。将使用 <section>标记创建这些区。<section>包含 Web 内容的相关的组件区。<section> 标记 —以及 <article>标记 —可以包含标题、页脚或任何其他必要的组件。<section>标记用于对内容分组。<section>标记和 <article>标记的内容通常以 <header>开头，以 <footer>结尾，中间为标记的内容。

<section>标记还可以包含 <article>标记，正如 <article>标记可以包含 <section>标记一样。<section>应用于将类似的信息划分成组，而 <article>标记应用于文章或博客等可以删除并放到新上下文且不影响内容含义的信息。顾名思义，<article>提供了完整的信息判断，而 <section>标记包含了相关的信息，但是这些信息不能放到不同的上下文中，否则信息的含义就会丢失。 清单 4 显示了 <article> 和 <section>标记的用法示例。

清单 4. <article> 标记和 <section> 标记示例:

<article> 
    <section> 
        内容
    </section> 
    <section> 
        内容
   </section> 
</article> 
<section> 
    <article> 
        内容
    </article> 
    <article> 
        内容 
    </article> 
 </section>

图像元素

<section>和 <article>标记以及 <header>和 <footer>标记可以包含 <figure>标记。可以使用该标记包含图像、图表和照片。

<figure>标记可以包含 <figcaption>，后者包含 <figure>标记中的图形的说明文字，允许您输入一段描述来将图形与内容更紧密地联系在一起。清单 5 提供了 <figure>和 <figcaption>标记结构的示例。

清单 5. <figure> 标记和 <figcaption> 标记示例 :

<figure> 
     <img src="/figure.jpg" width="304" height="228" alt="Picture"> 
     <figcaption>图的标题</figcaption> 
 </figure>

 

媒体元素

<section>和 <article>标记还可以包含各种媒体元素。HTML5 提供了可以快速传达内容含义的方式。媒体元素，例如以前嵌入到页面中的音乐和视频，现在可以更加准确地识别出来。

<audio>标记识别声音内容，例如音乐或任何其他的音频流。<audio>标记的属性控制播放音频的时间、方式以及内容。这些属性是 src、preload、control、loop和 autoplay。在清单 6 的示例中，将在页面加载完毕后立即播放音频，并将为用户提供控件来停止或重新播放音频。

清单 6. <audio> 标记示例

<audio src="MyFirstMusic.ogg" controls autoplay loop"> 
     您的浏览器不支持音频标签。
</audio>

<video>标记允许您广播视频片段或可视流媒体。它除了具备 <audio>标记的所有属性外，还包含另外三个属性：poster、width和 height。poster属性使您能够在加载视频时或根本不能加载视频时识别要使用的图像。 清单 7 提供了 <video>标记结构的示例。

清单 7. <video> 标记示例

<video src="MyFirstMovie.ogg" controls="controls"> 
     您的浏览器不支持视频标签。
</video>

<video>和 <audio>标记可以包含 <Source>标记，后者为 <video>和 <audio> 标记定义了多媒体资源。您可以使用该元素指定其他的视频和音频文件，浏览器就可以根据它的媒体类型或编码支持进行选择。在清单 8 中，提供了两种选择。如果文件的 WMA 版本无法在当前使用的浏览器中播放，那么就可以尝试使用 MP3 版本。否者，显示一条消息，通知客户音频不可用的原因。

清单 8. <source> 标记示例

<audio> 
     <source src="/music/good_enough.wma" type="audio/x-ms-wma"> 
     <source src="/music/good_enough.mp3" type="audio/mpeg"> 
     <p>您的浏览器不支持HTML“音频”元素。</p> 
</audio>

<embed>标记定义了可以嵌入到页面中的内容。例如，Adobe Flash SWF 文件的插件。清单 9 包含 type属性，该属性将嵌入的源识别为 Flash 文件。

清单 9. <embed> 标记示例

<embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />

除了 src和 type属性外，<embed>标记还包含 height 和 width属性。

五、Aside 区

在 first.html页面规划中，使用 <aside>标记创建 Aside 区。该标记的作用是容纳一些补充性内容，这些内容不属于文章的一部分。在杂志中，Aside 通常用于介绍有关文章本身的一些信息。<aside>标记包含的内容可以被移除而不会影响文章或文章所在的区段或页面所传达的信息。 清单 10 提供了 <aside>标记的使用示例。

清单 10. <aside> 标记示例

<p>去年，我和我的家人参观了上海迪斯尼乐园。</p> 
<aside> 
     <h4>迪士尼在中国</h4> 
     <p>除了上海迪斯尼乐园，香港还有迪斯尼乐园。</p> 
</aside>

六、Footer 区

<footer>元素包含有关页面、文章或区段的信息，比如文章的作者或发表日期。文章的页脚可能包含版权或其他重要的法律消息，如清单 11 所示。

清单 11. <footer> 标记示例

<footer> 
     <p>© 2020 ischoolcode.cn 爱校码.中国 版权所有</p> 
</footer>

七、构造页面

现在，已经了解了创建一个 HTML5 页面所需的基本标记，接下来开始构造页面。图 2 显示了构建后的页面。

图2 Web页面 

现在，开始构建页面。首先，关注一下 <!doctype>。在 HTML5 中，对 <!doctype>进行了简化：您只需要记住 html即可。这不仅简化了标记的输入，而且该标记在以后也不需要进行修改。注意，它不是 html5，而是 html。不管 HTML 以后会有多少个版本，<!doctype>只能是 html。

<html>标记包含除 <!doctype>以外的所有其他 HTML 元素。所有这些元素都应当被嵌套到 <html>和 </html>标记之间。参见清单 12。

清单 12. <!doctype> 标记示例

<!doctype html> 
<html lang="en">

表明文档类型为 html和使用语言为英语后，将要使用 <head>元素。该元素将包含脚本、浏览器支持信息、样式表链接、元信息和其他初始化功能。可以在 head部分中使用以下标记：

• <base>
• <link>
• <meta>
• <script>
• <style>
• <title>

<title>标记用于包含文档的实际标题，是 <head>中必须包含的元素。您将在浏览页面时在浏览器的顶部看到该标记包含的标题。清单 13 中的 <link>标记识别将用于呈现 HTML5 页面的 CSS3 样式表。调用的样式表为 my.css。

清单 13. <head> 标记示例

<head> 
    <title>HTML5基础示例</title> 
    <link rel="stylesheet" href="my.css"  />
</head>

接下来将使用 <body>标记，之后是 <header>和 <hgroup> 标记，这些标记已经在前面进行了介绍。本例中的 <h1>区包含机构的名字，即 “爱校码”，而 <h2>区包含的信息表明副标题为 “一个简单的 HTML5 示例”。清单 14 显示了标记

清单 14. <body> 标记和 <header> 标记示例

<body> 
    <header> 
         <hgroup> 
              <h1>爱校码</h1> 
              <h2>一个简单的HTML5示例</h2> 
         </hgroup> 
    </header>

清单 15 显示了目前为止构建页面所使用的 CSS3。首先，为页面定义字体，然后定义正文的细节。在定义正文的大小后，为一级和二级标题标记设计标题段落结构。这些都是将在页面中使用的标题。

清单 15. CSS3 示例1:

* { 
    font-family: Lucida Sans, Arial, Helvetica, sans-serif; 
}

body { 
    width: 800px; 
    margin: 0em auto; 
}

header h1 { 
    font-size: 50px; 
    margin: 0px; 
    color: #006; 
}

header h2 { 
   font-size: 15px; 
    margin: 0px; 
    color: #99f; 
    font-style: italic; 
}

清单 16 展示了 <nav> 标记，该标记将用于处理主站点的导航。

清单 16. <nav> 示例

<nav> 
    <ul> 
         <li><a href="#">首页</a></li> 
         <li><a href="#">关于我们</a></li> 
         <li><a href="#">联系我们</a></li> 
    </ul> 
</nav>

HTML5 还包含一个 <menu> 标记 —该标记一度令一些设计师和开发人员感到困惑。这是因为导航功能常常被称为 “导航菜单”。HTML 版本 4.01 不赞成使用 <menu> 标记，但是 HTML5 重新启用了该标记并使用它增强交互性。它不应当用于实现主导航。唯一用于实现主导航的标记应当为 <nav> 标记。您将在本示例后面的部分使用 <menu> 标记。

导航的格式由 CSS3 实现。清单 17 中显示的每个 <nav> 标记的定义都表示 <nav> 标记内部的 <ul> 和 <li> 元素的特定状态。

清单 17. CSS3 示例2：

nav ul { 
    list-style: none; 
    padding: 0px; 
    display: block; 
    clear: right; 
    background-color: #99f; 
    padding-left: 4px; 
    height: 24px; 
} 
nav ul li { 
    display: inline; 
    padding: 0px 20px 5px 10px; 
    height: 24px; 
    border-right: 1px solid #ccc; 
} 
nav ul li a { 
    color: #006; 
    text-decoration: none; 
    font-size: 13px; 
    font-weight: bold; 
} 
nav ul li a:hover { 
    color: #fff; 
}

接下来是 Article 区。这个区由 <article>标记定义，包含其自己的 <header>信息。<article>中的 <section>也包含它自己的 <header>标记。参见清单 18。

清单 18. <article> 和 <section> 示例

<article> 
    <header> 
         <h1> 
              <a href="#" title="Link to this post" rel="bookmark">文章标题</a> 
         </h1> 
    </header> 
    <p> 首先，正在做好准备对生命没有危害。。。 </p> 
    <section> 
         <header> 
              <h1>这是第一节标题</h1> 
         </header> 
         <p>科学施策，防控疫情。。。</p>
    </section>

清单 19 显示了呈现页面格式的 CSS3 标记。注意，paragraph、header和 section区的定义都是针对它们所在的 <article>标记定义的。这里定义的 <h1>标记使用了与为页面级 <h1>标记定义的 <h1>标记不同的格式。

清单 19. CSS3 示例3:

article > header h1 { 
    font-size: 40px; 
    float: left; 
    margin-left: 14px; 
}

article > header h1 a { 
    color: #000090; 
    text-decoration: none; 
}

article > section header h1 { 
    font-size: 20px; 
    margin-left: 25px; 
}

article p { 
    clear: both; 
    margin-top: 0px; 
    margin-left: 50px; 
}

<article>中包含的第二个 <section>标记包含与第一个 <section>相同的基本信息，但是这一次将使用 <aside>、<figure>、<menu>以及 <mark>标记。参见清单 20。

<aside>标记在这里用于显示不属于文本流部分的信息。<figure> 标记包含一个 '美丽女神' 图形。这个 <section> 还包含 <menu>标记，您可以用来创建带有四个 ‘缪斯女神’ 名字的按钮。当单击其中一个按钮时，它将提供有关特定 ‘缪斯女神’ 的信息。<mark>标记在 <p>标记的内部使用，用于突出显示 ‘我来、我见、我征服’。

清单 20. <article> 和 <section> 示例

<section> 
    <header> 
         <h1>第二节带有标记，边区，菜单 & 图</h1> 
    </header> 
    <p class="next-to-aside">罗马帝国皇帝凯撒向您致敬。<mark>我来、我见、我征服</mark>。母亲总是. . . .</p> 
    <aside> 
         <p>这是一个预留有多个行的‘边区’. . . .</p> 
    </aside> 
    <menu label="File"> 
         <button type="button" onClick="JavaScript:alert('克里奥 . . .')">克里奥</button> 
         <button type="button" onClick="JavaScript:alert('塔利亚 . . .')">塔利亚</button> 
         <button type="button" onClick="JavaScript:alert 
                                  ('乌拉尼亚 . . .')">乌拉尼亚</button> 
         <button type="button" onClick="JavaScript:alert 
                                  ('卡利俄珀 . . .')">卡利俄珀</button> 
    </menu> 
    <figure><img src="img/headpic.jpeg" alt="美丽女神的照片" width="200" /> 
         <figcaption>图 1. 美丽女神</figcaption> 
    </figure> 
</section>

本部分的 CSS3 包含了 <p>标记的新定义，该标记的宽度要比页面的宽度小一些。这种改变允许将旁白显示在右侧，而不会与文本相互重叠。清单 21 显示了标记。

清单 21. CSS3 示例4：

article p.next-to-aside { 
     width: 500px; 
}

article >  section figure { 
    margin-left: 180px; 
    margin-bottom: 30px; 
}

article > section > menu {  
 margin-left: 120px; 
}

aside p {  
       position:relative; 
       left:0px; 
       top: -100px; 
   z-index: 1; 
       width: 200px;  
       float: right; 
   font-style: italic; 
       color: #99f; 
}

视频部分元素

<article>的最后一部分是 video。示例视频是 ogg 格式，将在页面加载的同时自动地连续循环播放，同时为用户提供了暂停和播放控件。在许多新的实例中，ogg 视频采用扩展名 ogv（v表示视频），如清单 22 所示。<audio>标记的工作原理与此相同。

清单 22. <article> 和 <section> 示例

<section> 
         <header> 
              <h1>这是一个视频部分</h1> 
         </header> 
         <p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" 
                               controls autoplay loop> 
               <div class="no-html5-video">
                   <p>该视频只能在Mozilla Firefox或Google Chrome中使用。 </p> 
               </div> 
         </video></p> 
    </section> 
</article>

清单 23 显示了 video部分的 CSS3 定义。

清单 23. CSS3 示例5：

article > section video { 
    height: 200px; 
    margin-left: 180px; 
}

article > section div.no-html5-video{ 
    height: 20px; 
    text-align: center; 
    color: #000090; 
    font-size: 13px; 
    font-style: italic; 
    font-weight: bold ; 
    background-color: #99f; 
}

 

页面的页脚和结束部分如清单 24 所示。

清单 24. <footer> 标记示例

<footer> 
             <p>你好，欢迎来到我的博文</p> 
         </footer> 
    </body> 
</html>

 

八、结束语

随着 Web 页面的完成，第 1 部分也就此结束。本文的目标是体验HTML5。HTML5 不仅仅是对 HTML4 的版本升级：它代表一种全新的数字化通信方式。通过结合使用 CSS3 和 JavaScript，HTML5 为开发人员提供了他们所需的全部内容。如果您愿意学习 HTML5 可以提供哪些助力，您将会加入日益增长的 HTML5 多媒体 Web 设计师和开发人员的队伍中。