开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 前端学习1——HTML5 -> 正文阅读

[JavaScript知识库]前端学习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>

属性	值	描述
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)
😀	😀	&#1F600;
😁	😁	&#1F601;
😂	😂	&#1F602;
😃	😃	&#1F603;
😄	😄	&#1F604;
😅	😅	&#1F605;
😆	😆	&#1F606;
😇	😇	&#1F607;
😈	😈	&#1F608;
😉	😉	&#1F609;
😊	😊	&#1F60A;
😋	😋	&#1F60B;
😌	😌	&#1F60C;
😍	😍	&#1F60D;
😎	😎	&#1F60E;
😏	😏	&#1F60F;
😐	😐	&#1F610;
😑	😑	&#1F611;
😒	😒	&#1F612;
😓	😓	&#1F613;
😔	😔	&#1F614;
😕	😕	&#1F615;
😖	😖	&#1F616;
😗	😗	&#1F617;
😘	😘	&#1F618;
😙	😙	&#1F619;
😚	😚	&#1F61A;
😛	😛	&#1F61B;
😜	😜	&#1F61C;
😝	😝	&#1F61D;
😞	😞	&#1F61E;
😟	😟	&#1F61F;
😠	😠	&#1F620;
😡	😡	&#1F621;
😢	😢	&#1F622;
😣	😣	&#1F623;
😤	😤	&#1F624;
😥	😥	&#1F625;
😦	😦	&#1F626;
😧	😧	&#1F627;
😨	😨	&#1F628;
😩	😩	&#1F629;
😪	😪	&#1F62A;
😫	😫	&#1F62B;
😬	😬	&#1F62C;
😭	😭	&#1F62D;
😮	😮	&#1F62E;
😯	😯	&#1F62F;
😰	😰	&#1F630;
😱	😱	&#1F631;
😲	😲	&#1F632;
😳	😳	&#1F633;
😴	😴	&#1F634;
😵	😵	&#1F635;
😶	😶	&#1F636;
😷	😷	&#1F637;
🙁	🙁	&#1F641;
🙂	🙂	&#1F642;
🙃	🙃	&#1F643;
🙄	🙄	&#1F644;
🤐	🤐	&#1F910;
🤑	🤑	&#1F911;
🤒	🤒	&#1F912;
🤓	🤓	&#1F913;
🤔	🤔	&#1F914;
🤕	🤕	&#1F915;
🤠	🤠	&#1F920;
🤡	🤡	&#1F921;
🤢	🤢	&#1F922;
🤣	🤣	&#1F923;
🤤	🤤	&#1F924;
🤥	🤥	&#1F925;
🤧	🤧	&#1F927;
🤨	🤨	&#1F928;
🤩	🤩	&#1F929;
🤪	🤪	&#1F92A;
🤫	🤫	&#1F92B;
🤬	🤬	&#1F92C;
🤭	🤭	&#1F92D;
🤮	🤮	&#1F92E;
🤯	🤯	&#1F92F;
🧐	🧐	&#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协议版本。

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2022-06-14 22:29:05 更:2022-06-14 22:33:22

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/23 17:20:13-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码