第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
Transitional Strict Frameset
<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>

发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

HTML ASCII 参考手册知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。