第1章　创建HTML文档 1

1.1　HTML文档的基本结构2

Title of pageThis text is bold

1.2　HTML文档类型 2

声明必须是 HTML 文档的第一行，位于 标签之前。声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

提示：请始终向 HTML 文档添加 声明，这样浏览器才能获知文档类型。

常用的 DOCTYPE 声明

HTML 5HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。/p>

"http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。/p>

"http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1

该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型(例如提供对东亚语系的 ruby 支持)。

标签HTML5HTML 4.01 / XHTML 1.0XHTML 1.1

TransitionalStrictFrameset

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

No

Yes

No

Yes

Yes

Yes

Yes

No

Yes

No

No

No

No

Yes

No

No

No

No

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

No

Yes

No

Yes

No

No

No

No

Yes

Yes

Yes

Yes

No

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

No

Yes

No

Yes

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

Yes

Yes

Yes

No

Yes

No

No

No

No

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

No

Yes

No

Yes

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

No

Yes

No

Yes

No

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

No

No

No

Yes

No

No

No

No

Yes

No

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

No

No

No

No

Yes

Yes

No

Yes

No

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

Yes

No

No

No

No

No

Yes

No

Yes

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

Yes

No

No

No

No

Yes

No

No

No

No

Yes

Yes

No

Yes

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

No

Yes

No

Yes

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

Yes

No

No

No

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

No

Yes

Yes

Yes

Yes

No

Yes

No

Yes

No

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

No

No

No

No

Yes

No

No

No

No

1.3　利用HTML元素定义中文网页3

ISO 语言代码

HTML 的 lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。

根据 W3C 推荐标准，您应该通过标签中的 lang 属性对每张页面中的主要语言进行声明，比如：

在 XHTML 中，采用如下方式在标签中对语言进行声明：

LanguageISO Code

Abkhazian

ab

Afar

aa

Afrikaans

af

Albanian

sq

Amharic

am

Arabic

ar

Armenian

hy

Assamese

as

Aymara

ay

Azerbaijani

az

Bashkir

ba

Basque

eu

Bengali (Bangla)

bn

Bhutani

dz

Bihari

bh

Bislama

bi

Breton

br

Bulgarian

bg

Burmese

my

Byelorussian (Belarusian)

be

Cambodian

km

Catalan

ca

Cherokee

Chewa

Chinese (Simplified)

zh

Chinese (Traditional)

zh

Corsican

co

Croatian

hr

Czech

cs

Danish

da

Divehi

Dutch

nl

Edo

English

en

Esperanto

eo

Estonian

et

Faeroese

fo

Farsi

fa

Fiji

fj

Finnish

fi

Flemish

French

fr

Frisian

fy

Fulfulde

Galician

gl

Gaelic (Scottish)

gd

Gaelic (Manx)

gv

Georgian

ka

German

de

Greek

el

Greenlandic

kl

Guarani

gn

Gujarati

gu

Hausa

ha

Hawaiian

Hebrew

he, iw

Hindi

hi

Hungarian

hu

Ibibio

Icelandic

is

Igbo

Indonesian

id, in

Interlingua

ia

Interlingue

ie

Inuktitut

iu

Inupiak

ik

Irish

ga

Italian

it

Japanese

ja

Javanese

jv

Kannada

kn

Kanuri

Kashmiri

ks

Kazakh

kk

Kinyarwanda (Ruanda)

rw

Kirghiz

ky

Kirundi (Rundi)

rn

Konkani

Korean

ko

Kurdish

ku

Laothian

lo

Latin

la

Latvian (Lettish)

lv

Limburgish ( Limburger)

li

Lingala

ln

Lithuanian

lt

Macedonian

mk

Malagasy

mg

Malay

ms

Malayalam

ml

Maltese

mt

Maori

mi

Marathi

mr

Moldavian

mo

Mongolian

mn

Nauru

na

Nepali

ne

Norwegian

no

Occitan

oc

Oriya

or

Oromo (Afan, Galla)

om

Papiamentu

Pashto (Pushto)

ps

Polish

pl

Portuguese

pt

Punjabi

pa

Quechua

qu

Rhaeto-Romance

rm

Romanian

ro

Russian

ru

Sami (Lappish)

Samoan

sm

Sangro

sg

Sanskrit

sa

Serbian

sr

Serbo-Croatian

sh

Sesotho

st

Setswana

tn

Shona

sn

Sindhi

sd

Sinhalese

si

Siswati

ss

Slovak

sk

Slovenian

sl

Somali

so

Spanish

es

Sundanese

su

Swahili (Kiswahili)

sw

Swedish

sv

Syriac

Tagalog

tl

Tajik

tg

Tamazight

Tamil

ta

Tatar

tt

Telugu

te

Thai

th

Tibetan

bo

Tigrinya

ti

Tonga

to

Tsonga

ts

Turkish

tr

Turkmen

tk

Twi

tw

Uighur

ug

Ukrainian

uk

Urdu

ur

Uzbek

uz

Venda

Vietnamese

vi

Volapuk

vo

Welsh

cy

Wolof

wo

Xhosa

xh

Yi

Yiddish

yi, ji

Yoruba

yo

Zulu

zu

1.4　利用title定义网页的标题 4

Document111

1.5　利用meta元素定义页面元信息 5

元素可提供有关页面的元信息(meta-information)，比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

在 HTML 中，标签没有结束标签。

在 XHTML 中， 标签必须被正确地关闭。

提示和注释：

注释：标签永远位于 head 元素内部。

注释：元数据总是以名称/值的形式被成对传递的。

必要属性：

content 值：some_text 描述：定义与 http-equiv 或 name 属性相关的元信息

可选属性：

http-equiv ：把 content 属性关联到 HTTP 头部。

content-type

expires

refresh

set-cookie

name：把 content 属性关联到一个名称。

author

description

keywords

generator

revised

others

scheme：定义用于翻译 content 属性值的格式。

some_text

文件扩展名Content-Type(Mime-Type)文件扩展名Content-Type(Mime-Type)

.*( 二进制流，不知道下载文件类型)

application/octet-stream

.tif

image/tiff

.001

application/x-001

.301

application/x-301

.323

text/h323

.906

application/x-906

.907

drawing/907

.a11

application/x-a11

.acp

audio/x-mei-aac

.ai

application/postscript

.aif

audio/aiff

.aifc

audio/aiff

.aiff

audio/aiff

.anv

application/x-anv

.asa

text/asa

.asf

video/x-ms-asf

.asp

text/asp

.asx

video/x-ms-asf

.au

audio/basic

.avi

video/avi

.awf

application/vnd.adobe.workflow

.biz

text/xml

.bmp

application/x-bmp

.bot

application/x-bot

.c4t

application/x-c4t

.c90

application/x-c90

.cal

application/x-cals

.cat

application/vnd.ms-pki.seccat

.cdf

application/x-netcdf

.cdr

application/x-cdr

.cel

application/x-cel

.cer

application/x-x509-ca-cert

.cg4

application/x-g4

.cgm

application/x-cgm

.cit

application/x-cit

.class

java/*

.cml

text/xml

.cmp

application/x-cmp

.cmx

application/x-cmx

.cot

application/x-cot

.crl

application/pkix-crl

.crt

application/x-x509-ca-cert

.csi

application/x-csi

.css

text/css

.cut

application/x-cut

.dbf

application/x-dbf

.dbm

application/x-dbm

.dbx

application/x-dbx

.dcd

text/xml

.dcx

application/x-dcx

.der

application/x-x509-ca-cert

.dgn

application/x-dgn

.dib

application/x-dib

.dll

application/x-msdownload

.doc

application/msword

.dot

application/msword

.drw

application/x-drw

.dtd

text/xml

.dwf

Model/vnd.dwf

.dwf

application/x-dwf

.dwg

application/x-dwg

.dxb

application/x-dxb

.dxf

application/x-dxf

.edn

application/vnd.adobe.edn

.emf

application/x-emf

.eml

message/rfc822

.ent

text/xml

.epi

application/x-epi

.eps

application/x-ps

.eps

application/postscript

.etd

application/x-ebx

.exe

application/x-msdownload

.fax

image/fax

.fdf

application/vnd.fdf

.fif

application/fractals

.fo

text/xml

.frm

application/x-frm

.g4

application/x-g4

.gbr

application/x-gbr

.

application/x-

.gif

image/gif

.gl2

application/x-gl2

.gp4

application/x-gp4

.hgl

application/x-hgl

.hmr

application/x-hmr

.hpg

application/x-hpgl

.hpl

application/x-hpl

.hqx

application/mac-binhex40

.hrf

application/x-hrf

.hta

application/hta

.htc

text/x-component

.htm

text/html

.html

text/html

.htt

text/webviewhtml

.htx

text/html

.icb

application/x-icb

.ico

image/x-icon

.ico

application/x-ico

.iff

application/x-iff

.ig4

application/x-g4

.igs

application/x-igs

.iii

application/x-iphone

.img

application/x-img

.ins

application/x-internet-signup

.isp

application/x-internet-signup

.IVF

video/x-ivf

.java

java/*

.jfif

image/jpeg

.jpe

image/jpeg

.jpe

application/x-jpe

.jpeg

image/jpeg

.jpg

image/jpeg

.jpg

application/x-jpg

.js

application/x-javascript

.jsp

text/html

.la1

audio/x-liquid-file

.lar

application/x-laplayer-reg

.latex

application/x-latex

.lavs

audio/x-liquid-secure

.lbm

application/x-lbm

.lmsff

audio/x-la-lms

.ls

application/x-javascript

.ltr

application/x-ltr

.m1v

video/x-mpeg

.m2v

video/x-mpeg

.m3u

audio/mpegurl

.m4e

video/mpeg4

.mac

application/x-mac

.man

application/x-troff-man

.math

text/xml

.mdb

application/msaccess

.mdb

application/x-mdb

.mfp

application/x-shockwave-flash

.mht

message/rfc822

.mhtml

message/rfc822

.mi

application/x-mi

.mid

audio/mid

.midi

audio/mid

.mil

application/x-mil

.mml

text/xml

.mnd

audio/x-musicnet-download

.mns

audio/x-musicnet-stream

.mocha

application/x-javascript

.movie

video/x-sgi-movie

.mp1

audio/mp1

.mp2

audio/mp2

.mp2v

video/mpeg

.mp3

audio/mp3

.mp4

video/mpeg4

.mpa

video/x-mpg

.mpd

application/vnd.ms-project

.mpe

video/x-mpeg

.mpeg

video/mpg

.mpg

video/mpg

.mpga

audio/rn-mpeg

.mpp

application/vnd.ms-project

.mps

video/x-mpeg

.mpt

application/vnd.ms-project

.mpv

video/mpg

.mpv2

video/mpeg

.mpw

application/vnd.ms-project

.mpx

application/vnd.ms-project

.mtx

text/xml

.mxp

application/x-mmxp

.net

image/pnetvue

.nrf

application/x-nrf

.nws

message/rfc822

.odc

text/x-ms-odc

.out

application/x-out

.p10

application/pkcs10

.p12

application/x-pkcs12

.p7b

application/x-pkcs7-certificates

.p7c

application/pkcs7-mime

.p7m

application/pkcs7-mime

.p7r

application/x-pkcs7-certreqresp

.p7s

application/pkcs7-signature

.pc5

application/x-pc5

.pci

application/x-pci

.pcl

application/x-pcl

.pcx

application/x-pcx

.pdf

application/pdf

.pdf

application/pdf

.pdx

application/vnd.adobe.pdx

.pfx

application/x-pkcs12

.pgl

application/x-pgl

.pic

application/x-pic

.pko

application/vnd.ms-pki.pko

.pl

application/x-perl

.plg

text/html

.pls

audio/scpls

.plt

application/x-plt

.png

image/png

.png

application/x-png

.pot

application/vnd.ms-powerpoint

.ppa

application/vnd.ms-powerpoint

.ppm

application/x-ppm

.pps

application/vnd.ms-powerpoint

.ppt

application/vnd.ms-powerpoint

.ppt

application/x-ppt

.pr

application/x-pr

.prf

application/pics-rules

.prn

application/x-prn

.prt

application/x-prt

.ps

application/x-ps

.ps

application/postscript

.ptn

application/x-ptn

.pwz

application/vnd.ms-powerpoint

.r3t

text/vnd.rn-realtext3d

.ra

audio/vnd.rn-realaudio

.ram

audio/x-pn-realaudio

.ras

application/x-ras

.rat

application/rat-file

.rdf

text/xml

.rec

application/vnd.rn-recording

.red

application/x-red

.rgb

application/x-rgb

.rjs

application/vnd.rn-realsystem-rjs

.rjt

application/vnd.rn-realsystem-rjt

.rlc

application/x-rlc

.rle

application/x-rle

.rm

application/vnd.rn-realmedia

.rmf

application/vnd.adobe.rmf

.rmi

audio/mid

.rmj

application/vnd.rn-realsystem-rmj

.rmm

audio/x-pn-realaudio

.rmp

application/vnd.rn-rn_music_package

.rms

application/vnd.rn-realmedia-secure

.rmvb

application/vnd.rn-realmedia-vbr

.rmx

application/vnd.rn-realsystem-rmx

.rnx

application/vnd.rn-realplayer

.rp

image/vnd.rn-realpix

.rpm

audio/x-pn-realaudio-plugin

.rsml

application/vnd.rn-rsml

.rt

text/vnd.rn-realtext

.rtf

application/msword

.rtf

application/x-rtf

.rv

video/vnd.rn-realvideo

.sam

application/x-sam

.sat

application/x-sat

.sdp

application/sdp

.sdw

application/x-sdw

.sit

application/x-stuffit

.slb

application/x-slb

.sld

application/x-sld

.slk

drawing/x-slk

.smi

application/smil

.smil

application/smil

.smk

application/x-smk

.snd

audio/basic

.sol

text/plain

.sor

text/plain

.spc

application/x-pkcs7-certificates

.spl

application/futuresplash

.spp

text/xml

.ssm

application/streamingmedia

.sst

application/vnd.ms-pki.certstore

.stl

application/vnd.ms-pki.stl

.stm

text/html

.sty

application/x-sty

.svg

text/xml

.swf

application/x-shockwave-flash

.tdf

application/x-tdf

.tg4

application/x-tg4

.tga

application/x-tga

.tif

image/tiff

.tif

application/x-tif

.tiff

image/tiff

.tld

text/xml

.top

drawing/x-top

.torrent

application/x-bittorrent

.tsd

text/xml

.txt

text/plain

.uin

application/x-icq

.uls

text/iuls

.vcf

text/x-vcard

.vda

application/x-vda

.vdx

application/vnd.visio

.vml

text/xml

.vpg

application/x-vpeg005

.vsd

application/vnd.visio

.vsd

application/x-vsd

.vss

application/vnd.visio

.vst

application/vnd.visio

.vst

application/x-vst

.vsw

application/vnd.visio

.vsx

application/vnd.visio

.vtx

application/vnd.visio

.vxml

text/xml

.wav

audio/wav

.wax

audio/x-ms-wax

.wb1

application/x-wb1

.wb2

application/x-wb2

.wb3

application/x-wb3

.wbmp

image/vnd.wap.wbmp

.wiz

application/msword

.wk3

application/x-wk3

.wk4

application/x-wk4

.wkq

application/x-wkq

.wks

application/x-wks

.wm

video/x-ms-wm

.wma

audio/x-ms-wma

.wmd

application/x-ms-wmd

.wmf

application/x-wmf

.wml

text/vnd.wap.wml

.wmv

video/x-ms-wmv

.wmx

video/x-ms-wmx

.wmz

application/x-ms-wmz

.wp6

application/x-wp6

.wpd

application/x-wpd

.wpg

application/x-wpg

.wpl

application/vnd.ms-wpl

.wq1

application/x-wq1

.wr1

application/x-wr1

.wri

application/x-wri

.wrk

application/x-wrk

.ws

application/x-ws

.ws2

application/x-ws

.wsc

text/scriptlet

.wsdl

text/xml

.wvx

video/x-ms-wvx

.xdp

application/vnd.adobe.xdp

.xdr

text/xml

.xfd

application/vnd.adobe.xfd

.xfdf

application/vnd.adobe.xfdf

.xhtml

text/html

.xls

application/vnd.ms-excel

.xls

application/x-xls

.xlw

application/x-xlw

.xml

text/xml

.xpl

audio/scpls

.xq

text/xml

.xql

text/xml

.xquery

text/xml

.xsd

text/xml

.xsl

text/xml

.xslt

text/xml

.xwd

application/x-xwd

.x_b

application/x-x_b

.sis

application/vnd.symbian.install

.sisx

application/vnd.symbian.install

.x_t

application/x-x_t

.ipa

application/vnd.iphone

.apk

application/vnd.android.package-archive

.xap

application/x-silverlight-app

阿里旅行·去啊：机票预订,酒店查询,客栈民宿,旅游度假,门票签证

超实用CSS代码段

超实用HTML代码段

阿里旅行·去啊

超实用CSS代码段

超实用HTML代码段

1.6　利用head元素定义文档头部 7

以下标签都可以添加到 head 部分：

、、、、

1.7　利用body元素定义文档主体 8

文档标题

背景颜色是蓝色的。

1.8　利用base元素定义基底网址 9

利用base元素定义基底网址

图片百度一下

1.9　定义网页在不同显示媒体下的样式 10

1.10　指定外部资源的link元素12

指定外部资源的link元素

body{padding:20px;

}