前端学习1——HTML5

前端学习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>
属性描述
hrefURL规定页面中所有相对链接的基准 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>
属性描述
alignleft、center、right、justify规定标题中文本的排列(不推荐使用,请使用样式替代它)

2.2、段落

<p>我是一个段落</p>
属性描述
alignleft、center、right、justify规定段落中文本的对齐方式(不推荐使用,请使用样式替代它)

2.3、分割线

我是一个段落
<hr />
我是一个段落
属性描述
aligncenter、left、right规定 hr 元素的对齐方式(不推荐使用,请使用样式替代它)
noshadenoshade规定 hr 元素的颜色呈现为纯色(不推荐使用,请使用样式替代它)
sizepixels规定 hr 元素的高度(不推荐使用,请使用样式替代它)
widthpixels、%规定 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/>
属性描述
dirltr、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>
属性描述
alttext定义此区域的替换文本。
属性描述
coords坐标值定义可点击区域(对鼠标敏感的区域)的坐标。
downloadfilename指定当用户单击超链接时将下载目标。
hrefURL定义此区域的目标 URL。
hreflanglanguage_code规定区域中目标 URL 的语言。
mediamedia query规定目标 URL 优化的媒体/设备。
nohrefnohref从图像映射排除某个区域。
shapedefault、rect、circ、poly定义区域的形状。
target_blank、_parent、_self、_top规定在何处打开 href 属性指定的目标 URL。
typemedia_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>
属性描述
heightpixels设置 canvas 的高度。
widthpixels设置 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>
属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
looploop如果出现该属性,则每当音频结束时重新开始播放。
mutedmuted规定视频输出应该被静音。
preloadpreload如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
srcurl要播放的音频的 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>
属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
mutedmuted规定视频的音频输出应该被静音。
posterURL规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

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>
属性描述
defaultdefault规定该轨道是默认的,假如没有选择任何轨道。
kindcaptions、chapters、descriptions、metadata、subtitles表示轨道属于什么文本类型。
labellabel轨道的标签或标题。
srcurl轨道的 URL。
srclanglanguage_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>
属性描述
reversedreversed规定列表顺序为降序。(9,8,7…)
startnumber规定有序列表的起始值。
type1、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>
属性描述
downloadfilename规定被下载的超链接目标。
hrefURL规定链接指向的页面的 URL。
hreflanglanguage_code规定被链接文档的语言。
mediamedia_query规定被链接文档是为何种媒介/设备优化的。
pinglist_of_URLs规定以空格分隔的 URL 列表,当点击链接时,浏览器将发送带有正文 ping 的 post 请求(在后台)。通常用于跟踪。
reltext规定当前文档与被链接文档之间的关系。
target_blank_parent_self_topframename规定在何处打开链接文档。
typeMIME type规定被链接文档的的 MIME 类型。
9.2、文档与外部资源的关系
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
属性描述
hrefURL规定被链接文档的位置。
hreflanglanguage_code规定被链接文档中文本的语言。
mediamedia_query规定被链接文档将被显示在什么设备上。
referrerpolicyno-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url规定在获取资源时要使用的引荐来源信息。
relalternateauthorhelpiconlicencenextpingbackprefetchprevsearchsidebarstylesheettag规定当前文档与被链接文档之间的关系。
sizesheightxwidthany规定被链接资源的尺寸。仅适用于 rel=“icon”。
typeMIME_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>
属性描述
borderpixels规定表格边框的宽度。
cellpaddingpixels、%规定单元边沿与其内容之间的空白。
cellspacingpixels、%规定单元格之间的空白。
framevoid、above、below、hsides、lhs、rhs、vsides、box、border规定外侧边框的哪个部分是可见的。
rulesnone、groups、rows、cols、all规定内侧边框的哪个部分是可见的。
summarytext规定表格的摘要。
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

属性描述
alignright、left、center、justify定义 thead 元素中内容的对齐方式。
valigntopmiddlebottombaseline规定 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>
属性描述
actionURL规定当提交表单时向何处发送表单数据。
autocompleteon、off规定是否启用表单的自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
enctype见下表规定在发送表单数据之前如何对其进行编码。
methodget、post规定用于发送 form-data 的 HTTP 方法。
novalidatenovalidate如果使用该属性,则提交表单时不进行验证。
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>
属性描述
acceptmime_type规定通过文件上传来提交的文件的类型。
alttext定义图像输入的替代文本。
autocompleteon、off规定是否使用输入字段的自动完成功能。
autofocusautofocus规定输入字段在页面加载时是否获得焦点。(不适用于 type=“hidden”)
checkedchecked规定此 input 元素首次加载时应当被选中。
dirnameinputname.dir规定将提交的文本方向。
disableddisabled当 input 元素加载时禁用此元素。
formformname规定输入字段所属的一个或多个表单。
formactionURL覆盖表单的 action 属性。(适用于 type=“submit” 和 type=“image”)
formenctypeenctype覆盖表单的 enctype 属性。(适用于 type=“submit” 和 type=“image”)
formmethodget、post覆盖表单的 method 属性。(适用于 type=“submit” 和 type=“image”)
formnovalidateformnovalidate覆盖表单的 novalidate 属性。如果使用该属性,则提交表单时不进行验证。
formtarget_blank、_self、_parent、_top覆盖表单的 target 属性。(适用于 type=“submit” 和 type=“image”)
heightpixels、%定义 input 字段的高度。(适用于 type=“image”)
listdatalist-id引用包含输入字段的预定义选项的 datalist 。
maxnumber、date规定输入字段的最大值。请与 “min” 属性配合使用,来创建合法值的范围。
maxlengthnumber规定输入字段中的字符的最大长度。
minnumber、date规定输入字段的最小值。请与 “max” 属性配合使用,来创建合法值的范围。
minlengthnumber规定输入字段中所需的最小字符数。
multiplemultiple如果使用该属性,则允许一个以上的值。
namefield_name定义 input 元素的名称。
patternregexp_pattern规定输入字段的值的模式或格式。例如 pattern=“[0-9]” 表示输入值必须是 0 与 9 之间的数字。
placeholdertext规定帮助用户填写输入字段的提示。
readonlyreadonly规定输入字段为只读。
requiredrequired指示输入字段的值是必需的。
sizenumber_of_char定义输入字段的宽度。
srcURL定义以提交按钮形式显示的图像的 URL。
stepnumber规定输入字的的合法数字间隔。
typebutton、checkbox、file、hidden、image、password、radio、reset、submit、text规定 input 元素的类型。
valuevalue规定 input 元素的值。
widthpixels、%定义 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>
属性描述
autofocusautofocus规定在页面加载后文本区域自动获得焦点。
colsnumber规定文本区内的可见宽度。
dirnametextareaname.dir规定被提交的 textarea 的文本方向。
disableddisabled规定禁用该文本区。
formform_id规定文本区域所属的一个或多个表单。
maxlengthnumber规定文本区域的最大字符数。
namename_of_textarea规定文本区的名称。
placeholdertext规定描述文本区域预期值的简短提示。
readonlyreadonly规定文本区为只读。
requiredrequired规定文本区域是必填的。
rowsnumber规定文本区内的可见行数。
wraphardsoft规定当在表单中提交时,文本区域中的文本如何换行。。

wrap

描述
soft当在表单中提交时,textarea 中的文本不换行。默认值。
hard当在表单中提交时,textarea 中的文本换行(包含换行符)。当使用 “hard” 时,必须规定 cols 属性。
11.4、按钮
<button type="button">Click Me!</button>
属性描述
autofocusautofocus规定当页面加载时按钮应当自动地获得焦点。
disableddisabled规定应该禁用该按钮。
formform_name规定按钮属于一个或多个表单。
formactionurl覆盖 form 元素的 action 属性。**注释:**该属性与 type=“submit” 配合使用。
formenctypeenctype覆盖 form 元素的 enctype 属性。**注释:**该属性与 type=“submit” 配合使用。
formmethodget、post覆盖 form 元素的 method 属性。**注释:**该属性与 type=“submit” 配合使用。
formnovalidateformnovalidate覆盖 form 元素的 novalidate 属性。**注释:**该属性与 type=“submit” 配合使用。
formtarget_blank、_self、_parent、_top覆盖 form 元素的 target 属性。**注释:**该属性与 type=“submit” 配合使用。
namebutton_name规定按钮的名称。
typebutton、reset、submit规定按钮的类型。
valuetext规定按钮的初始值。可由脚本进行修改。
11.5、下拉列表
<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
属性描述
autofocusautofocus规定在页面加载后文本区域自动获得焦点。
disableddisabled规定禁用该下拉列表。
formform_id规定文本区域所属的一个或多个表单。
multiplemultiple规定可选择多个选项。
namename规定下拉列表的名称。
requiredrequired规定文本区域是必填的。
sizenumber规定下拉列表中可见选项的数目。
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>
属性描述
labeltext为选项组规定描述。
disableddisabled规定禁用该选项组。
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>
属性描述
forid规定 label 绑定到哪个表单元素。
formformid规定 label 字段所属的一个或多个表单。
11.8、边框、标题
<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>
属性描述
disableddisabled规定应该禁用 fieldset。
formform_id规定 fieldset 所属的一个或多个表单。
namevalue规定 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事件

属性描述
onafterprintscript文档打印之后运行的脚本。
onbeforeprintscript文档打印之前运行的脚本。
onbeforeunloadscript文档卸载之前运行的脚本。
onerrorscript在错误发生时运行的脚本。
onhaschangescript当文档已改变时运行的脚本。
onloadscript页面结束加载之后触发。
onmessagescript在消息被触发时运行的脚本。
onofflinescript当文档离线时运行的脚本。
ononlinescript当文档上线时运行的脚本。
onpagehidescript当窗口隐藏时运行的脚本。
onpageshowscript当窗口成为可见时运行的脚本。
onpopstatescript当窗口历史记录改变时运行的脚本。
onredoscript当文档执行撤销(redo)时运行的脚本。
onresizescript当浏览器窗口被调整大小时触发。
onstoragescript在 Web Storage 区域更新后运行的脚本。
onundoscript在文档执行 undo 时运行的脚本。
onunloadscript一旦页面已下载时触发(或者浏览器窗口已被关闭)。

2、表单事件

属性描述
onblurscript元素失去焦点时运行的脚本。
onchangescript在元素值被改变时运行的脚本。
onfocusscript当元素获得焦点时运行的脚本。
onformchangescript在表单改变时运行的脚本。
onforminputscript当表单获得用户输入时运行的脚本。
oninputscript当元素获得用户输入时运行的脚本。
oninvalidscript当元素无效时运行的脚本。
onselectscript在元素中文本被选中后触发。
onsubmitscript在提交表单时触发。

3、键盘事件

属性描述
onkeydownscript在用户按下按键时触发。
onkeypressscript在用户敲击按钮时触发。
onkeyupscript当用户释放按键时触发。

4、鼠标事件

属性描述
onclickscript元素上发生鼠标点击时触发。
ondblclickscript元素上发生鼠标双击时触发。
ondragscript元素被拖动时运行的脚本。
ondragendscript在拖动操作末端运行的脚本。
ondragenterscript当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleavescript当元素离开有效拖放目标时运行的脚本。
ondragoverscript当元素在有效拖放目标上正在被拖动时运行的脚本。
ondragstartscript在拖动操作开端运行的脚本。
ondropscript当被拖元素正在被拖放时运行的脚本。
onmousedownscript当元素上按下鼠标按钮时触发。
onmousemovescript当鼠标指针移动到元素上时触发。
onmouseoutscript当鼠标指针移出元素时触发。
onmouseoverscript当鼠标指针移动到元素上时触发。
onmouseupscript当在元素上释放鼠标按钮时触发。
onmousewheelscript当鼠标滚轮正在被滚动时运行的脚本。
onscrollscript当元素滚动条被滚动时运行的脚本。

5、媒体事件

属性描述
onabortscript在退出时运行的脚本。
oncanplayscript当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。
oncanplaythroughscript当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchangescript当媒介长度改变时运行的脚本。
onemptiedscript当发生故障并且文件突然不可用时运行的脚本(比如连接意外断开时)。
onendedscript当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。
onerrorscript当在文件加载期间发生错误时运行的脚本。
onloadeddatascript当媒介数据已加载时运行的脚本。
onloadedmetadatascript当元数据(比如分辨率和时长)被加载时运行的脚本。
onloadstartscript在文件开始加载且未实际加载任何数据前运行的脚本。
onpausescript当媒介被用户或程序暂停时运行的脚本。
onplayscript当媒介已就绪可以开始播放时运行的脚本。
onplayingscript当媒介已开始播放时运行的脚本。
onprogressscript当浏览器正在获取媒介数据时运行的脚本。
onratechangescript每当回放速率改变时运行的脚本(比如当用户切换到慢动作或快进模式)。
onreadystatechangescript每当就绪状态改变时运行的脚本(就绪状态监测媒介数据的状态)。
onseekedscript当 seeking 属性设置为 false(指示定位已结束)时运行的脚本。
onseekingscript当 seeking 属性设置为 true(指示定位是活动的)时运行的脚本。
onstalledscript在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspendscript在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdatescript当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。
onvolumechangescript每当音量改变时(包括将音量设置为静音)时运行的脚本。
onwaitingscript当媒介已停止播放但打算继续播放时(比如当媒介暂停已缓冲更多数据)运行脚本

附录三、颜色

英文代码形象描述十六进制RGB
LightPink浅粉红#FFB6C1255,182,193
Pink粉红#FFC0CB255,192,203
Crimson猩红#DC143C220,20,60
LavenderBlush脸红的淡紫色#FFF0F5255,240,245
PaleVioletRed苍白的紫罗兰红色#DB7093219,112,147
HotPink热情的粉红#FF69B4255,105,180
DeepPink深粉色#FF1493255,20,147
MediumVioletRed适中的紫罗兰红色#C71585199,21,133
Orchid兰花的紫色#DA70D6218,112,214
Thistle#D8BFD8216,191,216
plum李子#DDA0DD221,160,221
Violet紫罗兰#EE82EE238,130,238
Magenta洋红#FF00FF255,0,255
Fuchsia灯笼海棠(紫红色)#FF00FF255,0,255
DarkMagenta深洋红色#8B008B139,0,139
Purple紫色#800080128,0,128
MediumOrchid适中的兰花紫#BA55D3186,85,211
DarkVoilet深紫罗兰色#9400D3148,0,211
DarkOrchid深兰花紫#9932CC153,50,204
Indigo靛青#4B008275,0,130
BlueViolet深紫罗兰的蓝色#8A2BE2138,43,226
MediumPurple适中的紫色#9370DB147,112,219
MediumSlateBlue适中的板岩暗蓝灰色#7B68EE123,104,238
SlateBlue板岩暗蓝灰色#6A5ACD106,90,205
DarkSlateBlue深岩暗蓝灰色#483D8B72,61,139
Lavender熏衣草花的淡紫色#E6E6FA230,230,250
GhostWhite幽灵的白色#F8F8FF248,248,255
Blue纯蓝#0000FF0,0,255
MediumBlue适中的蓝色#0000CD0,0,205
MidnightBlue午夜的蓝色#19197025,25,112
DarkBlue深蓝色#00008B0,0,139
Navy海军蓝#0000800,0,128
RoyalBlue皇家蓝#4169E165,105,225
CornflowerBlue矢车菊的蓝色#6495ED100,149,237
LightSteelBlue淡钢蓝#B0C4DE176,196,222
LightSlateGray浅石板灰#778899119,136,153
SlateGray石板灰#708090112,128,144
DoderBlue道奇蓝#1E90FF30,144,255
AliceBlue爱丽丝蓝#F0F8FF240,248,255
SteelBlue钢蓝#4682B470,130,180
LightSkyBlue淡蓝色#87CEFA135,206,250
SkyBlue天蓝色#87CEEB135,206,235
DeepSkyBlue深天蓝#00BFFF0,191,255
LightBLue淡蓝#ADD8E6173,216,230
PowDerBlue火药蓝#B0E0E6176,224,230
CadetBlue军校蓝#5F9EA095,158,160
Azure蔚蓝色#F0FFFF240,255,255
LightCyan淡青色#E1FFFF225,255,255
PaleTurquoise苍白的绿宝石#AFEEEE175,238,238
Cyan青色#00FFFF0,255,255
Aqua水绿色#D4F2E7212,242,231
DarkTurquoise深绿宝石#00CED10,206,209
DarkSlateGray深石板灰#2F4F4F47,79,79
DarkCyan深青色#008B8B0,139,139
Teal水鸭色#0080800,128,128
MediumTurquoise适中的绿宝石#48D1CC72,209,204
LightSeaGreen浅海洋绿#20B2AA32,178,170
Turquoise绿宝石#40E0D064,224,208
Auqamarin绿玉\碧绿色#7FFFAA127,255,170
MediumAquamarine适中的碧绿色#00FA9A0,250,154
MediumSpringGreen适中的春天的绿色#00FF7F0,255,127
MintCream薄荷奶油#F5FFFA245,255,250
SpringGreen春天的绿色#3CB37160,179,113
SeaGreen海洋绿#2E8B5746,139,87
Honeydew蜂蜜#F0FFF0240,255,240
LightGreen淡绿色#90EE90144,238,144
PaleGreen苍白的绿色#98FB98152,251,152
DarkSeaGreen深海洋绿#8FBC8F143,188,143
LimeGreen酸橙绿#32CD3250,205,50
Lime酸橙色#00FF000,255,0
ForestGreen森林绿#228B2234,139,34
Green纯绿#0080000,128,0
DarkGreen深绿色#0064000,100,0
Chartreuse查特酒绿#7FFF00127,255,0
LawnGreen草坪绿#7CFC00124,252,0
GreenYellow绿黄色#ADFF2F173,255,47
OliveDrab橄榄土褐色#556B2F85,107,47
Beige米色(浅褐色)#F5F5DC245,245,220
LightGoldenrodYellow浅秋麒麟黄#FAFAD2250,250,210
Ivory象牙#FFFFF0255,255,240
LightYellow浅黄色#FFFFE0255,255,224
Yellow纯黄#FFFF00255,255,0
Olive橄榄#808000128,128,0
DarkKhaki深卡其布#BDB76B189,183,107
LemonChiffon柠檬薄纱#FFFACD255,250,205
PaleGodenrod灰秋麒麟#EEE8AA238,232,170
Khaki卡其布#F0E68C240,230,140
Gold#FFD700255,215,0
Cornislk玉米色#FFF8DC255,248,220
GoldEnrod秋麒麟#DAA520218,165,32
FloralWhite花的白色#FFFAF0255,250,240
OldLace老饰带#FDF5E6253,245,230
Wheat小麦色#F5DEB3245,222,179
Moccasin鹿皮鞋#FFE4B5255,228,181
Orange橙色#FFA500255,165,0
PapayaWhip番木瓜#FFEFD5255,239,213
BlanchedAlmond漂白的杏仁#FFEBCD255,235,205
NavajoWhite纳瓦霍白#FFDEAD255,222,173
AntiqueWhite古代的白色#FAEBD7250,235,215
Tan晒黑#D2B48C210,180,140
BrulyWood结实的树#DEB887222,184,135
Bisque(浓汤)乳脂,番茄等#FFE4C4255,228,196
DarkOrange深橙色#FF8C00255,140,0
Linen亚麻布#FAF0E6250,240,230
Peru秘鲁#CD853F205,133,63
PeachPuff桃色#FFDAB9255,218,185
SandyBrown沙棕色#F4A460244,164,96
Chocolate巧克力#D2691E210,105,30
SaddleBrown马鞍棕色#8B4513139,69,19
SeaShell海贝壳#FFF5EE255,245,238
Sienna黄土赭色#A0522D160,82,45
LightSalmon浅鲜肉(鲑鱼)色#FFA07A255,160,122
Coral珊瑚#FF7F50255,127,80
OrangeRed橙红色#FF4500255,69,0
DarkSalmon深鲜肉(鲑鱼)色#E9967A233,150,122
Tomato番茄#FF6347255,99,71
MistyRose薄雾玫瑰#FFE4E1255,228,225
Salmon鲜肉(鲑鱼)色#FA8072250,128,114
Snow#FFFAFA255,250,250
LightCoral淡珊瑚色#F08080240,128,128
RosyBrown玫瑰棕色#BC8F8F188,143,143
IndianRed印度红#CD5C5C205,92,92
Red纯红#FF0000255,0,0
Brown棕色#A52A2A165,42,42
FireBrick耐火砖#B22222178,34,34
DarkRed深红色#8B0000139,0,0
Maroon栗色#800000128,0,0
White纯白#FFFFFF255,255,255
WhiteSmoke白烟#F5F5F5245,245,245
Gainsboro亮灰色#DCDCDC220,220,220
LightGrey浅灰色#D3D3D3211,211,211
Silver银白色#C0C0C0192,192,192
DarkGray深灰色#A9A9A9169,169,169
Gray灰色#808080128,128,128
DimGray暗淡的灰色#696969105,105,105
Black纯黑#0000000,0,0

附录四、表情

表情十进制 (dec)十六进制(Hex)
😀&#128512;&#1F600;
😁&#128513;&#1F601;
😂&#128514;&#1F602;
😃&#128515;&#1F603;
😄&#128516;&#1F604;
😅&#128517;&#1F605;
😆&#128518;&#1F606;
😇&#128519;&#1F607;
😈&#128520;&#1F608;
😉&#128521;&#1F609;
😊&#128522;&#1F60A;
😋&#128523;&#1F60B;
😌&#128524;&#1F60C;
😍&#128525;&#1F60D;
😎&#128526;&#1F60E;
😏&#128527;&#1F60F;
😐&#128528;&#1F610;
😑&#128529;&#1F611;
😒&#128530;&#1F612;
😓&#128531;&#1F613;
😔&#128532;&#1F614;
😕&#128533;&#1F615;
😖&#128534;&#1F616;
😗&#128535;&#1F617;
😘&#128536;&#1F618;
😙&#128537;&#1F619;
😚&#128538;&#1F61A;
😛&#128539;&#1F61B;
😜&#128540;&#1F61C;
😝&#128541;&#1F61D;
😞&#128542;&#1F61E;
😟&#128543;&#1F61F;
😠&#128544;&#1F620;
😡&#128545;&#1F621;
😢&#128546;&#1F622;
😣&#128547;&#1F623;
😤&#128548;&#1F624;
😥&#128549;&#1F625;
😦&#128550;&#1F626;
😧&#128551;&#1F627;
😨&#128552;&#1F628;
😩&#128553;&#1F629;
😪&#128554;&#1F62A;
😫&#128555;&#1F62B;
😬&#128556;&#1F62C;
😭&#128557;&#1F62D;
😮&#128558;&#1F62E;
😯&#128559;&#1F62F;
😰&#128560;&#1F630;
😱&#128561;&#1F631;
😲&#128562;&#1F632;
😳&#128563;&#1F633;
😴&#128564;&#1F634;
😵&#128565;&#1F635;
😶&#128566;&#1F636;
😷&#128567;&#1F637;
🙁&#128577;&#1F641;
🙂&#128578;&#1F642;
🙃&#128579;&#1F643;
🙄&#128580;&#1F644;
🤐&#129296;&#1F910;
🤑&#129297;&#1F911;
🤒&#129298;&#1F912;
🤓&#129299;&#1F913;
🤔&#129300;&#1F914;
🤕&#129301;&#1F915;
🤠&#129312;&#1F920;
🤡&#129313;&#1F921;
🤢&#129314;&#1F922;
🤣&#129315;&#1F923;
🤤&#129316;&#1F924;
🤥&#129317;&#1F925;
🤧&#129319;&#1F927;
🤨&#129320;&#1F928;
🤩&#129321;&#1F929;
🤪&#129322;&#1F92A;
🤫&#129323;&#1F92B;
🤬&#129324;&#1F92C;
🤭&#129325;&#1F92D;
🤮&#129326;&#1F92E;
🤯&#129327;&#1F92F;
🧐&#129488;&#1F9D0;

附录五、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协议版本。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

眼眸流转

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值