超实用的HTML代码段（赵荣娇）

第1章　创建HTML文档 1
1.1　HTML文档的基本结构 2

<html>

<head>

   <title>Title of page</title>

</head>

<body>

      This is my first homepage.

      <b>This text is bold</b>

</body>

</html>

<!--

HTML文档中，第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。

在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。

在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。

在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。

在<b>和</b>标签之间的文本会以加粗字体显示。

-->

1.2　HTML文档类型 2

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

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

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

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

常用的 DOCTYPE 声明

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

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

HTML 4.01 Frameset

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

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

XHTML 1.0 Strict

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

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

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

XHTML 1.0 Transitional

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

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

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

XHTML 1.0 Frameset

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

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

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

XHTML 1.1

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

标签	HTML5	HTML 4.01 / XHTML 1.0			XHTML 1.1
标签	HTML5	Transitional	Strict	Frameset	XHTML 1.1
<a>	Yes	Yes	Yes	Yes	Yes
<abbr>	Yes	Yes	Yes	Yes	Yes
<acronym>	No	Yes	Yes	Yes	Yes
<address>	Yes	Yes	Yes	Yes	Yes
<applet>	No	Yes	No	Yes	No
<area>	Yes	Yes	Yes	Yes	No
<article>	Yes	No	No	No	No
<aside>	Yes	No	No	No	No
<audio>	Yes	No	No	No	No
<b>	Yes	Yes	Yes	Yes	Yes
<base>	Yes	Yes	Yes	Yes	Yes
<basefont>	No	Yes	No	Yes	No
<bdi>	Yes	No	No	No	No
<bdo>	Yes	Yes	Yes	Yes	No
<big>	No	Yes	Yes	Yes	Yes
<blockquote>	Yes	Yes	Yes	Yes	Yes
<body>	Yes	Yes	Yes	Yes	Yes
<br>	Yes	Yes	Yes	Yes	Yes
<button>	Yes	Yes	Yes	Yes	Yes
<canvas>	Yes	No	No	No	No
<caption>	Yes	Yes	Yes	Yes	Yes
<center>	No	Yes	No	Yes	No
<cite>	Yes	Yes	Yes	Yes	Yes
<code>	Yes	Yes	Yes	Yes	Yes
<col>	Yes	Yes	Yes	Yes	No
<colgroup>	Yes	Yes	Yes	Yes	No
<command>	Yes	No	No	No	No
<datalist>	Yes	No	No	No	No
<dd>	Yes	Yes	Yes	Yes	Yes
<del>	Yes	Yes	Yes	Yes	No
<details>	Yes	No	No	No	No
<dfn>	Yes	Yes	Yes	Yes	Yes
<dir>	No	Yes	No	Yes	No
<div>	Yes	Yes	Yes	Yes	Yes
<dl>	Yes	Yes	Yes	Yes	Yes
<dt>	Yes	Yes	Yes	Yes	Yes
<em>	Yes	Yes	Yes	Yes	Yes
<embed>	Yes	No	No	No	No
<fieldset>	Yes	Yes	Yes	Yes	Yes
<figcaption>	Yes	No	No	No	No
<figure>	Yes	No	No	No	No
<font>	No	Yes	No	Yes	No
<footer>	Yes	No	No	No	No
<form>	Yes	Yes	Yes	Yes	Yes
<frame>	No	No	No	Yes	No
<frameset>	No	No	No	Yes	No
<head>	Yes	Yes	Yes	Yes	Yes
<header>	Yes	No	No	No	No
<h1> to <h6>	Yes	Yes	Yes	Yes	Yes
<hr>	Yes	Yes	Yes	Yes	Yes
<html>	Yes	Yes	Yes	Yes	Yes
<i>	Yes	Yes	Yes	Yes	Yes
<iframe>	Yes	Yes	No	Yes	No
<img>	Yes	Yes	Yes	Yes	Yes
<input>	Yes	Yes	Yes	Yes	Yes
<ins>	Yes	Yes	Yes	Yes	No
<keygen>	Yes	No	No	No	No
<kbd>	Yes	Yes	Yes	Yes	Yes
<label>	Yes	Yes	Yes	Yes	Yes
<legend>	Yes	Yes	Yes	Yes	Yes
<li>	Yes	Yes	Yes	Yes	Yes
<link>	Yes	Yes	Yes	Yes	Yes
<map>	Yes	Yes	Yes	Yes	No
<mark>	Yes	No	No	No	No
<menu>	Yes	Yes	No	Yes	No
<meta>	Yes	Yes	Yes	Yes	Yes
<meter>	Yes	No	No	No	No
<nav>	Yes	No	No	No	No
<noframes>	No	Yes	No	Yes	No
<noscript>	Yes	Yes	Yes	Yes	Yes
<object>	Yes	Yes	Yes	Yes	Yes
<ol>	Yes	Yes	Yes	Yes	Yes
<optgroup>	Yes	Yes	Yes	Yes	Yes
<option>	Yes	Yes	Yes	Yes	Yes
<output>	Yes	No	No	No	No
<p>	Yes	Yes	Yes	Yes	Yes
<param>	Yes	Yes	Yes	Yes	Yes
<pre>	Yes	Yes	Yes	Yes	Yes
<progress>	Yes	No	No	No	No
<q>	Yes	Yes	Yes	Yes	Yes
<rp>	Yes	No	No	No	No
<rt>	Yes	No	No	No	No
<ruby>	Yes	No	No	No	No
<s>	Yes	Yes	No	Yes	No
<samp>	Yes	Yes	Yes	Yes	Yes
<script>	Yes	Yes	Yes	Yes	Yes
<section>	Yes	No	No	No	No
<select>	Yes	Yes	Yes	Yes	Yes
<small>	Yes	Yes	Yes	Yes	Yes
<source>	Yes	No	No	No	No
<span>	Yes	Yes	Yes	Yes	Yes
<strike>	No	Yes	No	Yes	No
<strong>	Yes	Yes	Yes	Yes	Yes
<style>	Yes	Yes	Yes	Yes	Yes
<sub>	Yes	Yes	Yes	Yes	Yes
<summary>	Yes	No	No	No	No
<sup>	Yes	Yes	Yes	Yes	Yes
<table>	Yes	Yes	Yes	Yes	Yes
<tbody>	Yes	Yes	Yes	Yes	No
<td>	Yes	Yes	Yes	Yes	Yes
<textarea>	Yes	Yes	Yes	Yes	Yes
<tfoot>	Yes	Yes	Yes	Yes	No
<th>	Yes	Yes	Yes	Yes	Yes
<thead>	Yes	Yes	Yes	Yes	No
<time>	Yes	No	No	No	No
<title>	Yes	Yes	Yes	Yes	Yes
<tr>	Yes	Yes	Yes	Yes	Yes
<track>	Yes	No	No	No	No
<tt>	No	Yes	Yes	Yes	Yes
<u>	No	Yes	No	Yes	No
<ul>	Yes	Yes	Yes	Yes	Yes
<var>	Yes	Yes	Yes	Yes	Yes
<video>	Yes	No	No	No	No
<wbr>	Yes	No	No	No	No

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

ISO 语言代码

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

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

<html lang="en">

</html>

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

</html>

Language	ISO 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

<title>Document111</title>

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

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

在 HTML 中，<meta> 标签没有结束标签。

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

提示和注释：

注释：<meta> 标签永远位于 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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="GBK">

        <meta name="data-spm" content="181"/>

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

        <meta name="description" content="阿里旅行·去啊是阿里巴巴旗下的综合性旅游出行服务平台。"/>

        <meta name="keywords" content=" 机票,机票预订,飞机票查询,航班查询,酒店预订,特价酒店,酒店团购,特色客栈,旅游度假,门票,签证,台湾通行证,旅游,旅行,自由行线路,阿里旅行,去啊"/>

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="baidu-site-verification" content="3msybWO0gb" />

        <meta name="360-site-verification" content="4055b6fd1fa7f20118f2076f30703d11" />

        <meta name="google-site-verification" content="MhvMJqzxoa0_Qk5RaNmWqPGYFdlDHKr9x6fMz8Sj0ro" />

        <meta name="sogou_site_verification" content="tI6NirDNqz"/>

        <meta name="viewport" content="width=device-width" />

    </head>

    <body>

        <a href="https://github.com/yinqiao/supercss">超实用CSS代码段</a>

        <a href="https://github.com/yinqiao/superhtml">超实用HTML代码段</a>

    </body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="GBK">

        <meta name="data-spm" content="181"/>

        <title>阿里旅行·去啊</title>

        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

        <meta content="yes" name="apple-mobile-web-app-capable">

        <meta content="black" name="apple-mobile-web-app-status-bar-style">

        <meta name="format-detection" content="telephone=no">

        <meta name="baidu-site-verification" content="h3lsegJFba">

        <meta name="data-spm" content="181.7474825">

        <style type="text/css"></style>

    </head>

    <body>

        <a href="https://github.com/yinqiao/supercss">超实用CSS代码段</a>

        <a href="https://github.com/yinqiao/superhtml">超实用HTML代码段</a>

    </body>

</html>

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

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

HTML <base> 元素

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

<head>

<base href="http://www.w3school.com.cn/images/" />

<base target="_blank" />

</head>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>文档标题</title>

        <style type="text/css"></style>

        <script type="text/javascript"></script>

    </head>

    <body>

        <!-- 这里是文档的内容 -->

    </body>

</html>

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

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

        <meta http-equiv="Content-Language" content="zh-cn" />

        <title>文档标题</title>

    </head>

    <body  bgcolor="blue">

        <h2>背景颜色是蓝色的。</h2>

    </body>

</html>

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

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta http-equiv="Content-Language" content="zh-cn" />

        <title>利用base元素定义基底网址</title>

        <base  href="http://www.w3school.com.cn/i/" />

        <base target="_blank" />

    </head>

    <body >

        <img src="eg_smile.gif" ></img>图片

        <a href="http://www.baidu.com">百度一下</a>

    </body>

</html>

1.9　定义网页在不同显示媒体下的样式 10
1.10　指定外部资源的link元素 12

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>指定外部资源的link元素</title>

        <link rel="stylesheet" type="text/css" href="http://su.bdimg.com/static/superplus/css/super_min_8eec70f2.css">

        <link rel="stylesheet" type="text/css" href="./index.css">

        <style type="text/css">

        body {

            padding: 20px;

        }

        </style>

    </head>

    <body>

        <div class="layout">

            <div id="logo">

                <img hidefocus="true" src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129">

            </div>

        </div>

    </body>

</html>

1.11　添加网站Logo 14
1.12　预先获取资源Link Prefetch 15
1.13　利用******元素定义客户端脚本 16
1.14　添加注释 16
1.15　载入外部脚本库 18
1.16　延迟脚本执行 19
1.17　异步执行脚本 20
1.18　利用no******元素实现脚本的替代内容 24
1.19　HTML属性 25
1.20　为元素指定类或ID名称 25
1.21　为元素添加title属性 27
第2章　头部 meta元素 28
2.1　定义页面关键字 28
2.2　设置页面描述 29
2.3　设定作者信息 30
2.4　限制搜索方式 31
2.5　网页语言与文字 33
2.6　定时跳转页面 34
2.7　设定网页缓存过期时间 35
2.8　禁止从缓存中调用 36
2.9　删除过期的Cookie 38
2.10 设置网页的过渡效果 39
第3章标记文字 44
3.1　标题＜hn＞＜/hn＞ 45
3.2　表示关键字和产品名称＜b＞＜/b＞ 48
3.3　强调＜em＞＜/em＞ 49
3.4　表示外文词语或科技术语＜i＞＜/i＞ 50
3.5　表示重要的文字＜strong＞＜/strong＞ 52
3.6　表示不正确或校正＜s＞＜/s＞ 53
3.7　为文字添加下画线＜u＞＜/u＞ 54
3.8　添加小号字体内容＜small＞＜/small＞ 55
3.9　添加上标＜sub＞＜/sub＞和下标＜sup＞＜/sup＞ 56
3.10　强制换行＜br/＞ 57
3.11　指明可以安全换行的建议位置＜wbr＞ 58
3.12　表示输入和输出＜code＞＜var＞＜samp＞＜kbd＞ 60
3.13　表示缩写＜abbr＞＜/abbr＞ 63
3.14　定义术语＜dfn＞＜/dfn＞ 64
3.15　引用来自他处的内容＜q＞＜/q＞ 66
3.16　引用其他作品的标题＜cite＞＜/cite＞ 67
3.17　表示时间和日期＜time＞＜/time＞ 68
3.18　ruby、rt和rp元素 69
3.19　bdo元素 69
3.20 bdi元素 70
3.21 表示一段一般性的内容＜span＞＜/span＞ 71
3.22 突出显示文本＜mark＞＜/mark＞ 73
第4章显示图像 75
4.1 必须知道的图像格式和压缩形式 75
4.2 图像＜img＞的超简应用 77
4.3 语义化带标题的图片 78
4.4 提前载入图片 79
4.5 图像区域映射 80
4.6 使用base64:URL格式的图片 82
第5章生成超链接 86
5.1 生成指向外部的超链接 87
5.2 使用相对URL 87
5.3 生成页面内超链接 88
5.4 图像链接 90
5.5 电子邮件链接 91
5.6 设定浏览环境 92
5.7 在框架中打开 92
第6章组织文字内容 94
6.1 段落 94
6.2 页面主体的结构化布局 96
6.3 使用预先编排好格式的内容 99
6.4 引用他处内容 101
6.5 添加主题分隔线 103
6.6 将内容组织为列表 104
6.7 输出有顺序关系的内容 104
6.8 使用无序列表输出无序并列的内容 105
6.9 使用自定义列表输出有标题的并列内容 106
6.10 列表项的使用 107
6.11 使用菜单列表 108
6.12 使用下拉列表 109
6.13 在页面中输出对话 110
第7章划分文档结构 112
7.1 添加基本的标题 113
7.2 隐藏子标题hgroup 114
7.3 生成节＜section＞ 115
7.4 为区域添加头部和尾部 117
7.5 添加导航区域 119
7.6 在页面中输出文章 120
7.7 生成附注栏 122
7.8 在页面输出联系人信息 124
7.9 生成详情区域 124
第8章多媒体文件 126
8.1 使用多媒体打造丰富的视觉效果 126
8.2 全面兼容的video 127
8.3 多媒体文件标签 130
8.4 object元素 130
8.5 param元素 132
8.6 嵌入Flash代码 134
8.7 实现Flash全屏播放 135
8.9 文字的滚动 135
8.10 定义媒介源 136
8.11 定义媒介外部文本轨道 136
第9章表格 138
9.1 生成基本的表格 138
9.2 让表格没有凹凸感 142
9.3 添加表头 143
9.4 为表格添加结构 144
9.5 制作不规则的表格 148
9.6 正确地设置表格列 150
9.7 设置表格边框 153
9.8 其他表格设计 157
第10章表单与文件 166
10.1 制作基本表单 166
10.2 自动聚焦 168
10.3 禁用单个input元素 169
10.4 关闭输入框的自动提示功能 171
10.5 关闭输入法 171
10.6 按回车键跳转至下一个输入框 172
10.7 定制input元素 173
10.8 生成隐藏的数据项 175
10.9 输入验证 176
10.10 生成按钮 177
10.11 使用表单外的元素 178
10.12 显示进度 178
10.13 密钥对生成器 179
第11章网页中的框架 180
11.1 在页面中使用****** 180
11.2 设置******透明背景色 182
11.3 让******高度自适应 182
11.4 垂直框架 183
11.5 水平框架 184
11.6 混合框架 184
11.7 使用＜noframes＞标签 185
第12章 HTML 5 Canvas 187
12.1 在页面中使用canvas元素 187
12.2 使用路径和坐标 189
12.3 绘制弧形和圆形 192
12.4 用纯色填充图形 194
12.5 使用渐变色填充 196
12.6 在画布中绘制文本 199
12.7 将画布输出为PNG图片文件 201
12.8 复杂场景使用多层画布 203
12.9 使用requestAnimationFrame制作游戏或动画 203
12.10 如何显示满屏canvas 206
12.11 canvas圆环进度条 207
第13章 HTML 5地理定位 210
13.1 使用navigator对象 210
13.2 获取当前位置 213
13.3 浏览器支持 215
第14章 HTML 5本地存储 216
14.1 在客户端存储数据 216

14.2 检查HTML 5存储支持 217

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

    <meta content="yes" name="apple-mobile-web-app-capable" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <meta name="format-detection" content="telephone=no" />

    <title>第14章</title>

    <style type="text/css">

    </style>

    </head>

<body>

<div class="content">

</div>

<script type="text/javascript">

if(window.localStorage){

    alert('This browser supports localStorage');

}else{

    alert('This browser does NOT support localStorage');

}

</script>

<body>

</body>

</html>

14.3 利用localStorage进行本地存储 217

14.4 利用localStorage存储JSON对象 219
14.5 利用localStorage记录用户表单输入 220
14.6 利用localStorage进行跨文档数据传递 223
14.7 在localStorage中存储图片 225
14.8 在localStorage中存储文件 227
14.9 使用localForage进行离线存储 229
14.10 利用sessionStorage进行本地存储 230
第15章 HTML 5应用缓存 234
15.1 使用cache manifest创建页面缓存 234
15.2 离线Web网页或应用 236
15.3 删除本地缓存 237
15.4 更新缓存文件 238
15.5 使用HTML 5离线应用程序缓存事件 238
15.6 如何失效缓存 242
第16章移动开发 245
16.1 手机上直接电话呼叫或短信 245
16.2 设置iPhone书签栏图标 247
16.3 HTML 5表单 250
16.4 HTML 5相册 252
第17章其他常用代码 255
17.1 让IE支持HTML 5标签 255

<!DOCTYPE html>

<html>

    <head>

        <title>第17章</title>

        <meta charset="UTF-8">

        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

        name="viewport" />

        <meta content="yes" name="apple-mobile-web-app-capable" />

        <meta content="black" name="apple-mobile-web-app-status-bar-style" />

        <meta name="format-detection" content="telephone=no" />

        <style>

        *{margin:0;padding:0;}

        body {background-color:white; color: black; text-align:center;}

        header, footer, nav, section, article {display:block;}

        header {width:100%; background-color:yellow;}

        nav {width:30%; background-color:orange;float:left;}

        section {width:65%; background-color:SpringGreen ; float:right;}

        article {width:70%; margin:2em 10%; background-color:turquoise;}

        footer {width:100%; background-color:pink; clear:both;}

        </style>

        <!--[if IE]>

        <script>

        (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

        </script>

        <![endif]-->

    </head>

    <body>

        <header><h1>让IE支持HTML5元素</h1></header>

        <nav><p>Menu</p></nav>

        <section>

            <p>Section</p>

            <article><p>article 1</p></article>

            <article><p>article 2</p></article>

        </section>

        <footer><p>The footer</p></footer>

    </body>

</html>

17.2 网页自动关闭 258

<!DOCTYPE html>

<html>

    <head>

        <title>网页自动关闭</title>

        <meta charset="UTF-8">

        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

        name="viewport" />

        <meta content="yes" name="apple-mobile-web-app-capable" />

        <meta content="black" name="apple-mobile-web-app-status-bar-style" />

        <meta name="format-detection" content="telephone=no" />

    </head>

    <body onload='setTimeout("mm()",10)'>

    <script>

        function mm(){

            window.opener=null;

            window.close();

        }

    </script>

    </body>

</html>

17.3 地址栏换成自己的图标 259

<!DOCTYPE html>

<html>

    <head>

        <title>地址栏换成自己的图标</title>

        <meta charset="UTF-8">

        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

        name="viewport" />

        <meta content="yes" name="apple-mobile-web-app-capable" />

        <meta content="black" name="apple-mobile-web-app-status-bar-style" />

        <meta name="format-detection" content="telephone=no" />

        <link rel="shortcut icon" href="https://raw.githubusercontent.com/yinqiao/superhtml/master/src/17/img/favicon.ico" type="image/x-icon"/>

    </head>

    <body>

        <h2>地址栏换成自己的图标</h2>

    </body>

</html>

17.4 网页不能另存 259

17.5 禁止查看网页源代码 260

17.6 网页不出现滚动条 261

17.7 设定打开网页的大小 261

<!DOCTYPE html>

<html>

    <head>

        <title>第17章</title>

        <meta charset="UTF-8">

        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

        name="viewport" />

        <meta content="yes" name="apple-mobile-web-app-capable" />

        <meta content="black" name="apple-mobile-web-app-status-bar-style" />

        <meta name="format-detection" content="telephone=no" />

        <link rel="shortcut icon" href="img/favicon.ico?20150412" type="image/x-icon"/>

    </head>

    <body>

        <h2>第17章</h2>

        <h3>设定网页大小</h3>

        <script language="javascript">

            window.open('page.html','newwindow','height=300,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');

        </script>

    </body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <title>第17章</title>

        <meta charset="UTF-8">

        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

        name="viewport" />

        <meta content="yes" name="apple-mobile-web-app-capable" />

        <meta content="black" name="apple-mobile-web-app-status-bar-style" />

        <meta name="format-detection" content="telephone=no" />

        <link rel="shortcut icon" href="img/favicon.ico?20150412" type="image/x-icon"/>

    </head>

    <body>

        <h2>第17章</h2>

        <p>这是被打开的窗口</p>

    </body>

</html>

17.8 变换当前网页的光标

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

<!DOCTYPE html>

<html>

    <head>

        <title>第17章</title>

        <meta charset="UTF-8">

        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

        name="viewport" />

        <meta content="yes" name="apple-mobile-web-app-capable" />

        <meta content="black" name="apple-mobile-web-app-status-bar-style" />

        <meta name="format-detection" content="telephone=no" />

        <link rel="shortcut icon" href="img/favicon.ico?20150412" type="image/x-icon"/>

        <style type="text/css">

            /*这里边的curusor的值可以是以上表中的任何值,或是你自己定义*/

           .a{ cursor:wait }

        </style>

    </head>

    <body>

        <h2>第17章</h2>

        <h3>改变鼠标默认样式</h3>

        <div class="a">超实用HTML代码段</div>

        <div style="cursor:help;">超实用HTML代码段</div>

    </body>

</html>

超实用的HTML代码段（赵荣娇）的更多相关文章

我们为什么要看《超实用的HTML代码段》
不知道自己HTML水平如何,不知道HTML5如何进化?看这张图如果一半以上的你都不会,必须看这本书,阿里一线工程师用代码和功能页面来告诉你每一个技术点. 都会一点,但不知道如何检验自己,看看本书提供 ...
《超实用的HTML代码段》阅读笔记1——HTML5自动聚焦
在页面加载完成后自动将输入焦点定位到需要的元素,用户就可以直接在改元素中进行输入而不需要手动选择它. 通过autofocus的属性就可以指定这种自动聚焦的功能,示例代码如下: <form nam ...
《超实用的JavaScript代码段》—— 读后总结
这本书全是代码,从头到尾跟着坐下来确实收获很多.比那些古板的教科书式的理解更多,不过书中并不是每个例子都做了,有的作者封装的太多,觉得看了收获不多,就没细看——比如模块渐变.有空好好学学这段的代码. ...
前端福利！10个短小却超实用的JavaScript 代码段
JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaS ...
推荐10 个短小却超实用的 JavaScript 代码段
1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.jQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...
超实用的JavaScript代码段
1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.JQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...
超实用的JavaScript代码段 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
超实用的JavaScript代码段 Item4 --发送短信验证码
发送短信验证码实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...
超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝
js 对象浅拷贝和深拷贝 1.浅拷贝拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = { nation:'中国' } var Doctor ...

随机推荐

Pycharm文档模板变量
点击这里查看JetBrains官方英文源文件本篇Blog只是搬运外加大概翻译一下. File template variables A file template can contain varia ...
iview select下拉框的蜜汁小坑
前言最近使用iview的select下拉选择器,遇到一个很神奇的问题:选中下拉框里面的一个值,但是再去点下拉框的时候就只剩刚才选中的数据了.感觉应该是插件把刚才选中的数据当做的搜索条件,所以需要做的 ...
Pydiction补全插件
Pydiction不需要安装,所有没有任何依赖包问题,Pydiction主要包含三个文件. python_pydiction.vim -- Vim plugin that autocompletes ...
for循环语句示例
for循环语句示例一判断/var/目录下所有文件的类型完整脚本 [root@centos73 ~]# cat shell_scripts/filetype.sh #!/bin/bash #Auth ...
如何更改PHPCMS网站后台标题（title）
打开PHPCMS安装目录,选择phpcms 然后选择Languages目录,打开. 打开目录后,选择zh-cn目录,选择admin.lang.php用editPlus打开,将第九行后面的引号中的内容换 ...
Container 技能图谱skill-map
# Container 技能图谱 ## 1. 容器核心 - [Docker](https://www.docker.com/) - [LXC](https://linuxcontainers.org/ ...
python学习笔记：python简介和入门
编程语言各有千秋.C语言适合开发那些追求运行速度.充分发挥硬件性能的程序.而Python是用来编写应用程序的高级编程语言. Python就为我们提供了非常完善的基础代码库,覆盖了网络.文件.GUI.数 ...
前端面试题，js预处理部分小结,函数声明提升和变量声明提升
博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/25/%e5%89%8d%e7%ab%af%e9%9d%a2%e8%af%95%e9% ...
redis demo
方法hset(String key,String field,String value),hmset(String key, Map<String,String> hash),hgetAl ...
备份一下alias喽
# 每次grep都显示出行号示出行号 alias grep="grep -n" # grep反向选择并显示行号显示行号 alias vgrep="grep -n -v&q ...

超实用的HTML代码段（赵荣娇）

超实用的HTML代码段（赵荣娇）的更多相关文章

随机推荐

热门专题