第1章 创建HTML文档 1
1.1 HTML文档的基本结构2
Title of page This text is bold1.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
Document1111.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
application/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;
}