第1页 / 共369页
第2页 / 共369页
第3页 / 共369页
第4页 / 共369页
第5页 / 共369页
第6页 / 共369页
第7页 / 共369页
第8页 / 共369页
HTML之路：XHTML和CSS最佳实践指南.pdf
HTML Dog: The Best-Practice Guide to XHTML and CSS
Contents
Introduction
Chapter 1: Getting Started
HTML Syntax
Elements, Tags, and Attributes
Common Attributes
The Basic Structure of an HTML Document
The Generalist Tags—Div and Span
CSS Syntax
Rules
Selectors
Properties
Values
Applying CSS to HTML
Chapter 2: Text
Structuring Text
Basic Text Elements: Paragraphs, Line Breaks, and Emphasis
Headings
Quotations
Abbreviations and Acronyms
Preformatted Text and Computer Code
Editorial Insertions and Deletions
Multilanguage and Bidirectional Text
Addresses
Styling Text
Fonts
Color
Size
Line Height
Bold and Italics
Upper and Lower Case
The Font Shorthand Property
Underline and Strikethrough
Letter and Word Spacing
Indenting
Horizontal Alignment
Vertical Alignment
More Text Styling Techniques
Chapter 3: Links
Anchor Elements and Hypertext References
Page Anchors
Link States: Link, Visited, Hover, Focus, and Active
Accessible Links
Tabbing
Access Keys
Link Titles
Pop-ups
Adjacent Links
Skipping Navigation
Chapter 4: Images
The img Element
Image Maps
Background Images
Image Replacement: Providing Graphical Alternatives for Text
Chapter 5: Layout
The Box Model
Width and Height
Padding
Borders
Margin
The display Property
Positioning
Static
Relative
Absolute
Fixed
Floating
Sample Page Layouts
Creating Columns
Adding a Page Header
Adding a Footer
Putting It All Together
Chapter 6: Lists
Structuring Lists
Unordered and Ordered Lists
Definition Lists
Lists as Navigation
Presenting Lists
List Markers—Bullets, Numbers, and Images
Horizontal Lists
Chapter 7: Scripts & Objects
JavaScript and the DOM
The script Element
Event Attributes
Manipulating the DOM
Objects
Chapter 8: Tables
Basic Tables
Merging Cells
Captions
Grouping Rows
Targeting Columns
Accessibility Considerations with Tables
Summaries
Associating Headers to Cells
Associating Cells to Headers
Presenting Tables
Border Collapsing
Speedier Tables: the Fixed Layout Algorithm
Empty Cells
Chapter 9: Forms
Form Elements
Form Fields and Buttons: input, textarea, and select
The name Attribute
Putting Controls in Blocks
input
textarea
select
Fieldsets
Accessible Forms
Labels
Styling Form Fields
Borders
Fonts
Backgrounds
Chapter 10: Multiple Media
Screen-Readers
Mobile Devices
Print
A Sample Print Stylesheet
Applying Media-Specific CSS
The media Attribute
Separate or Cascading
@media
In Conclusion
Appendix A: XHTML Reference
Tags
, , , , ,
Bad Tags
Rotten Attributes
Appendix B: CSS Reference
Pseudo-classes
:active
:first
:first-child
:focus
:hover
:lang
:left
:link
:right
:visited
Pseudo-elements
:after
:before
:first-letter
:first-line
At-rules
@import
@media
@page
Properties
background
background-attachment
background-color
background-image
background-position
background-repeat
border, border-top, border-right, border-bottom, border-left
border-collapse
border-color, border-top-color, border-right-color, border-bottom-color, border-left-color
border-spacing
border-style, border-top-style, border-right-style, border-bottom-style, border-left-style
border-width, border-top-width, border-right-width, border-bottom-width, border-left-width
bottom
caption-side
clear
clip
color
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
float
font
font-family
font-size
font-style
font-variant
font-weight
height
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin, margin-top, margin-right, margin-bottom, margin-left
max-height
max-width
min-height
min-width
orphans
outline
outline-color
outline-style
outline-width
overflow
padding, padding-top, padding-right, padding-bottom, padding-left
page-break-after
page-break-before
page-break-inside
position
quotes
right
table-layout
text-align
text-decoration
text-indent
text-transform
top
unicode-bidi
vertical-align
visibility
white-space
widows
width
word-spacing
z-index
Index
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Z
The Best-Practice Guide to
xHTML&CSS
Patrick Griffiths
HTML Dog
Patrick Griffiths
New Riders
1249 Eighth Street
Berkeley, CA 94710
510/524-2178
800/283-9444
510/524-2221 (fax)
Find us on the Web at: www.newriders.com
To report errors, please send a note to errata@peachpit.com
New Riders is an imprint of Peachpit, a division of Pearson Education
Copyright © 2007 by Patrick Griffiths
Editor: Doug Adrianson
Production Coordinator: Andrei Pasternak
Tech Editor: Joe Marini
Copyeditor: Hope Frazier
Compositor: Maureen Forys, Happenstance Type-O-Rama
Indexer: Julie Bess
Cover Design: Aren Howell
Cover Photo: Veer/Brian Summers
Interior Design: Maureen Forys Happenstance Type-O-Rama
Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic,
mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For infor-
mation on getting permission for reprints and excerpts, contact permissions@peachpit.com.
Notice of Liability
The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been
taken in the preparation of the book, neither the author nor Peachpit Press shall have any liability to any person or
entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions
contained in this book or by the computer software and hardware products described in it.
Trademarks
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks.
Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations
appear as requested by the owner of the trademark. All other product names and services identified throughout
this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement
of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affilia-
tion with this book.
ISBN 0-321-31139-6
9 8 7 6 5 4 3 2 1
Printed and bound in the United States of America
Acknowledgements
A good website follows conventions to keep users happy and responsive. I can only
assume that a good web design book should do the same. So here are some people
“without whom this would not have been possible.” Or something like that...
To my mother, for her share of my genetic material and all of the environmental
stuff, for buying me my first computer, for putting up with my Kevin & Perry teen-
age crap, and, most of all, for forbidding me to get a Michael Jackson perm at the
age of 10, ta, Ma.
Even though her grasp of language is somewhat limited, for frequently walking
across my keyboard Nutmeg, the feline member of the family, should probably have
a co-author credit. At least blame any typos on her.
I am proud to be a member of such an open, intelligent, friendly professional
community. Andy Budd, Andy Clarke, Jon Hicks, Jeremy Keith, Drew McLellan,
Rich Rutter, Mike Stenhouse, and the rest of the Britpack (and the mighty Pub
Standards, for that matter) have been an invaluable source of discussion, ideas,
and constructive criticism, and have become good friends to boot. And there’s a
plethora of luminaries further from home who have influenced me, and this book,
in one way or another: Doug Bowman, Dan Cederholm, Joe Clark, Charles Darwin,
Molly Holzschlag, Steve Krug, Jakob Nielsen, Valentino Rossi, and Jeffrey Zeldman
in particular. Through raising awareness, it’s due to many of these people (and many
more), and organizations like the Web Standards Project (webstandards.org) that
the quality web design landscape is a much lusher one now than it was even a few
years ago, so thanks are due not only for their influence, but for making books like
this, and interest in them, possible.
Dan Webb (danwebb.net) has been the single most influential person when it comes
to HTML Dog (site, book, and philosophy). From working together on numerous
projects across the years to idle pub banter (across even more years), Dan is the
first person I talked with about web standards, long before the emergence of that
hat-wearing dude’s little orange book, the person I have discussed around 43,082.6
aspects of web design with, from liquid layouts to accessibility to Microformats
to the absurdity of the term Web 2.0, and the person who has proofread, edited,
tested, and critiqued pretty much every single article and website that I have ever
been involved in. Cheers, Dan.
iv | Acknowledgements
I’ve had a little something to do with a bash called @media (vivabit.com/atmedia)
for almost as long as the HTML Dog book project. Thanks to everyone who has
made that possible, including all of those who have attended it. It has been a great
example of a genuine appetite for pushing best-practice web design and develop-
ment to their limits, and it has kept my enthusiasm and passion for the subject
fresh. @media and HTML Dog are my babies, so they must be related.
I have always regarded New Riders as by far the best, most discerning, and most
respectable publisher of Web-related books. It has been a roller-coaster ride, but I
am very proud to finally be a published New Riders author alongside so many great
Web heavyweights. So, to the publisher, and extended family and friends, thanks to
David Fugate, Linda Bump Harrison, Darcy DiNucci, Marjorie Baer, Nancy Davis, Joe
Marini, Doug Adrianson, and everyone else involved in building this quality culturally
infused slab of ink-sprinkled reconstituted plant fibers.
—Patrick Griffiths
October 2006
Contents
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Chapter 1:
Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
HTML.Syntax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Elements,.Tags,.and.Attributes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Common.Attributes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
The.Basic.Structure.of.an.HTML.Document. . . . . . . . . . . . . . . . . . . . . . . . . 8
The.Generalist.Tags—Div.and.Span. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
CSS.Syntax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Rules. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Applying.CSS.to.HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Chapter 2:
Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Structuring.Text.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Basic.Text.Elements:.Paragraphs,.Line.Breaks,.and.Emphasis. . . . . . . . . 39
Headings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Quotations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Abbreviations.and.Acronyms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Preformatted.Text.and.Computer.Code . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Editorial.Insertions.and.Deletions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Multilanguage.and.Bidirectional.Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Addresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
vi | contents
Styling.Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Size. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Line.Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Bold.and.Italics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Upper.and.Lower.Case. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
The.Font.Shorthand.Property. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Underline.and.Strikethrough. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Letter.and.Word.Spacing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Indenting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Horizontal.Alignment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Vertical.Alignment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
More.Text.Styling.Techniques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Chapter 3: Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Anchor.Elements.and.Hypertext.References. . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Page.Anchors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Link.States:.Link,.Visited,.Hover,.Focus,.and.Active. . . . . . . . . . . . . . . . . . . . . 65
Accessible.Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Tabbing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Access.Keys. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Link.Titles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Pop-ups. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Adjacent.Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Skipping.Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Chapter 4:
Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
The.img.Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Image.Maps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Background.Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Image.Replacement:.Providing.Graphical.Alternatives.for.Text. . . . . . . . . . . . 88
contents | vii
Chapter 5: Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
The.Box.Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Width.and.Height. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Padding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Margin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
The.display.Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Positioning. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Static. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Relative. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Absolute. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Fixed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Floating . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Sample.Page.Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Creating.Columns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Adding.a.Page.Header. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Adding.a.Footer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Putting.It.All.Together .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. .. ..130
Chapter 6: Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Structuring.Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Unordered.and.Ordered.Lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Definition.Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Lists.as.Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Presenting.Lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
List.Markers—Bullets,.Numbers,.and.Images . . . . . . . . . . . . . . . . . . . . 142
Horizontal.Lists. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Chapter 7: Scripts & Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
JavaScript.and.the.DOM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
The.script.Element. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
相关推荐
2023年江西萍乡中考道德与法治真题及答案.doc
2012年重庆南川中考生物真题及答案.doc
2013年江西师范大学地理学综合及文艺理论基础考研真题.doc
2020年四川甘孜小升初语文真题及答案I卷.doc
2020年注册岩土工程师专业基础考试真题及答案.doc
2023-2024学年福建省厦门市九年级上学期数学月考试题及答案.doc
2021-2022学年辽宁省沈阳市大东区九年级上学期语文期末试题及答案.doc
2022-2023学年北京东城区初三第一学期物理期末试卷及答案.doc
2018上半年江西教师资格初中地理学科知识与教学能力真题及答案.doc
2012年河北国家公务员申论考试真题及答案-省级.doc
2020-2021学年江苏省扬州市江都区邵樊片九年级上学期数学第一次质量检测试题及答案.doc
2022下半年黑龙江教师资格证中学综合素质真题及答案.doc
