xml地图|网站地图|网站标签 [设为首页] [加入收藏]
2017前端性能优化清单,基础知识
分类:web前端

HTML5 基础知识 – 第 1 部分

2012/06/23 · HTML5 · HTML5

来源:IBM developerworks

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 和运行 Palm webOS 的手机的流行和普及,这注定是一个不断增长的市场。

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

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

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

页面规划

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

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

图 1. Acme United Web 页面规划

图片 1

在创建页面的过程中,我使用了 CSS3,需要用 CSS3 正确地呈现 HTML5 页面。CSS3 是实现 HTML5 页面样式、导航和整体感官的重要工具。它的属性组可以在 W3Schools CSS3 参考站点(见 参考资料)找到,包括一些有用的元素,如背景、字体、选框和动画效果。

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

Header 区

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

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

XHTML

<header> <h1>Heading Text</h1> <p> Text or images can be included here</p> <p> Logos are frequently placed here too</p> </header>

1
2
3
4
5
<header>
    <h1>Heading Text</h1>
    <p> Text or images can be included here</p>
    <p> Logos are frequently placed here too</p>
</header>

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

清单 2. < hgroup> 标记示例

XHTML

<header> <hgroup> <h1>Main Heading</h1> <h2>Sub-heading </h2> </hgroup> <p> Text or images can be included here</p> </header>

1
2
3
4
5
6
7
<header>
    <hgroup>
          <h1>Main Heading</h1>
          <h2>Sub-heading </h2>
    </hgroup>
    <p> Text or images can be included here</p>
</header>

Navigation 区

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

清单 3. <nav> 标记示例

XHTML

<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Products</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>

1
2
3
4
5
6
7
8
<nav>
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Our Products</a></li>
          <li><a href="#">Contact Us</a></li>
     </ul>
</nav>

Article 和 Section 区

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

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

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

清单 4 显示了 < article> 和 < section>标记的用法示例。

图像元素

< section>和 < article>标记以及 < header>和 < footer>标记可以包含 < figure>标记。您可以使用该标记包含图像、图表和照片。
< figure>标记可以包含 < figcaption>,后者包含 < figure>标记中的图形的说明文字,允许您输入一段描述来将图形与内容更紧密地联系在一起。清单 5 提供了 < figure>和 < figcaption>标记结构的示例。

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

XHTML

< figure> < img src="/figure.jpg" width="304" height="228" alt="Picture"> < figcaption>Caption for the figure< /figcaption> < /figure>

1
2
3
4
< figure>
< img src="/figure.jpg" width="304" height="228" alt="Picture">
< figcaption>Caption for the figure< /figcaption>
< /figure>

媒体元素

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

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

清单 6. < audio> 标记示例

XHTML

< audio src="MyFirstMusic.ogg" controls autoplay loop"> Your browser does not support the audio tag. < /audio>

1
2
3
< audio src="MyFirstMusic.ogg" controls autoplay loop">
Your browser does not support the audio tag.
< /audio>

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

清单 7 提供了

清单 7.

XHTML

< video src="MyFirstMovie.ogg" controls="controls"> Your browser does not support the video tag < /video>

1
2
3
< video src="MyFirstMovie.ogg" controls="controls">
Your browser does not support the video tag
< /video>

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

清单 8. < source> 标记示例

XHTML

< audio> < source src="/music/good_enough.wma" type="audio/x-ms-wma"> < source src="/music/good_enough.mp3" type="audio/mpeg"> < p>Your browser does not support the HTML 'audio' element. < /audio>

1
2
3
4
5
< audio>
< source src="/music/good_enough.wma" type="audio/x-ms-wma">
< source src="/music/good_enough.mp3" type="audio/mpeg">
< p>Your browser does not support the HTML 'audio' element.
< /audio>

 

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

清单 9. < embed> 标记示例

XHTML

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

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

除了 src和 type属性外,标记还包含 height 和 width属性。

Aside 区

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

清单 10 提供了 < aside>标记的使用示例。

清单 10.标记示例

XHTML

< p>My family and I visited Euro Disney last year.< /p> < aside> < h4>Disney in France< /h4> < p>Besides Euro Disney, there is a Disneyland in California.< /p> < /aside>

1
2
3
4
5
< p>My family and I visited Euro Disney last year.< /p>
< aside>
< h4>Disney in France< /h4>
< p>Besides Euro Disney, there is a Disneyland in California.< /p>
< /aside>

Footer 区

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

清单 11. < footer> 标记示例

XHTML

< footer> < p>Copyright 2011 Acme United. All rights reserved.< /p> < /footer>

1
2
3
< footer>
< p>Copyright 2011 Acme United. All rights reserved.< /p>
< /footer>

构造页面

现在,您已经了解了创建一个 HTML5 页面所需的基本标记,接下来让我们开始正式构造页面。我们将要为 Acme United 构造一个 Web 页面。图 2 显示了构建后的页面,您可以下载并使用该页面(参见 下载)。

图 2. Acme United Web 页面

图片 2

现在,让我们开始构造页面吧。首先,让我们先关注一下 < !doctype>。在 HTML5 中,对 进行了简化:您只需要记住 html即可。这不仅简化了标记的输入,而且该标记在以后也不需要进行修改。注意,它不是 html5,而是 html。不管 HTML 以后会有多少个版本,< !doctype>只能是 html。
< html>标记包含除 < !doctype>以外的所有其他 HTML 元素。所有这些元素都应当被嵌套到 < html>和 < /html>标记之间。参见清单 12。

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

XHTML

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

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

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

●< base>

●< link>

●< meta>

●< script>

●< style>

●< title>

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

清单 13. 标记示例

XHTML

< head> < title>HTML5 Fundamentals Example< /title> < link rel="stylesheet" href="main-stylesheet.css" /> < /head>

1
2
3
4
< head>
< title>HTML5 Fundamentals Example< /title>
< link rel="stylesheet" href="main-stylesheet.css" />
< /head>

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

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

XHTML

< body > < header> < hgroup> < h1>Acme United< /h1> < h2>A Simple HTML5 Example< /h2> < /hgroup> < /header>

1
2
3
4
5
6
7
< body >
< header>
< hgroup>
< h1>Acme United< /h1>
< h2>A Simple HTML5 Example< /h2>
< /hgroup>
< /header>

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

清单 15. CSS3 示例 #1

CSS

* { 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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
* {
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> 示例

XHTML

< nav> < ul> < li>< a href="#">Home< /a>< /li> < li>< a href="#">About Us< /a>< /li> < li>< a href="#">Contact Us< /a>< /li> < /ul> < /nav>

1
2
3
4
5
6
7
< nav>
< ul>
< li>< a href="#">Home< /a>< /li>
< li>< a href="#">About Us< /a>< /li>
< li>< a href="#">Contact Us< /a>< /li>
< /ul>
< /nav>

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

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

清单 17. CSS3 示例 #2

CSS

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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> 示例

XHTML

< article> < header> < h1> < a href="#" title="Link to this post" rel="bookmark">Article Heading< /a> < /h1> < /header> < p> Primum non nocere ad vitam Paramus . . . < /p> < section> < header> < h1>This is the first section heading< /h1> < /header> < p>Scientia potentia est qua nocent docentp . . .> < /section>

1
2
3
4
5
6
7
8
9
10
11
12
13
< article>
< header>
< h1>
< a href="#" title="Link to this post" rel="bookmark">Article Heading< /a>
< /h1>
< /header>
< p> Primum non nocere ad vitam Paramus . . . < /p>
< section>
< header>
< h1>This is the first section heading< /h1>
< /header>
< p>Scientia potentia est qua nocent docentp . . .>
< /section>

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

清单 19. CSS3 示例 #3

XHTML

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
}

中包含的第二个 < section>标记包含与第一个 < section>相同的基本信息,但是这一次将使用 < aside>、< figure>、< menu>以及 < mark>标记。参见清单 20。< aside>标记在这里用于显示不属于文本流部分的信息。< figure> 标记包含一个 Stonehenge 图形。这个 < section> 还包含 < menu>标记,您可以用来创建带有四个 Muse 名字的按钮。当单击其中一个按钮时,它将提供有关特定 Muse 的信息。< mark>标记在< /mark>标记的内部使用,用于突出显示 veni、vidi、vici。清单 20. < article> 和 < section> 示例< section>

XHTML

< header> < h1>Second section with mark, aside, menu & figure< /h1> < /header> < p class="next-to-aside"> . . . < mark>veni, vidi, vici< /mark>. Mater . . .< /p> < aside> < p>This is an aside that has multiple lines. . . .< /p> < /aside> < menu label="File"> < button type="button" onClick="JavaScript:alert('Clio . . .')">Clio< /button> < button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia< /button> |-------10--------20--------30--------40--------50--------60--------70--------80--------9| |-------- XML error: The previous line is longer than the max of 90 characters ---------| < button type="button" onClick="JavaScript:alert ('Urania . . .')">Urania < button type="button" onClick="JavaScript:alert ('Calliope . . .')">Calliope < /menu> < figure>< img src="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/> < figcaption>Figure

  1. Stonehenge< /figcaption> < /figure> < /section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< header>
< h1>Second section with mark, aside, menu & figure< /h1>
< /header>
< p class="next-to-aside"> . . . < mark>veni, vidi, vici< /mark>. Mater . . .< /p>
< aside>
< p>This is an aside that has multiple lines. . . .< /p>
< /aside>
< menu label="File">
< button type="button" onClick="JavaScript:alert('Clio . . .')">Clio< /button>
< button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia< /button>
|-------10--------20--------30--------40--------50--------60--------70--------80--------9|
|-------- XML error: The previous line is longer than the max of 90 characters ---------|
< button type="button" onClick="JavaScript:alert ('Urania . . .')">Urania
< button type="button" onClick="JavaScript:alert ('Calliope . . .')">Calliope
< /menu>
< figure>< img src="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/>
< figcaption>Figure 1. Stonehenge< /figcaption>
< /figure>
< /section>

 

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

清单 21. CSS3 示例 #4

 

CSS

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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> 示例

XHTML

< section> < header> < h1>This is a video section< /h1> < /header> < p>< video src="" controls autoplay loop> < div class="no-html5-video">< p>This video will work in Mozilla Firefox or Google Chrome only. < /p> < /div> < /video>< /p> < /section> < /article>

1
2
3
4
5
6
7
8
9
10
11
< section>
< header>
< h1>This is a video section< /h1>
< /header>
< p>< video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" controls autoplay loop>
< div class="no-html5-video">< p>This video will work in
Mozilla Firefox or Google Chrome only. < /p>
< /div>
< /video>< /p>
< /section>
< /article>

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

清单 23. CSS3 示例 #5

 

CSS

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; }

1
2
3
4
5
6
7
8
9
10
11
12
13
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> 标记示例

XHTML

< footer> < p>Copyright: 2011 Acme United. All rights reserved.< /p> < /footer> < /body> < /html>

1
2
3
4
5
< footer>
< p>Copyright: 2011 Acme United. All rights reserved.< /p>
< /footer>
< /body>
< /html>

页脚的 CSS3 如清单 25 所示。

清单 25. CSS3 示例 #5

CSS

footer p { text-align: center; font-size: 12px; color: #888; margin-top: 24px; }

1
2
3
4
5
6
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}

 

结束语

随着 Web 页面的完成,本系列的第 1 部分也就此结束。本文的目标是介绍新的 HTML5 时代。HTML5 不仅仅是对 HTML4 的版本升级:它代表一种全新的数字化通信方式。通过结合使用 CSS3 和 JavaScript,HTML5 为开发人员提供了他们所需的全部内容。如果您愿意了解庞大的 HTML5 可以为您提供哪些帮助,您将加入日益增长的 HTML5 多媒体 Web 设计师和开发人员的队伍中。本系列的下一期文章将介绍如何对 HTML5 表单进行编码和格式化。

 

赞 3 收藏 评论

图片 3

2017前端性能优化清单

2017/04/10 · 基础技术 · 性能

原文出处: Xsu Edwan   

你开始使用渐进启动了么?是不是已经使用过React和Angular中tree-shakingcode-splitting两个工具?有没有用过Brotli、Zofli和HPACK这几种压缩技术,或者OCSP协议(在线证书状态协议)?知不知道资源提醒,客户端提醒和CSS containment一类的技术?了解IPv6,HTTP/2和Service Worker这些协议吗?

回想那些年,大家往往在完成了产品之后才会去考虑性能。常常把与性能相关的事情拖到项目的最后来做,所做的也不过是对服务器上的config文件进行一些微调、串联、优化以及部分特别小的调整。而现在,技术已经有了翻天覆地的变化。

一个项目的性能是非常重要的,除了要在技术层面上注意,更要在项目的设计之初就开始考虑,这样才可以使性能的各种隐形需求完美的整合到项目中,随着项目一起推进。性能最好具有可量化、可监测以及可改动的特性。网络越来越复杂,对网络的监控也变得越来越难,因为监测的过程会受到包括设备、浏览器、协议、网络类型以及其他技术(CDN,ISP,缓存,代理服务器,防火墙,负载均衡器和服务器对性能的影响都很大)的很大影响。

下文是一份2017年的前端性能优化清单,阐述了作为前端开发人员,为了确保反馈速度以及浏览器兼容性我们需要考虑的问题。

(你也可以下载checklist PDF或者check in Apple Pages。优化万岁!)

浅谈SVG Sprite

2016/03/06 · HTML5 · SVG

原文出处: 携程设计委员会   

随着前端技术的发展,有越来越多的方法实现icon的制作,同时为了满足市面上各种大屏幕分辨率,字体图标icon font应运而生,字体图标的制作也是一种全新的设计方式,但是icon font 在windows系统下,字体较小时,锯齿问题比较严重,那么今天要讲的svg sprite,不仅可以随意改变图标大小不会产生锯齿,还能随心所欲的填充颜色。

下面来来介绍一下矢量图形SVG Sprite在页面中的应用。

第一步:制作SVG图标
首先的准备一套SVG图标,我们直接到icomoon.io上下载。

1.选中图标

图片 4

2.点击Generate

图片 5

3.下载

图片 6

然后我们可以在解压文件中,找到对应的svg图标文件夹。

图片 7 图片 8

第二步:合并SVG图标
准备好svg图标后,我们需要把多个svg图标整合到一个svg文件中。
这里需要用到自动化合并工具(grunt),grunt有个名为svgstore的插件。
关于grunt环境的安装,就不在这阐述 。

环境安装好后,在项目目录下执行下面的命令,安装插件:

图片 9

安装好后,可以看到grunt-svgstore文件夹里有个Gruntfiles.js配置文件。
我们加入以下两段代码:

图片 10

图片 11

了解更多配置项:

配置好以后,我们需要把第一步下载下来的svg图标,放到sprites文件夹中,如下图:

图片 12

到这为止,一切准备就绪,只需进入到 grunt-svgstore目录,执行命令:

图片 13

运行命令后,可以看到成功创建了sprite.svg文件

图片 14

第三步:应用

我们来看下生成文件的源代码:

图片 15

再来看看浏览器里页面的效果~~~

图片 16

到这里svg sprite 图标就已经完成了。

兼容性:

图片 17

对于ie8以下,我们可以添加一个标签,使用css sprite:

为避免其他浏览器加载,可以加上条件注释。

图片 18

这样就完美啦~

 

2 赞 5 收藏 评论

图片 19

正文

微优化是保持性能最好的办法,但是又不能有太过明确的优化目标,因为过于明确的目标会影响在项目中做的每一个决定。以下是一些不同的模型,请按照自己舒服的顺序阅读。

请准备好然后定下目标!

1. 比你最强的竞争对手快20%

根据一个心理学研究,你的网站最少在速度上比别人快20%,才能让用户感觉到你的网站比别人的更快。这个速度说的不是整个页面的加载时间,而是开始加载渲染的时间,首次有效渲染时间(例如页面需要加载主要内容的时间),或者交互时间(指的是页面或者应用中主要的页面加载完成,并主备好与用户进行交互的时间)。

在Moto G(或中端三星设备)和Nexus 4(比较主流的设备)上衡量开始渲染时间(用WebPagetest)以及首页有效渲染时间(用Lighthouse),最好是在一个开放的实验室中,使用规范的3G,4G和Wi-Fi链接。

图片 20
Lighthouse,一个Google开发的新的性能审查工具

你可以通过你的分析报告看看你的用户处在哪个阶段,选取其中前90%的用户体验来做测试。接着收集数据,建一个表格,筛去20%的数据并预设一个目标(如:性能预算)。现在你可以将上述两个值进行对比检测。如果你始终维持着你的目标并且通过一点一点改变脚本去加快交互时间,那么上述方法就是合理可行的。

图片 21
由Brad Frost创建的性能分析

和你的同事分享这份清单。首先要确保团队中的每个人都熟悉这份清单。项目中每一个决定都会影响性能,如果前端工程师们都在积极的参与项目概念,UX以及视觉设计的决定,这将会给整个项目带来巨大收益。地图设计的决定违背了性能理念,所以他在这份清单内的顺序有待考虑。

2. 反应时间为100毫秒,帧数是每秒60帧

RAIL性能模型会为你提供一个优秀的目标,既尽最大的努力在用户初始操作后的100毫秒内提供反馈。为了达到这个目标,页面需要放弃权限,并将权限在50毫秒内交回给主线程。对于像动画一样的高压点,最好的方法就是什么都不做,因为你永远无法达到最小绝对值。
同理,动画的每一帧都需要在16毫秒内完成,这样才能保证每秒60帧(一秒/60=16.6毫秒),如果可以的话最好能在10毫秒内完成。因为浏览器需要一定的时间去在屏幕上渲染新的帧,而且你的代码需要在16.6毫秒内完成执行。要注意,上述目标应用于衡量项目的运行性能,而非加载性能。

3. 首次有效渲染时间要低于1.25秒,速度指数要低于1000

纵使这个目标实现起来非常困难,你的最终目标也应该是让开始渲染时间低于1秒且速度指数低于1000(在网速快的地方)。对于首次有效渲染时间,上限最好是1250毫秒。对于移动端,3G下移动设备首次渲染时间低于3秒都是可以接受的。稍微高一点也没关系,但千万别高太多。

定义你所需要的环境

4. 选择和安装你的开发环境

不要过多的关注当下最流行的工具,坚持选择适合自己开发环境的工具,例如Grunt、Gulp、Webpack、PostCSS,或者组合起来的工具。只要这个工具运行的速度够快,而且没有给你的维护带来太大问题,这就够了。

5. 渐进增强(progressive enhancement)

在构建前端结构的时候,应始终将渐进增强作为你的指导原则。首先设计并且构建核心体验,随后再完善那些为高性能浏览器设计的高级特性的相关体验,创建弹性体验。如果你的网页可以在使用低速网络、老旧显示器的很慢的电脑上运行飞快,那么在光纤高配电脑上它只会运行的更快。

6. Angular,React,Ember等

最好使用那些支持服务器端渲染的框架。在使用某个框架钱,先记录服务器和客户端的引导时间,记得要在移动设备上测试,最终才能使用某个框架(因为面对的是性能问题,如果在使用某个框架后,再做修改是非常困难的)。如果你使用JavaScript框架,要保证你的选择是被广泛使用并且经过考验的。不同框架对性能有着不同程度的影响,同时对应着不同的优化策略,所以最好可以清楚的了解你要用的框架的每个方面。在写网页应用时可以先看看PRPL pattern和application shell architecture。

图片 22
本图描述了PRPL pattern

图片 23
上图是application shell,是一个小型的、由HTML,CSS和JavaScript构成的用户界面

7. AMP还是Instant Articles?

根据你整体组织结构的优先顺序和策略,你可以考虑使用Google的AMP或Facebook的Instant Articles。要知道没有这些你也可以达到不错的性能,但是AMP可以提供一个性能不错的免费的内容分发网络框架(CDN),Instant Articles可以在Facebook上促进你的性能。你也可以建立progressive web AMP。

8. 选择适合你的CDN

根据你的动态数据量,可以将一部分内容外包给静态网站生成工具,将它置于CDN上,从中生成一个静态版本,从而避免那些数据库的请求。也可以选择基于CDN的静态主机平台,通过交互组件丰富你的页面(JAMStack)。

注意CDN是否可以很好的处理(或分流)动态内容。没必要单纯的将你的CDN限制为静态。反复检查CDN是否执行了内容的压缩和转化,检查智能HTTP/2传输和缓存服务器(ESI),注意哪些静态或动态的部分处在CDN的边缘(最接近用户的服务器)。

开始优化

9. 直接确定优化顺序

首先应该弄清楚你想解决的问题是什么。检查一遍你所有的文件(JavaScript,图片,字体,第三方script文件以及页面中重要的模块,例如轮播,复杂信息图标和多媒体内容),并将他们分类。
列一个表格。明确浏览器上应该有的基础核心内容,哪些部分属于为高性能浏览器设计的升级体验,哪些是附加内容(那些不必要或者可以被延时加载的部分,例如字体,不必要的样式,轮播组件,播放器,社交网站入口,很大的图片)。更详细的细节请参考文章”Improving Smashing Magazine’s Performance‘’。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:2017前端性能优化清单,基础知识

上一篇:rows属性和宽度高度关系研究,那些事儿 下一篇:启动性能瓶颈分析与解决方案,最佳实践
猜你喜欢
热门排行
精彩图文