HTML5与CSS3权威指南：打造现代网页设计基石

需积分: 1 151 浏览量更新于2024-07-23 收藏 9.28MB PDF 举报

HTML和CSS是网页开发的核心技术，这两者共同构建了互联网上大部分可见内容的基础架构。《HTML5和CSS3实战指南》（Second Edition）是一本不可或缺的参考资料，对于前端开发者和设计师而言，它不仅是一本书，更是他们工作台上必备的工具箱。该书在HTML5和CSS3的最新特性上给予了早期高度评价，强调了随着行业的发展，掌握这些现代技术的重要性，以保持就业竞争力。书中内容全面且易于理解，作者Brian Hogan以其深厚的专家经验和卓越的教学能力，引导读者深入探索这两个技术的精髓。 HTML5（第五版超文本标记语言）是网页设计的一个重大飞跃，引入了许多新的元素和功能，如音频、视频嵌入、离线存储以及更好的媒体支持，使得网站的交互性和可用性得到了显著提升。而CSS3（层叠样式表）则进一步强化了样式的控制，包括动画、渐变、阴影、3D转换等特效，极大地丰富了网页的视觉表现力。阅读这本书，读者可以学到如何有效地利用HTML5的新特性，了解何时何地应该使用它们，避免了盲目跟风或忽视新功能的风险。即使你已经拥有多年网页制作经验，也能从中获取实用技巧和最佳实践，以便在不断变化的网络环境中保持领先。评论者们对这本书给出了极高的评价。例如，Getty Images的应用开发经理Matt Margolis赞赏其内容丰富，就像一个装满工具的盒子，方便随时查阅；开发者Tibor Simic提到，作为从业多年的资深人士，他仍然能在书中发现新技巧，推荐新手抓住HTML5的机遇；Lead developer Stephen Orr强调了这本书对于理解和掌握当今网络技术的实用性。《HTML5和CSS3实战指南》（Second Edition）是一本实用的指南，无论你是入门者还是经验丰富的专业人员，都能从中受益匪浅，提升你的网页设计和开发技能，确保你的作品始终保持与行业发展趋势同步。

back end. In the downloadable example code for the book, you’ll find a server

you can use to make the examples easier to work with. To run this server

you’ll need to install Node.js by following the instructions on the Node.js

website.

You’ll want at least version 0.10.0 to avoid intermittent server

crashes.

You’ll also need

npm

, a command-line utility to install Node Packaged Modules,

so you can install dependencies. This utility is included as part of a Node.js

installation.

Once you’ve installed Node.js, visit the book’s website and download the

example code. Extract the archive, navigate to the location of the extracted

files in the Terminal (or the Command Prompt if you’re on Windows), and run

this command, without the

, to download all of the dependencies:

$ npm install

Then type the following, again leaving off the

$ node server

to launch the server on port 8000. Load up http://localhost:8000 in your

browser and browse the demos. If you’re testing on virtual machines, your

machines should be able to connect using the actual IP address of the com-

puter that’s running the example server. Best of all, any files or folders you

place in the same folder as the

server

file will get served, so you could follow

along with this book by working out of the example-code folders.

A Note about JavaScript and jQuery Usage

In this book we’ll use a lot of JavaScript. In the past, it’s been common

practice to load JavaScript files in the

<head>

section of the page and then

use techniques like jQuery’s

document.ready()

to wait until the Document Object

Model (DOM) is ready for modification. However, it’s recommended practice

to load all scripts at the bottom of the page, as this can result in better perfor-

mance. So that’s what we’ll do. All scripts, including jQuery, will go at the

bottom of the page, except for a few cases where we must alter the DOM before

any elements load.

In addition, we’ll use jQuery where it makes sense. If we’re simply looking for

an element by its ID, we’ll use

document.getElementById()

. But if we’re doing event

handling or more complex DOM manipulation that needs to work in Internet

Explorer 8, we’ll use jQuery.

http://nodejs.org

Preface • xvi

report erratum • discuss

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Compared to this, the HTML5 doctype is ridiculously simple:

html5_why/index.html

<!DOCTYPE html>

Place that at the top of the document, and you’re using HTML5. Of course,

you can’t use any of the new HTML5 elements that your target browsers don’t

yet support, but your document will validate as HTML5.

More-Descriptive Markup

Each version of HTML introduces some new markup, but never before have

there been so many additions that directly relate to describing content. You’ll

learn about elements for defining headings, footers, navigation sections,

sidebars, and articles in Chapter 2, New Structural Tags and Attributes, on

page 13. You’ll also learn about meters, progress bars, and how custom data

attributes can help you mark up data.

Less Cruft

A lot of the elements in HTML5 have been streamlined and have more sensible

defaults. You’ve already seen how much simpler the doctype is, but other

things have gotten easier to type, as well. For example, for years we’ve been

told we have to specify JavaScript

tags like this:

But in HTML5, it’s expected that you’ll use JavaScript for all

tags, so

you can safely leave those extra attributes off.

If we want to specify that our document contains UTF-8 characters, we only

have to use a

<meta>

tag like

instead of the unwieldy and often copied-and-pasted

Improved User Interfaces

The user interface is such an important part of web applications, and we

jump through hoops every day to make browsers do what we want. To style

a table or round corners, we either use JavaScript libraries or add tons of

additional markup so we can apply styles. HTML5 and CSS3 make that

practice a thing of the past.

Chapter 1. An Overview of HTML5 and CSS3 • 2

report erratum • discuss

Joe asks:

But I Like My XHTML Self-Closing Tags.

Can I Still Use Them?

You sure can! Look at Polyglot Markup.

Many developers fell in love with XHTML

because of the stricter requirements on markup, compared to HTML. XHTML docu-

ments forced quoted attributes, made you self-close content tags, required that you

use lowercase attribute names, and brought well-formed markup to the World Wide

Web. Moving to HTML5 doesn’t mean you have to change your ways. HTML5 docu-

ments will be valid if you use the HTML5-style syntax or the XHTML syntax. But

before you dive in you need to understand the implications of using self-closing tags.

Most web servers serve HTML pages with the

text/html

MIME type because of Internet

Explorer’s inability to properly handle the

application/xml+xhtml

MIME type associated

with XHTML pages. Because of this, browsers tend to strip off self-closing tags because

they don’t consider self-closing tags to be valid HTML. For example, if you had a self-

closing

script

tag above a

div

, like this,

the browser would remove the self-closing forward slash, and then the renderer would

think that the

was within the script tag, which never closes! This is why you see

script tags coded with an explicit closing tag, even though a self-closing tag is valid

XHTML markup.

Be aware of possible issues like this if you do use self-closing tags in your HTML5

documents. Be sure to serve your files with the correct MIME type. You can learn

more about these issues at

http://www.webdevout.net/articles/beware-of-xhtml#myths

http://www.w3.org/TR/html-polyglot/

Better Forms

HTML5 promises better user-interface controls. For ages, we’ve been forced

to use JavaScript and CSS to construct sliders, calendar date pickers, and

color pickers. These are all defined as real elements in HTML5, just like drop-

downs, checkboxes, and radio buttons. You’ll learn how to use them in

Chapter 3, Creating User-Friendly Web Forms, on page 37. Although this isn’t

quite ready for every browser, it’s something you need to keep your eye on,

especially if you develop web-based applications.

In addition to improved usability without reliance on JavaScript libraries,

there’s another benefit—improved accessibility. Screen readers and other

browsers can implement these controls in specific ways so that they work

easily for people with disabilities.

report erratum • discuss

A Stronger Platform for Web Development • 3

剩余302页未读，继续阅读

2B铅笔水果橡皮

粉丝: 16
资源: 5

HTML5与CSS3权威指南：打造现代网页设计基石

Head First HTML and CSS, Second Edition(官网源代码及资源)

Head First HTML and CSS中文版 第2版

《Beginning HTML and CSS》英文版电子书

HTML and CSS and JavaScript

HTML and CSS 详解

HTML and CSS Design and Build Websites

Head First HTML and CSS

HTML and CSS for Beginners

Head first html & css深入浅出html and css中文PDF

HTML and CSS Design and Build Websites.pdf

最新资源

Head First HTML and CSS中文版第2版