HTML5大师指南：探索首个版的杰作

需积分: 9 94 浏览量更新于2024-07-28 1 收藏 1.7MB PDF 举报

《HTML5大师之道》（1st Edition）由Juan Diego Gauchat撰写，于2011年出版，版权所有。该书是专为深入理解和实践HTML5技术的专家设计的，由Laura Edlund编辑，可在www.lauraedlund.ca网站获取更多信息。本书遵循严格的版权规定，未经版权所有者书面许可，不得以任何形式复制或传播，包括但不限于打印、录音或通过任何信息存储和检索系统。《HTML5 for Masterminds》的核心内容围绕HTML5展开，针对高级用户，旨在提供详尽的指导。全书分为多个章节，首章探讨HTML5文档的基础知识，可能包括新特性如语义标签、离线存储、媒体元素的更新等，这些都是HTML5相较于旧版本的重大进步，使得网页开发更加现代和高效。在第一部分，读者可以了解到如何构建结构清晰、符合语义的HTML5文档，这对于创建响应式和无障碍的Web体验至关重要。书中还可能涉及HTML5与CSS3、JavaScript的协作，以及新的API（Application Programming Interfaces），这些API允许开发者创建更丰富的交互式内容，如拖放功能、地理定位服务等。除了理论讲解，书中还可能包含实际项目案例和示例代码，帮助读者将所学应用到实际工作中。此外，由于本书强调的是面向大师级读者，因此可能会深入探讨HTML5的高级概念，如Web Workers、WebSockets等异步通信技术，以及Canvas和SVG用于图形和矢量图形处理的能力。值得注意的是，作者明确指出，本书提供的信息是“按现状”发布的，没有担保，尽管已尽最大努力准备，但仍可能存在某些损失或损害的风险。同时，源代码可以在www.minkbooks.com网站获取，对于技术爱好者来说，这是一个学习和交流的好资源。《HTML5 for Masterminds》是一本适合想要深入了解HTML5技术、提升Web开发技能的专业人士的指南，涵盖了从基础知识到高级应用的广泛内容，是推动网页技术革新和提升Web开发水平的重要参考书籍。

descriptions, blog entries or any other important information, and Side Bar could show a list of

links pointing to each of those items. In a blog, for example, this last column will offer a list of

links pointing to every blog entry, information about the author, etc.

At the bottom of the typical layout we have one more bar named the Institutional bar. We

name it as such because this is the area of the layout often with general information about the

website, the author or the company, plus links regarding rules, terms and conditions, maps, and all

additional data the developer considers worth sharing. The Institutional bar is the complement to

the Header, and it is part of what is considered these days as the essential structure of a web page.

Figure 1-2: visual representation of a typical blog layout

Figure 1-2 is an example of a regular blog. In this example, you can easily identify every part of

the design we were considering before.

1-Header

2-Navigation Bar

3-Main Information section

4-Side Bar

5-the footer or Institutional bar

This simple representation of a blog can help us understand that every section defined in a website

has a purpose. Sometimes that purpose doesn't look clear but the essence is always there, and you

will still be able to recognize any of the sections described above everywhere.

HTML5 considers this basic structure and layout, and it provides new elements to differentiate

and declare each one of them. Now we can say to browsers what every section is for:

this header is not the same as the general title of the document defined previously in the head. The

insertion of the <header> element represents the beginning of the body and the visible part of the

document. From now on we will be able to see the results of the code on browser’s window.

IMPORTANT: If you followed the instructions from the beginning of this chapter you should

already have a text file with the codes studied so far and ready to be tested. If not, all you have

to do is copy the code found in Listing 1-10 into an empty text file using any text editor (such

as Windows' Notepad) and save the file with the name of your choice and the .html extension.

To see the script working, open the file from an HTML5 compatible browser. You can do that

from inside the browser by using the File menu or simply double-click the file from the file

explorer.

Review the Basics: Between the <header> tags on Listing 1-10 there is an element that you

probably don't know. The element <h1> is an old HTML element used to define a heading. The

number indicates the importance of the heading and its content. The element <h1> is the highest

in importance and <h6> is the lowest in importance, therefore <h1> will be used to show the

main title and the rest are used for a main subtitle or internal subtitles. We will see how these

elements work in HTML5 later.

<nav>

The next section of our example is the Navigational Bar. This bar is generated in HTML5 with

the <nav> tag.

<!DOCTYPE html>

<head>

<title>This text is the title of the document</title>

</head>

<body>

<h1>This is the main title of the website</h1>

</header>

<nav>

<ul>

<li>photos</li>

<li>videos</li>

<li>contact</li>

</ul>

</nav>

</body>

</html>

Listing 1-11: using the <nav> element

As you can see in Listing 1-11, the <nav> element is between the <body> tags but falls after the

closing tag of the header (</header>), not in between <header> tags. This is because <nav> is not

part of the header, but instead a new section.

We said before that the structure and the order we choose to use with HTML5 is up to us. That

means HTML5 is very versatile, and is only giving us the parameters and basic elements to work

with, but how to use them will be our decision. One example of this versatility is that the <nav> tag

could be inserted within the <header> element or in any other section of the body. However, you

must always consider that these new tags were created to provide more information to browsers

and help every new program and device in the market to identify the most relevant parts of the

document. To keep our code portable and readable, we recommend the best practice of following

the standards and keeping it as clear as possible. The <nav> element is intended to contain

navigation aids like the main menu or major navigation blocks, and you should use it that way.

Review the Basics: In the example of Listing 1-11, we are listing the menu options for our web

page. Between the <nav> tags, there are two elements that are used to create a list. The purpose

of the <ul> element is to define a list. Nested between the <ul> tags you can see several <li>

tags with different text to represent the menu options. The <li> tags, as you probably already

realized, are used to define each item in the list. The purpose of this ebook is not to teach you

basic concepts of HTML. If you need more information about regular elements of the language,

please visit our website and follow the links for this chapter.

Next in our standard design are what we called the Main Information bar and the Side Bar on

Figure 1-1. As we explained before, the Main Information bar contains the most relevant

information of the document and can be found in different forms—for example, divided into

several blocks or more columns. Because the purpose of these columns and blocks is more general,

the HTML5 element that specifies these sections is simply called

<section>.

<!DOCTYPE html>

<head>

<title>This text is the title of the document</title>

</head>

<body>

<h1>This is the main title of the website</h1>

</header>

<nav>

<ul>

<li>photos</li>

<li>videos</li>

<li>contact</li>

</ul>

</nav>

</section>

</body>

</html>

Listing 1-12: using the

<section> element

Like the Navigation Bar, the Main Information bar is a separate section. Therefore the section

for the Main Information bar goes below the </nav> closing tag.

Do It Yourself: Compare the last code in Listing 1-12 and the layout in Figure 1-3 to

understand how the tags are located in the code and what section those tags are generating in

the visual representation of the web page.

IMPORTANT: The tags that represent every section of the document are located in the code in

a list, one over another, but in the website some of these sections will be side by side (The

Main Information and Side Bar columns are examples.). In HTML5, the presentation of these

elements on the screen has been delegated to CSS. The design will be achieved by assigning

CSS styles to every element. We will study CSS in the next chapter.

<aside>

In the typical website layout (Figure 1-1), a bar called Side Bar sits beside the Main Information

bar. This is a column or section that usually contains data related to the main information but not

as relevant or not as important.

In the example of a standard blog layout (Figure 1-2), the Side Bar contains a list of links

(number 4). In that example, the links were pointing to every blog entry and providing additional

information about the author of the blog. The information inside this bar is related to the main

information but is not relevant by itself. Following the blog example, we can say that the entries of

the blog are relevant, but the links and short previews of those entries are only a navigational aid,

and not what the reader or user will be most interested in.

In HTML5, we are able to differentiate this secondary kind of information with the <aside>

element.

<!DOCTYPE html>

<head>

<title>This text is the title of the document</title>

</head>

<body>

<h1>This is the main title of the website</h1>

</header>

<nav>

<ul>

<li>photos</li>

<li>videos</li>

<li>contact</li>

</ul>

</nav>

</section>

<aside>

<blockquote>Article number one</blockquote>

<blockquote>Article number two</blockquote>

</aside>

</body>

</html>

Listing 1-13: using the <aside> element

The <aside> element could be located at the right or left side in our sample page; the tag doesn’t

really have a predefined position. The <aside> element is only describing the information that is

enclosed, not a place in the structure. The <aside> element may be located in any part of the

layout, and it may be used as long as its content is not considered the main content of the

document. For instance, we can use the <aside> element inside a <section> element, or even

剩余285页未读，继续阅读

rfcclub2011

粉丝: 0
资源: 2

HTML5大师指南：探索首个版的杰作

HTML5 for Masterminds 无水印原版pdf

高清彩版 iOS 12 Apps for Masterminds

iOS Apps for Masterminds (第四版 - iOS 12)

esprit-2018-1a5-Masterminds-开源

Masterminds of Programming

masterminds_of_programming

开源项目-Masterminds-glide.zip

react-masterminds：猜数字的基本游戏

程序员需要经常刷题吗-glide:https://github.com/Masterminds/glide

Masterminds:一个学校档案，供游戏策划者使用。请考虑不看。谢谢！

最新资源