前端学习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>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;&lt;meta charset=&quot;UTF-8&quot;&gt;&lt;title&gt;Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;&lt;h1&gt;Hello,world!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</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>
属性 值 描述
alt text 定义此区域的替换文本。
属性 值 描述
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 heightxwidthany 规定被链接资源的尺寸。仅适用于 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)

前端学习1——HTML5相关推荐

  1. 前端学习（HTML5）

    前端学习之HTML5 一.HTML5介绍 二.HTML5修改和新增的内容 html声明 html指定字符编码 html5新增的标签 1.结构语义化标签 2.表单控制标签 3.其他标签的应用(多媒体.w ...

  2. 前端学习六——html5+CSS3

    前端学习六--html5+CSS3 HTML5 H5新增语义标签 多媒体标签 audio音频标签 audio音频标签常见属性 音频标签语法 视频标签video 视频标签语法 H5新增input表单.表 ...

  3. 前端学习笔记 HTML5 保姆级教程

    HTML5 保姆级教程 前端学习路线: HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js 除了掌握这些技术,后期我还需要 ...

  4. 个人前端学习笔记 html5+css（保持更新）

    2022年7月5日 HTML基础知识 一.路径的使用 1.绝对路径的使用:表示含有盘符的路径地址==-不建议在服务器(工作)中使用== -补充:插件的名字:Image preview(在编辑器代码前显 ...

  5. html5背景图片设置大小_web前端学习之HTML5前端开发的特点

    随着HTML5开发语言的应用越来越广泛,所以众多企业对HTML5开发技术人才的需求是有增无减,因此HTML5开发人员的就业前景一直是被看好的.今天小编就和大家探讨一下HTML5开发语言有哪些特点? H ...

  6. 从零开始前端学习[38]:html5中的弹性布局一(移动端响应式实现各种布局，极其重要)

    html5中的弹性布局(移动端及其重要) 弹性盒子模型是什么? 容器属性 提示 博主:章飞_906285288 博课地址:http://blog.csdn.net/qq_29924041 弹性盒子模型 ...

  7. 01前端学习之HTML5

    文章目录 一.浏览器: 1. 认识网页: 1.1 网页的组成: 1.2 网页如何形成: 2. 常见浏览器: 2.1 五大浏览器: 2.2 浏览器占有的份额: 3. 浏览器内核: 3.1 什么是浏览器内 ...

  8. Web前端学习笔记——HTML5与CSS3之购物车宣传案例

    <购物车宣传>案例 综合运用h5c3知识且进行一定扩展 能使用jquery完成网页常见交互行为 实际工作开发当中能应对活动宣传页 全屏切换效果 通过鼠标的滚轮 切换全屏页面 使用fullp ...

  9. Web前端学习笔记——HTML5与CSS3之QQ TIM案例

    <QQ TIM>案例 Stellar插件 描述 视差滚动(Parallax Scrolling)指网页滚动过程中, 多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术 主 ...

最新文章

  1. [LeetCode题解] ZigZag Conversion
  2. pybind传输list
  3. python字符串写入excel-python 操作 Excel 之写入
  4. [crypto]-10-openssl版本介绍
  5. 记事本快捷键设置 java_Java给JFrame窗口设置热键---不完整记事本
  6. vim 有用命令-20190217
  7. CHECKLIST TO USE BEFORE SUBMITTING A PAPER TO A JOURNAL
  8. java转json jar包_java转换json需导入的jar包说明
  9. 设计模式学习笔记——组合(Composite)模式
  10. oracle 回收站
  11. opencv学习 给视频添加文字
  12. 新东方王江涛:十天背完考研英语词汇
  13. IDEA修改静态资源（html）不重启，即时生效
  14. 技术人员如何创业：打造超强执行力团队
  15. 网站SEO实践之 - seo引流怎么选有流量的关键词
  16. 关于博客封面的提取与处理
  17. 在数控机床上加工零件，主要取决于加工程序
  18. 【Java面试题】数据库三范式
  19. MBRGPT硬盘分区类型属性详解（Win下更改/设置OEM/恢复分区方法）
  20. 我的沪漂第一天，值得纪念的一天！

热门文章

  1. java毕业设计宠物用品商城服务系统Mybatis+系统+数据库+调试部署
  2. 房价真的暴跌？戏说房价暴跌的23个后果
  3. 背景图铺满屏幕的方法
  4. JavaSHA-256加解密
  5. 打开miracast简单示例
  6. HA(High Availability高可用性)
  7. 企业等保测评的必要性
  8. JAVA基础知识之InputStreamReader流
  9. 网格布局、九宫格布局
  10. java InputStreamReader