前端学习1——HTML5
0、HTML注释
<!--这是一段注释。注释不会在浏览器中显示。-->
1、基本标签
1.1、文档类型
<! DOCTYPE html >
1.2、文档信息
< head>
文档头部
</ head>
1.3、文档元信息
< meta charset = " UTF-8" >
1.4、文档标题
< title>
文档的标题
</ title>
1.5、页面链接默认地址或默认目标
< head>
< base href = " http://www.w3school.com.cn/i/" />
< base target = " _blank" />
</ head>
属性 值 描述 href URL 规定页面中所有相对链接的基准 URL target _blank、_parent、_self、_top、framename 在何处打开页面中所有的链接
1.6、文档主体
< body>
文档的内容... ...
</ body>
1.7、客户端脚本
< script type = " text/javascript" >
document. write ( "Hello World!" )
</ script>
1.8、不支持客户端脚本的替代内容
< noscript> Your browser does not support JavaScript!</ noscript>
2、排版标签
2.1、标题
< h1> 我是标题1</ h1>
< h2> 我是标题2</ h2>
< h3> 我是标题3</ h3>
< h4> 我是标题4</ h4>
< h5> 我是标题5</ h5>
< h6> 我是标题6</ h6>
属性 值 描述 align left、center、right、justify 规定标题中文本的排列(不推荐使用,请使用样式替代它)
2.2、段落
< p> 我是一个段落</ p>
属性 值 描述 align left、center、right、justify 规定段落中文本的对齐方式(不推荐使用,请使用样式替代它)
2.3、分割线
我是一个段落
< hr />
我是一个段落
属性 值 描述 align center、left、right 规定 hr 元素的对齐方式(不推荐使用,请使用样式替代它) noshade noshade 规定 hr 元素的颜色呈现为纯色(不推荐使用,请使用样式替代它) size pixels 规定 hr 元素的高度(不推荐使用,请使用样式替代它) width pixels、% 规定 hr 元素的宽度(不推荐使用,请使用样式替代它)
2.4、换行
我是一个< br /> 段落
3、格式标签
3.1、加粗
< strong> 粗体</ strong>
< b> 粗体</ b>
3.2、倾斜
< em> 倾斜体</ em>
< i> 倾斜体</ i>
3.3、下划线
< ins> 下划线</ ins>
< u> 下划线</ u>
3.4、删除线
< del> 删除线</ del>
< s> 删除线</ s>
3.5、缩写
The < abbr title = " People' s Republic of China" > PRC</ abbr> was founded in 1949.
3.6、强调
< p> Do not forget to buy < mark> milk</ mark> today.</ p>
3.7、文本方向
< bdo dir = " ltr" > 唤醒 充满奇迹的命运</ bdo> < br/>
< bdo dir = " rtl" > 倾听 爱丽丝的旋律</ bdo> < br/>
< bdo dir = " ltr" > 唤醒 充满奇迹的命运</ bdo> < br/>
< bdo dir = " rtl" > 倾听 爱丽丝的< bdi> 旋律</ bdi> </ bdo> < br/>
属性 值 描述 dir ltr、rtl、auto 规定元素内的文本的文本方向。默认值:auto
3.8、小号文本
< p> 唤醒 < small> 充满奇迹的命运</ small> </ p>
3.9、上标文本
倾听< sup> 爱丽丝的旋律</ sup>
3.10、下标文本
倾听< sub> 爱丽丝的旋律</ sub>
3.11、日期/时间
定义日期/时间
3.12、引导换行
< p> 如果想学习 AJAX,那么您必须熟悉 XML< wbr> Http< wbr> Request 对象。</ p>
如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用元素来添加 Word Break Opportunity(单词换行时机)
4、结构标签
4.1、主体
< main>
< h1> Web Browsers</ h1>
< p> Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</ p>
< article>
< h1> Google Chrome</ h1>
< p> Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器,于 2008 年发布。</ p>
</ article>
</ main>
main元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
4.2、文章
< article>
< h1> Internet Explorer 9</ h1>
< p> Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</ p>
</ article>
定义文章,特指一个完整的内容
4.3、节
< section>
< h1> PRC</ h1>
< p> The People's Republic of China was born in 1949...</ p>
</ section>
定义文档中的节,特指一个片段
4.4、页面内容之外的内容
< p> Me and my family visited The Epcot center this summer.</ p>
< aside>
< h4> Epcot Center</ h4>
The Epcot Center is a theme park in Disney World, Florida.
</ aside>
4.5、块元素
< div>
倾听 爱丽丝的旋律
</ div>
定义文档中的节
4.6、行内元素
< span> 倾听 爱丽丝的旋律</ span>
定义文档中的节
4.7、地址/联系信息
< address>
Written by < a href = " mailto:webmaster@example.com" > Donald Duck</ a> .< br>
Visit us at:< br>
Example.com< br>
Box 564, Disneyland< br>
USA
</ address>
定义文档作者或拥有者的联系信息
4.8、引用
< cite> Here is a quotation here is a quotation</ cite>
定义引用
4.9、长引用
< blockquote>
Here is a long quotation here is a long quotation here is a long quotation
</ blockquote>
定义长的引用
4.10、短引用
< q> Here is a short quotation here is a short quotation</ q>
定义短的引用
4.11、进度条/预定义范围内的度量
< progress value = " 22" max = " 100" > </ progress>
< meter value = " 3" min = " 0" max = " 10" > 3/10</ meter> < br>
< meter value = " 0.6" > 60%</ meter>
4.12、ruby注释
<ruby>
青<rt>qing</rt><rp>nosuport</rp>
</ruby>
4.13、不支持ruby元素显示的内容
定义若浏览器不支持 ruby 元素显示的内容
4.14、ruby注释的解释
定义ruby注释的解释
4.15、template
< button onclick = " showContent ( ) " > 显示template内容</ button>
< template>
< h2> 半壶纱</ h2>
< img src = " img.png" width = " 214" height = " 204" >
</ template>
< script>
function showContent ( ) {
var temp = document. getElementsByTagName ( "template" ) [ 0 ] ;
var clon = temp. content. cloneNode ( true ) ;
document. body. appendChild ( clon) ;
}
</ script>
template标记用作容纳页面加载时对用户隐藏的HTML内容的容器
4.16、元素的细节
< details>
< summary> Copyright 2011.</ summary>
< p> All pages and graphics on this web site are the property of W3School.</ p>
</ details>
4.17、元素的细节的标题
< details>
< summary> Copyright 2011.</ summary>
< p> All pages and graphics on this web site are the property of W3School.</ p>
</ details>
4.18、dialog
对话框/窗口
4.19、data
< ul>
< li> < data value = " 21053" > 圣女果</ data> </ li>
< li> < data value = " 21054" > 牛肉番茄</ data> </ li>
< li> < data value = " 21055" > 零食番茄</ data> </ li>
</ ul>
为数据处理器提供了机器可读的值,又为浏览器中的渲染提供了人类可读的值
5、机器标签
5.1、代码
< code> 一段电脑代码 print("Hello World")</ code>
通常只是把文本变成等宽字体,但它暗示着这段文本是源程序代码
5.2、特殊术语
< dfn> print("Hello World")</ dfn>
5.3、键盘输入
< h1> 键盘输入</ h1>
< p> Press < kbd> Ctrl</ kbd> +< kbd> C</ kbd> to copy the text.</ p>
5.4、预格式文本
< pre> < !DOCTYPE html>
< html lang=" en" >
< head>
< meta charset=" UTF-8" >
< title> Title< /title>
< /head>
< body>
< h1> Hello,world!< /h1>
< /body>
< /html> </ pre>
5.5、样本文本
< samp> 计算机样本</ samp>
5.6、var
定义变量。您可以将此标签与
及 标签配合使用
6、图像标签
6.1、图片
< img src = " ./img.png" alt = " 图像无法显示时显示的文字" title = " 鼠标悬停显示的文字" >
6.2、图像映射
< img src = " planets.jpg" border = " 0" usemap = " #planetmap" alt = " Planets" />
< map name = " planetmap" id = " planetmap" >
< area shape = " circle" coords = " 180,139,14" href = " venus.html" alt = " Venus" />
< area shape = " circle" coords = " 129,161,10" href = " mercur.html" alt = " Mercury" />
< area shape = " rect" coords = " 0,0,110,260" href = " sun.html" alt = " Sun" />
</ map>
6.3、图像区域
< img src = " planets.jpg" border = " 0" usemap = " #planetmap" alt = " Planets" />
< map name = " planetmap" id = " planetmap" >
< area shape = " circle" coords = " 180,139,14" href = " venus.html" alt = " Venus" />
< area shape = " circle" coords = " 129,161,10" href = " mercur.html" alt = " Mercury" />
< area shape = " rect" coords = " 0,0,110,260" href = " sun.html" alt = " Sun" />
</ map>
属性 值 描述 coords 坐标值 定义可点击区域(对鼠标敏感的区域)的坐标。 download filename 指定当用户单击超链接时将下载目标。 href URL 定义此区域的目标 URL。 hreflang language_code 规定区域中目标 URL 的语言。 media media query 规定目标 URL 优化的媒体/设备。 nohref nohref 从图像映射排除某个区域。 shape default、rect、circ、poly 定义区域的形状。 target _blank、_parent、_self、_top 规定在何处打开 href 属性指定的目标 URL。 type media_type 规定目标 URL 的 Internet 媒体类型。
6.4、canvas
< canvas id = " myCanvas" > </ canvas>
< script type = " text/javascript" >
var canvas= document. getElementById ( 'myCanvas' ) ;
var ctx= canvas. getContext ( '2d' ) ;
ctx. fillStyle= '#FF0000' ;
ctx. fillRect ( 0 , 0 , 80 , 100 ) ;
</ script>
属性 值 描述 height pixels 设置 canvas 的高度。 width pixels 设置 canvas 的宽度。
6.5、figure
< figure>
< figcaption> 黄浦江上的的卢浦大桥</ figcaption>
< img src = " shanghai_lupu_bridge.jpg" width = " 350" height = " 234" />
</ figure>
6.6、figcaption
< figure>
< figcaption> 黄浦江上的的卢浦大桥</ figcaption>
< img src = " shanghai_lupu_bridge.jpg" width = " 350" height = " 234" />
</ figure>
6.7、svg
< svg width = " 100" height = " 100" >
< circle cx = " 50" cy = " 50" r = " 40" stroke = " green" stroke-width = " 4" fill = " yellow" />
</ svg>
7、音频标签
7.1、音频
< audio src = " someaudio.wav" >
您的浏览器不支持 audio 标签。
</ audio>
属性 值 描述 autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。 controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。 loop loop 如果出现该属性,则每当音频结束时重新开始播放。 muted muted 规定视频输出应该被静音。 preload preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 src url 要播放的音频的 URL。
7.2、源
< audio controls >
< source src = " horse.ogg" type = " audio/ogg" >
< source src = " horse.mp3" type = " audio/mpeg" >
Your browser does not support the audio element.
</ audio>
7.3、视频
< video src = " movie.ogg" controls = " controls" >
您的浏览器不支持 video 标签。
</ video>
属性 值 描述 autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。 controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。 height pixels 设置视频播放器的高度。 loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。 muted muted 规定视频的音频输出应该被静音。 poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 src url 要播放的视频的 URL。 width pixels 设置视频播放器的宽度。
7.4、字幕
< video width = " 320" height = " 240" controls = " controls" >
< source src = " forrest_gump.mp4" type = " video/mp4" />
< source src = " forrest_gump.ogg" type = " video/ogg" />
< track kind = " subtitles" src = " subs_chi.srt" srclang = " zh" label = " Chinese" >
< track kind = " subtitles" src = " subs_eng.srt" srclang = " en" label = " English" >
</ video>
属性 值 描述 default default 规定该轨道是默认的,假如没有选择任何轨道。 kind captions、chapters、descriptions、metadata、subtitles 表示轨道属于什么文本类型。 label label 轨道的标签或标题。 src url 轨道的 URL。 srclang language_code 轨道的语言,若 kind 属性值是 “subtitles”,则该属性必需的。
8、列表标签
8.1、有序列表
< ol>
< li> 我是有序列表里的li</ li>
< li> 我是有序列表里的li</ li>
< li> 我是有序列表里的li</ li>
< li> 我是有序列表里的li</ li>
< li> 我是有序列表里的li</ li>
< li> 我是有序列表里的li</ li>
</ ol>
属性 值 描述 reversed reversed 规定列表顺序为降序。(9,8,7…) start number 规定有序列表的起始值。 type 1、A、a、I、i 规定在列表中使用的标记类型。
8.2、无序列表
< ul>
< li> 我是有序列表里的li</ li>
< li> 我是有序列表里的li</ li>
< li> 我是有序列表里的li</ li>
< li> 我是有序列表里的li</ li>
< li> 我是有序列表里的li</ li>
< li> 我是有序列表里的li</ li>
</ ul>
8.3、列表dl、dt、dd
< dl>
< dt> 计算机</ dt>
< dd> 用来计算的仪器 ... ...</ dd>
< dt> 显示器</ dt>
< dd> 以视觉方式显示信息的装置 ... ...</ dd>
</ dl>
9、导航标签
9.1、链接
< a href = " http://www.baidu.com.cn" > 百度</ a>
属性 值 描述 download filename 规定被下载的超链接目标。 href URL 规定链接指向的页面的 URL。 hreflang language_code 规定被链接文档的语言。 media media_query 规定被链接文档是为何种媒介/设备优化的。 ping list_of_URLs 规定以空格分隔的 URL 列表,当点击链接时,浏览器将发送带有正文 ping 的 post 请求(在后台)。通常用于跟踪。 rel text 规定当前文档与被链接文档之间的关系。 target _blank_parent_self_topframename 规定在何处打开链接文档。 type MIME type 规定被链接文档的的 MIME 类型。
9.2、文档与外部资源的关系
< head>
< link rel = " stylesheet" type = " text/css" href = " theme.css" />
</ head>
属性 值 描述 href URL 规定被链接文档的位置。 hreflang language_code 规定被链接文档中文本的语言。 media media_query 规定被链接文档将被显示在什么设备上。 referrerpolicy no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url 规定在获取资源时要使用的引荐来源信息。 rel alternateauthorhelpiconlicencenextpingbackprefetchprevsearchsidebarstylesheettag 规定当前文档与被链接文档之间的关系。 sizes heightxwidth any规定被链接资源的尺寸。仅适用于 rel=“icon”。 type MIME_type 规定被链接文档的 MIME 类型。
9.3、导航
< nav>
< a href = " index.asp" > Home</ a>
< a href = " html5_meter.asp" > Previous</ a>
< a href = " html5_noscript.asp" > Next</ a>
</ nav>
10、表格标签
10.1、表格
< table border = " 1" >
< tr>
< th> Month</ th>
< th> Savings</ th>
</ tr>
< tr>
< td> January</ td>
< td> $100</ td>
</ tr>
</ table>
属性 值 描述 border pixels 规定表格边框的宽度。 cellpadding pixels、% 规定单元边沿与其内容之间的空白。 cellspacing pixels、% 规定单元格之间的空白。 frame void、above、below、hsides、lhs、rhs、vsides、box、border 规定外侧边框的哪个部分是可见的。 rules none、groups、rows、cols、all 规定内侧边框的哪个部分是可见的。 summary text 规定表格的摘要。 width %、pixels 规定表格的宽度。
10.2、表格标题
< table border = " 1" >
< caption> Monthly savings</ caption>
< tr>
< th> Month</ th>
< th> Savings</ th>
</ tr>
< tr>
< td> January</ td>
< td> $100</ td>
</ tr>
</ table>
10.3、表格表头、表注、主体
< table border = " 1" >
< thead>
< tr>
< th> Month</ th>
< th> Savings</ th>
</ tr>
</ thead>
< tfoot>
< tr>
< td> Sum</ td>
< td> $180</ td>
</ tr>
</ tfoot>
< tbody>
< tr>
< td> January</ td>
< td> $100</ td>
</ tr>
< tr>
< td> February</ td>
< td> $80</ td>
</ tr>
</ tbody>
</ table>
顺序:thead、tfoot、tbody
属性 值 描述 align right、left、center、justify 定义 thead 元素中内容的对齐方式。 valign topmiddlebottombaseline 规定 thead 元素中内容的垂直对齐方式。
10.4、表格的行
< table border = " 1" >
< tr>
< th> Month</ th>
< th> Savings</ th>
</ tr>
< tr>
< td> January</ td>
< td> $100</ td>
</ tr>
</ table>
10.5、表头单元格
< table border = " 1" >
< tr>
< th> Month</ th>
< th> Savings</ th>
</ tr>
< tr>
< td> January</ td>
< td> $100</ td>
</ tr>
</ table>
10.6、单元格
< table border = " 1" >
< tr>
< th> Month</ th>
< th> Savings</ th>
</ tr>
< tr>
< td> January</ td>
< td> $100</ td>
</ tr>
</ table>
11、表单标签
11.1、表单
< form action = " form_action.asp" method = " get" >
< p> First name: < input type = " text" name = " fname" /> </ p>
< p> Last name: < input type = " text" name = " lname" /> </ p>
< input type = " submit" value = " Submit" />
</ form>
属性 值 描述 action URL 规定当提交表单时向何处发送表单数据。 autocomplete on、off 规定是否启用表单的自动完成功能。 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。 enctype 见下表 规定在发送表单数据之前如何对其进行编码。 method get、post 规定用于发送 form-data 的 HTTP 方法。 novalidate novalidate 如果使用该属性,则提交表单时不进行验证。 target _blank、_self、_parent、_top 规定在何处打开 action URL。
enctype
值 描述 application/x-www-form-urlencoded 在发送前编码所有字符(默认) multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。 text/plain 空格转换为 “+” 加号,但不对特殊字符编码。
11.2、控件
< form action = " form_action.asp" method = " get" >
First name: < input type = " text" name = " fname" />
Last name: < input type = " text" name = " lname" />
< input type = " submit" value = " Submit" />
</ form>
属性 值 描述 accept mime_type 规定通过文件上传来提交的文件的类型。 alt text 定义图像输入的替代文本。 autocomplete on、off 规定是否使用输入字段的自动完成功能。 autofocus autofocus 规定输入字段在页面加载时是否获得焦点。(不适用于 type=“hidden”) checked checked 规定此 input 元素首次加载时应当被选中。 dirname inputname .dir规定将提交的文本方向。 disabled disabled 当 input 元素加载时禁用此元素。 form formname 规定输入字段所属的一个或多个表单。 formaction URL 覆盖表单的 action 属性。(适用于 type=“submit” 和 type=“image”) formenctype 即enctype 覆盖表单的 enctype 属性。(适用于 type=“submit” 和 type=“image”) formmethod get、post 覆盖表单的 method 属性。(适用于 type=“submit” 和 type=“image”) formnovalidate formnovalidate 覆盖表单的 novalidate 属性。如果使用该属性,则提交表单时不进行验证。 formtarget _blank、_self、_parent、_top 覆盖表单的 target 属性。(适用于 type=“submit” 和 type=“image”) height pixels、% 定义 input 字段的高度。(适用于 type=“image”) list datalist-id 引用包含输入字段的预定义选项的 datalist 。 max number、date 规定输入字段的最大值。请与 “min” 属性配合使用,来创建合法值的范围。 maxlength number 规定输入字段中的字符的最大长度。 min number、date 规定输入字段的最小值。请与 “max” 属性配合使用,来创建合法值的范围。 minlength number 规定输入字段中所需的最小字符数。 multiple multiple 如果使用该属性,则允许一个以上的值。 name field_name 定义 input 元素的名称。 pattern regexp_pattern 规定输入字段的值的模式或格式。例如 pattern=“[0-9]” 表示输入值必须是 0 与 9 之间的数字。 placeholder text 规定帮助用户填写输入字段的提示。 readonly readonly 规定输入字段为只读。 required required 指示输入字段的值是必需的。 size number_of_char 定义输入字段的宽度。 src URL 定义以提交按钮形式显示的图像的 URL。 step number 规定输入字的的合法数字间隔。 type button、checkbox、file、hidden、image、password、radio、reset、submit、text 规定 input 元素的类型。 value value 规定 input 元素的值。 width pixels、% 定义 input 字段的宽度。(适用于 type=“image”)
list
< form action = " demo_form.asp" >
Webpage: < input type = " url" list = " url_list" name = " link" />
< datalist id = " url_list" >
< option label = " W3Schools" value = " http://www.w3schools.com" />
< option label = " Google" value = " http://www.google.com" />
< option label = " Microsoft" value = " http://www.microsoft.com" />
</ datalist>
< input type = " submit" />
</ form>
11.3、文本域
< textarea rows = " 3" cols = " 20" >
倘若我心中的山水,你眼中都看到
</ textarea>
属性 值 描述 autofocus autofocus 规定在页面加载后文本区域自动获得焦点。 cols number 规定文本区内的可见宽度。 dirname textareaname .dir规定被提交的 textarea 的文本方向。 disabled disabled 规定禁用该文本区。 form form_id 规定文本区域所属的一个或多个表单。 maxlength number 规定文本区域的最大字符数。 name name_of_textarea 规定文本区的名称。 placeholder text 规定描述文本区域预期值的简短提示。 readonly readonly 规定文本区为只读。 required required 规定文本区域是必填的。 rows number 规定文本区内的可见行数。 wrap hardsoft 规定当在表单中提交时,文本区域中的文本如何换行。。
wrap
值 描述 soft 当在表单中提交时,textarea 中的文本不换行。默认值。 hard 当在表单中提交时,textarea 中的文本换行(包含换行符)。当使用 “hard” 时,必须规定 cols 属性。
11.4、按钮
< button type = " button" > Click Me!</ button>
属性 值 描述 autofocus autofocus 规定当页面加载时按钮应当自动地获得焦点。 disabled disabled 规定应该禁用该按钮。 form form_name 规定按钮属于一个或多个表单。 formaction url 覆盖 form 元素的 action 属性。**注释:**该属性与 type=“submit” 配合使用。 formenctype 即enctype 覆盖 form 元素的 enctype 属性。**注释:**该属性与 type=“submit” 配合使用。 formmethod get、post 覆盖 form 元素的 method 属性。**注释:**该属性与 type=“submit” 配合使用。 formnovalidate formnovalidate 覆盖 form 元素的 novalidate 属性。**注释:**该属性与 type=“submit” 配合使用。 formtarget _blank、_self、_parent、_top 覆盖 form 元素的 target 属性。**注释:**该属性与 type=“submit” 配合使用。 name button_name 规定按钮的名称。 type button、reset、submit 规定按钮的类型。 value text 规定按钮的初始值。可由脚本进行修改。
11.5、下拉列表
< select>
< option value = " volvo" > Volvo</ option>
< option value = " saab" > Saab</ option>
< option value = " opel" > Opel</ option>
< option value = " audi" > Audi</ option>
</ select>
属性 值 描述 autofocus autofocus 规定在页面加载后文本区域自动获得焦点。 disabled disabled 规定禁用该下拉列表。 form form_id 规定文本区域所属的一个或多个表单。 multiple multiple 规定可选择多个选项。 name name 规定下拉列表的名称。 required required 规定文本区域是必填的。 size number 规定下拉列表中可见选项的数目。
11.6、选项组、选项
< select>
< optgroup label = " Swedish Cars" >
< option value = " volvo" > Volvo</ option>
< option value = " saab" > Saab</ option>
</ optgroup>
< optgroup label = " German Cars" >
< option value = " mercedes" > Mercedes</ option>
< option value = " audi" > Audi</ option>
</ optgroup>
</ select>
属性 值 描述 label text 为选项组规定描述。 disabled disabled 规定禁用该选项组。
11.7、控件标注
< form>
< label for = " male" > Male</ label>
< input type = " radio" name = " sex" id = " male" />
< br />
< label for = " female" > Female</ label>
< input type = " radio" name = " sex" id = " female" />
</ form>
属性 值 描述 for id 规定 label 绑定到哪个表单元素。 form formid 规定 label 字段所属的一个或多个表单。
11.8、边框、标题
< form>
< fieldset>
< legend> health information</ legend>
height: < input type = " text" />
weight: < input type = " text" />
</ fieldset>
</ form>
属性 值 描述 disabled disabled 规定应该禁用 fieldset。 form form_id 规定 fieldset 所属的一个或多个表单。 name value 规定 fieldset 的名称。
11.9、datalist
< input id = " myCar" list = " cars" />
< datalist id = " cars" >
< option value = " BMW" >
< option value = " Ford" >
< option value = " Volvo" >
</ datalist>
12、其他
12.1、内联框架
iframe 元素会创建包含另外一个文档的内联框架(即行内框架),尽量使用动态语言的include来替代。
12.2、样式
< style type = " text/css" >
h1 {
color : red;
}
p {
color : blue;
}
</ style>
附录一、全局属性
属性 描述 accesskey 规定激活元素的快捷键。 class 规定元素的一个或多个类名(引用样式表中的类)。 contenteditable 规定元素内容是否可编辑。 contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 data-* 用于存储页面或应用程序的私有定制数据。 dir 规定元素中内容的文本方向。 draggable 规定元素是否可拖动。 dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。 hidden 规定元素仍未或不再相关。 [id 规定元素的唯一 id。 [lang 规定元素内容的语言。 spellcheck 规定是否对元素进行拼写和语法检查。 style 规定元素的行内 CSS 样式。 tabindex 规定元素的 tab 键次序。 title 规定有关元素的额外信息。 translate 规定是否应该翻译元素内容。
附录二、事件
1、Window事件
属性 值 描述 onafterprint script 文档打印之后运行的脚本。 onbeforeprint script 文档打印之前运行的脚本。 onbeforeunload script 文档卸载之前运行的脚本。 onerror script 在错误发生时运行的脚本。 onhaschange script 当文档已改变时运行的脚本。 onload script 页面结束加载之后触发。 onmessage script 在消息被触发时运行的脚本。 onoffline script 当文档离线时运行的脚本。 ononline script 当文档上线时运行的脚本。 onpagehide script 当窗口隐藏时运行的脚本。 onpageshow script 当窗口成为可见时运行的脚本。 onpopstate script 当窗口历史记录改变时运行的脚本。 onredo script 当文档执行撤销(redo)时运行的脚本。 onresize script 当浏览器窗口被调整大小时触发。 onstorage script 在 Web Storage 区域更新后运行的脚本。 onundo script 在文档执行 undo 时运行的脚本。 onunload script 一旦页面已下载时触发(或者浏览器窗口已被关闭)。
2、表单事件
属性 值 描述 onblur script 元素失去焦点时运行的脚本。 onchange script 在元素值被改变时运行的脚本。 onfocus script 当元素获得焦点时运行的脚本。 onformchange script 在表单改变时运行的脚本。 onforminput script 当表单获得用户输入时运行的脚本。 oninput script 当元素获得用户输入时运行的脚本。 oninvalid script 当元素无效时运行的脚本。 onselect script 在元素中文本被选中后触发。 onsubmit script 在提交表单时触发。
3、键盘事件
属性 值 描述 onkeydown script 在用户按下按键时触发。 onkeypress script 在用户敲击按钮时触发。 onkeyup script 当用户释放按键时触发。
4、鼠标事件
属性 值 描述 onclick script 元素上发生鼠标点击时触发。 ondblclick script 元素上发生鼠标双击时触发。 ondrag script 元素被拖动时运行的脚本。 ondragend script 在拖动操作末端运行的脚本。 ondragenter script 当元素元素已被拖动到有效拖放区域时运行的脚本。 ondragleave script 当元素离开有效拖放目标时运行的脚本。 ondragover script 当元素在有效拖放目标上正在被拖动时运行的脚本。 ondragstart script 在拖动操作开端运行的脚本。 ondrop script 当被拖元素正在被拖放时运行的脚本。 onmousedown script 当元素上按下鼠标按钮时触发。 onmousemove script 当鼠标指针移动到元素上时触发。 onmouseout script 当鼠标指针移出元素时触发。 onmouseover script 当鼠标指针移动到元素上时触发。 onmouseup script 当在元素上释放鼠标按钮时触发。 onmousewheel script 当鼠标滚轮正在被滚动时运行的脚本。 onscroll script 当元素滚动条被滚动时运行的脚本。
5、媒体事件
属性 值 描述 onabort script 在退出时运行的脚本。 oncanplay script 当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。 oncanplaythrough script 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。 ondurationchange script 当媒介长度改变时运行的脚本。 onemptied script 当发生故障并且文件突然不可用时运行的脚本(比如连接意外断开时)。 onended script 当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。 onerror script 当在文件加载期间发生错误时运行的脚本。 onloadeddata script 当媒介数据已加载时运行的脚本。 onloadedmetadata script 当元数据(比如分辨率和时长)被加载时运行的脚本。 onloadstart script 在文件开始加载且未实际加载任何数据前运行的脚本。 onpause script 当媒介被用户或程序暂停时运行的脚本。 onplay script 当媒介已就绪可以开始播放时运行的脚本。 onplaying script 当媒介已开始播放时运行的脚本。 onprogress script 当浏览器正在获取媒介数据时运行的脚本。 onratechange script 每当回放速率改变时运行的脚本(比如当用户切换到慢动作或快进模式)。 onreadystatechange script 每当就绪状态改变时运行的脚本(就绪状态监测媒介数据的状态)。 onseeked script 当 seeking 属性设置为 false(指示定位已结束)时运行的脚本。 onseeking script 当 seeking 属性设置为 true(指示定位是活动的)时运行的脚本。 onstalled script 在浏览器不论何种原因未能取回媒介数据时运行的脚本。 onsuspend script 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。 ontimeupdate script 当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。 onvolumechange script 每当音量改变时(包括将音量设置为静音)时运行的脚本。 onwaiting script 当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本
附录三、颜色
英文代码 形象描述 十六进制 RGB LightPink 浅粉红 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 Crimson 猩红 #DC143C 220,20,60 LavenderBlush 脸红的淡紫色 #FFF0F5 255,240,245 PaleVioletRed 苍白的紫罗兰红色 #DB7093 219,112,147 HotPink 热情的粉红 #FF69B4 255,105,180 DeepPink 深粉色 #FF1493 255,20,147 MediumVioletRed 适中的紫罗兰红色 #C71585 199,21,133 Orchid 兰花的紫色 #DA70D6 218,112,214 Thistle 蓟 #D8BFD8 216,191,216 plum 李子 #DDA0DD 221,160,221 Violet 紫罗兰 #EE82EE 238,130,238 Magenta 洋红 #FF00FF 255,0,255 Fuchsia 灯笼海棠(紫红色) #FF00FF 255,0,255 DarkMagenta 深洋红色 #8B008B 139,0,139 Purple 紫色 #800080 128,0,128 MediumOrchid 适中的兰花紫 #BA55D3 186,85,211 DarkVoilet 深紫罗兰色 #9400D3 148,0,211 DarkOrchid 深兰花紫 #9932CC 153,50,204 Indigo 靛青 #4B0082 75,0,130 BlueViolet 深紫罗兰的蓝色 #8A2BE2 138,43,226 MediumPurple 适中的紫色 #9370DB 147,112,219 MediumSlateBlue 适中的板岩暗蓝灰色 #7B68EE 123,104,238 SlateBlue 板岩暗蓝灰色 #6A5ACD 106,90,205 DarkSlateBlue 深岩暗蓝灰色 #483D8B 72,61,139 Lavender 熏衣草花的淡紫色 #E6E6FA 230,230,250 GhostWhite 幽灵的白色 #F8F8FF 248,248,255 Blue 纯蓝 #0000FF 0,0,255 MediumBlue 适中的蓝色 #0000CD 0,0,205 MidnightBlue 午夜的蓝色 #191970 25,25,112 DarkBlue 深蓝色 #00008B 0,0,139 Navy 海军蓝 #000080 0,0,128 RoyalBlue 皇家蓝 #4169E1 65,105,225 CornflowerBlue 矢车菊的蓝色 #6495ED 100,149,237 LightSteelBlue 淡钢蓝 #B0C4DE 176,196,222 LightSlateGray 浅石板灰 #778899 119,136,153 SlateGray 石板灰 #708090 112,128,144 DoderBlue 道奇蓝 #1E90FF 30,144,255 AliceBlue 爱丽丝蓝 #F0F8FF 240,248,255 SteelBlue 钢蓝 #4682B4 70,130,180 LightSkyBlue 淡蓝色 #87CEFA 135,206,250 SkyBlue 天蓝色 #87CEEB 135,206,235 DeepSkyBlue 深天蓝 #00BFFF 0,191,255 LightBLue 淡蓝 #ADD8E6 173,216,230 PowDerBlue 火药蓝 #B0E0E6 176,224,230 CadetBlue 军校蓝 #5F9EA0 95,158,160 Azure 蔚蓝色 #F0FFFF 240,255,255 LightCyan 淡青色 #E1FFFF 225,255,255 PaleTurquoise 苍白的绿宝石 #AFEEEE 175,238,238 Cyan 青色 #00FFFF 0,255,255 Aqua 水绿色 #D4F2E7 212,242,231 DarkTurquoise 深绿宝石 #00CED1 0,206,209 DarkSlateGray 深石板灰 #2F4F4F 47,79,79 DarkCyan 深青色 #008B8B 0,139,139 Teal 水鸭色 #008080 0,128,128 MediumTurquoise 适中的绿宝石 #48D1CC 72,209,204 LightSeaGreen 浅海洋绿 #20B2AA 32,178,170 Turquoise 绿宝石 #40E0D0 64,224,208 Auqamarin 绿玉\碧绿色 #7FFFAA 127,255,170 MediumAquamarine 适中的碧绿色 #00FA9A 0,250,154 MediumSpringGreen 适中的春天的绿色 #00FF7F 0,255,127 MintCream 薄荷奶油 #F5FFFA 245,255,250 SpringGreen 春天的绿色 #3CB371 60,179,113 SeaGreen 海洋绿 #2E8B57 46,139,87 Honeydew 蜂蜜 #F0FFF0 240,255,240 LightGreen 淡绿色 #90EE90 144,238,144 PaleGreen 苍白的绿色 #98FB98 152,251,152 DarkSeaGreen 深海洋绿 #8FBC8F 143,188,143 LimeGreen 酸橙绿 #32CD32 50,205,50 Lime 酸橙色 #00FF00 0,255,0 ForestGreen 森林绿 #228B22 34,139,34 Green 纯绿 #008000 0,128,0 DarkGreen 深绿色 #006400 0,100,0 Chartreuse 查特酒绿 #7FFF00 127,255,0 LawnGreen 草坪绿 #7CFC00 124,252,0 GreenYellow 绿黄色 #ADFF2F 173,255,47 OliveDrab 橄榄土褐色 #556B2F 85,107,47 Beige 米色(浅褐色) #F5F5DC 245,245,220 LightGoldenrodYellow 浅秋麒麟黄 #FAFAD2 250,250,210 Ivory 象牙 #FFFFF0 255,255,240 LightYellow 浅黄色 #FFFFE0 255,255,224 Yellow 纯黄 #FFFF00 255,255,0 Olive 橄榄 #808000 128,128,0 DarkKhaki 深卡其布 #BDB76B 189,183,107 LemonChiffon 柠檬薄纱 #FFFACD 255,250,205 PaleGodenrod 灰秋麒麟 #EEE8AA 238,232,170 Khaki 卡其布 #F0E68C 240,230,140 Gold 金 #FFD700 255,215,0 Cornislk 玉米色 #FFF8DC 255,248,220 GoldEnrod 秋麒麟 #DAA520 218,165,32 FloralWhite 花的白色 #FFFAF0 255,250,240 OldLace 老饰带 #FDF5E6 253,245,230 Wheat 小麦色 #F5DEB3 245,222,179 Moccasin 鹿皮鞋 #FFE4B5 255,228,181 Orange 橙色 #FFA500 255,165,0 PapayaWhip 番木瓜 #FFEFD5 255,239,213 BlanchedAlmond 漂白的杏仁 #FFEBCD 255,235,205 NavajoWhite 纳瓦霍白 #FFDEAD 255,222,173 AntiqueWhite 古代的白色 #FAEBD7 250,235,215 Tan 晒黑 #D2B48C 210,180,140 BrulyWood 结实的树 #DEB887 222,184,135 Bisque (浓汤)乳脂,番茄等 #FFE4C4 255,228,196 DarkOrange 深橙色 #FF8C00 255,140,0 Linen 亚麻布 #FAF0E6 250,240,230 Peru 秘鲁 #CD853F 205,133,63 PeachPuff 桃色 #FFDAB9 255,218,185 SandyBrown 沙棕色 #F4A460 244,164,96 Chocolate 巧克力 #D2691E 210,105,30 SaddleBrown 马鞍棕色 #8B4513 139,69,19 SeaShell 海贝壳 #FFF5EE 255,245,238 Sienna 黄土赭色 #A0522D 160,82,45 LightSalmon 浅鲜肉(鲑鱼)色 #FFA07A 255,160,122 Coral 珊瑚 #FF7F50 255,127,80 OrangeRed 橙红色 #FF4500 255,69,0 DarkSalmon 深鲜肉(鲑鱼)色 #E9967A 233,150,122 Tomato 番茄 #FF6347 255,99,71 MistyRose 薄雾玫瑰 #FFE4E1 255,228,225 Salmon 鲜肉(鲑鱼)色 #FA8072 250,128,114 Snow 雪 #FFFAFA 255,250,250 LightCoral 淡珊瑚色 #F08080 240,128,128 RosyBrown 玫瑰棕色 #BC8F8F 188,143,143 IndianRed 印度红 #CD5C5C 205,92,92 Red 纯红 #FF0000 255,0,0 Brown 棕色 #A52A2A 165,42,42 FireBrick 耐火砖 #B22222 178,34,34 DarkRed 深红色 #8B0000 139,0,0 Maroon 栗色 #800000 128,0,0 White 纯白 #FFFFFF 255,255,255 WhiteSmoke 白烟 #F5F5F5 245,245,245 Gainsboro 亮灰色 #DCDCDC 220,220,220 LightGrey 浅灰色 #D3D3D3 211,211,211 Silver 银白色 #C0C0C0 192,192,192 DarkGray 深灰色 #A9A9A9 169,169,169 Gray 灰色 #808080 128,128,128 DimGray 暗淡的灰色 #696969 105,105,105 Black 纯黑 #000000 0,0,0
附录四、表情
表情 十进制 (dec) 十六进制(Hex) 😀 😀 F600; 😁 😁 F601; 😂 😂 F602; 😃 😃 F603; 😄 😄 F604; 😅 😅 F605; 😆 😆 F606; 😇 😇 F607; 😈 😈 F608; 😉 😉 F609; 😊 😊 F60A; 😋 😋 F60B; 😌 😌 F60C; 😍 😍 F60D; 😎 😎 F60E; 😏 😏 F60F; 😐 😐 F610; 😑 😑 F611; 😒 😒 F612; 😓 😓 F613; 😔 😔 F614; 😕 😕 F615; 😖 😖 F616; 😗 😗 F617; 😘 😘 F618; 😙 😙 F619; 😚 😚 F61A; 😛 😛 F61B; 😜 😜 F61C; 😝 😝 F61D; 😞 😞 F61E; 😟 😟 F61F; 😠 😠 F620; 😡 😡 F621; 😢 😢 F622; 😣 😣 F623; 😤 😤 F624; 😥 😥 F625; 😦 😦 F626; 😧 😧 F627; 😨 😨 F628; 😩 😩 F629; 😪 😪 F62A; 😫 😫 F62B; 😬 😬 F62C; 😭 😭 F62D; 😮 😮 F62E; 😯 😯 F62F; 😰 😰 F630; 😱 😱 F631; 😲 😲 F632; 😳 😳 F633; 😴 😴 F634; 😵 😵 F635; 😶 😶 F636; 😷 😷 F637; 🙁 🙁 F641; 🙂 🙂 F642; 🙃 🙃 F643; 🙄 🙄 F644; 🤐 🤐 F910; 🤑 🤑 F911; 🤒 🤒 F912; 🤓 🤓 F913; 🤔 🤔 F914; 🤕 🤕 F915; 🤠 🤠 F920; 🤡 🤡 F921; 🤢 🤢 F922; 🤣 🤣 F923; 🤤 🤤 F924; 🤥 🤥 F925; 🤧 🤧 F927; 🤨 🤨 F928; 🤩 🤩 F929; 🤪 🤪 F92A; 🤫 🤫 F92B; 🤬 🤬 F92C; 🤭 🤭 F92D; 🤮 🤮 F92E; 🤯 🤯 F92F; 🧐 🧐 F9D0;
附录五、HTTP状态码
1、1XX
消息: 描述: 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求。 101 Switching Protocols 服务器转换协议:服务器将遵从客户的请求转换到另外一种协议。
2、2XX
消息: 描述: 200 OK 请求成功(其后是对GET和POST请求的应答文档。) 201 Created 请求被创建完成,同时新的资源被创建。 202 Accepted 供处理的请求已被接受,但是处理未完成。 203 Non-authoritative Information 文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝。 204 No Content 没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的。 205 Reset Content 没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。 206 Partial Content 客户发送了一个带有Range头的GET请求,服务器完成了它。
3、3XX
消息: 描述: 300 Multiple Choices 多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。 301 Moved Permanently 所请求的页面已经转移至新的url。 302 Found 所请求的页面已经临时转移至新的url。 303 See Other 所请求的页面可在别的url下被找到。 304 Not Modified 未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。 305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取。 306 Unused 此代码被用于前一版本。目前已不再使用,但是代码依然被保留。 307 Temporary Redirect 被请求的页面已经临时移至新的url。
4、4XX
消息: 描述: 400 Bad Request 服务器未能理解请求。 401 Unauthorized 被请求的页面需要用户名和密码。 402 Payment Required 此代码尚无法使用。 403 Forbidden 对被请求页面的访问被禁止。 404 Not Found 服务器无法找到被请求的页面。 405 Method Not Allowed 请求中指定的方法不被允许。 406 Not Acceptable 服务器生成的响应无法被客户端所接受。 407 Proxy Authentication Required 用户必须首先使用代理服务器进行验证,这样请求才会被处理。 408 Request Timeout 请求超出了服务器的等待时间。 409 Conflict 由于冲突,请求无法被完成。 410 Gone 被请求的页面不可用。 411 Length Required “Content-Length” 未被定义。如果无此内容,服务器不会接受请求。 412 Precondition Failed 请求中的前提条件被服务器评估为失败。 413 Request Entity Too Large 由于所请求的实体的太大,服务器不会接受请求。 414 Request-url Too Long 由于url太长,服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时,就会发生这种情况。 415 Unsupported Media Type 由于媒介类型不被支持,服务器不会接受请求。 416 服务器不能满足客户在请求中指定的Range头。 417 Expectation Failed
5、5XX
消息: 描述: 500 Internal Server Error 请求未完成。服务器遇到不可预知的情况。 501 Not Implemented 请求未完成。服务器不支持所请求的功能。 502 Bad Gateway 请求未完成。服务器从上游服务器收到一个无效的响应。 503 Service Unavailable 请求未完成。服务器临时过载或当机。 504 Gateway Timeout 网关超时。 505 HTTP Version Not Supported 服务器不支持请求中指明的HTTP协议版本。