前端知识笔记

最新推荐文章于 2023-07-27 21:17:40 发布

梅教授

最新推荐文章于 2023-07-27 21:17:40 发布

阅读量1.4k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/mjs677/article/details/130316054

版权

一.html

1.html基础

1.1html标题

html设置了

-

级标题

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

1.2html段落

html段落由

标签进行定义

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

1.3html链接

HTML 链接是通过标签进行定义的

<a href="http://www.w3school.com.cn">This is a link</a>

1.4html图像

HTML 图像是通过标签进行定义的。

<img src="w3school.jpg" width="104" height="142" />

2.html元素

html元素指以开始标签到结束标签。

例如：

-开始标签

-结束标签 ————这种标签也被称为双标签，html中双标签居多。

还有少部分单标签，例如：

'<br/ '换行

'分割线

html中建议使用小写标签

3.html属性

html中大部分标签具有相关属性，一般在开始标签中进行定义。

下列绝大部分标签所具有的属性：

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

最后就是html属性也是不区分大小写的，但是建议用小写。

4.html标题

标题（Heading）是通过

-

等标签进行定义的。

“

” 定义最大的标题。“

” 定义最小的标题。

虽然标题具有加粗功能，但是不建议使用标题来进行文本加粗，建议使用css样式

**注释：**浏览器会自动地在标题的前后添加空行。

**注释：**默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

5.html样式

html可以通过style属性来控制样式

5.1背景颜色

通过style中的background-color来设置

<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>

5.2字体

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸

<html>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

5.3文本对齐

text-align 属性规定了元素中文本的水平对齐方式：

<html>

<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>

</html>

6.html格式化

6.1文本格式化标签

标签	描述
‘’	定义粗体文本。
‘’	定义大号字。
‘’	定义着重文字。
‘’	定义斜体字。
‘’	定义小号字。
‘’	定义加重语气。
‘_’	定义下标字。
‘^’	定义上标字。
‘’	定义插入字。
‘’	定义删除字。

6.2“计算机输出”标签

标签	描述
‘`’`	定义计算机代码。
‘`’`	定义键盘码。
‘`’`	定义计算机代码样本。
‘`’`	定义打字机代码。
‘`’`	定义变量。
‘ ’	定义预格式文本。

6.2.1预格式文本

预格式文本保留了空格和换行，比较适合显示计算机代码。

<html>

<body>

<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

<p>pre 标签很适合显示计算机代码：</p>

<pre>
for i = 1 to 10
     print i
next i
</pre>

</body>
</html>

6.2.2计算机输出

<html>

<body>

<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />

<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>

</body>
</html>

6.3引用、引用和术语定义

标签	描述
‘’	定义缩写。
‘’	定义首字母缩写。
‘ ’	定义地址。
‘’	定义文字方向。
‘ ’	定义长的引用。
‘’	定义短的引用语。
‘’	定义引用、引证。
‘’	定义一个定义项目。

6.3.1缩写

当鼠标移动到etc.和WWW时会显示出完整内容。

etc.
WWW

<html>

<body>

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>

<p>仅对于 IE 5 中的 acronym 元素有效。</p>

<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>

</body>
</html>

6.3.2文字方向

Here is some Hebrew text

<html>

<body>

<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

</body>
</html>

6.3.3引用

长引用会插入换行和外边距，短引用就不会。

浏览器通常会在q元素周围包围引号，通常会对blockquote元素进行缩进处理

<html>

<body>

这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>

这是短的引用：
<q>
这是短的引用。
</q>

<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>

</body>
</html>

6.3.4文字删除和下划线效果

~~不会做~~

会做

<html>

<body>

<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

</body>
</html>

7.html注释

通过这样的格式来生成注释

<!-- 在此处写注释 -->

7.1条件注释

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

条件注释定义只有 Internet Explorer 执行的 HTML 标签。

7.2软件程序标签

各种 HTML 软件程序也能够生成 HTML 注释。

例如标签会被包围在由 FrontPage 和 Expression Web 创建的 HTML 注释中。

作为一项规则，这些标签的存在，有助于对创建这些标签的软件的支持。

8.html css

html如何使用样式呢？

有以下3种方式：

8.1外部样式表

当你想要的样式需要被应用到很多界面时，你可以单独写一个css样式表，通过link标签进行引用

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

8.2内部样式表

当一个单独的文件需要使用特别的样式时，可以在head部分通过’

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

8.3内联样式

当个别元素需要特殊的样式时，我们可以通过内联样式去应用。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

9.html链接

当我们想要设置一个超链接的时候，我们可以通过’'标签来创建链接。

有两种使用 ‘’ 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

9.1链接的基本使用

如何使用呢？

url是你想要跳转的链接地址，可以设置本地链接或者万维网链接。

<a href="url">Link text</a>

其中有个属性target，默认为在本网页打开，但设置属性值为_blank时会跳转到新页面打开

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

9.2name属性

name规定锚的名称。通过name属性可以创建html页面中的标签，读者看不见。我们可以通过创建这种锚的方式，快速定位到读者需要的内容。

<a name="label">锚（显示在页面上的文本）</a>

具体怎么实现呢？

先创建一个锚

<a name="tips">基本的注意事项 - 有用的提示</a>

2.然后我们在同一个文件里面创建一个指向该锚的链接

<a href="#tips">有用的提示</a>

当我们在外部界面想要创建指定该锚的链接时

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

10.html图像

html中通过’'标签进行图像引用，具体通过src属性进行引用

<img src="url" />

当我们浏览器暂时无法加载出图片时，我们可以用替代文本属性alt进行信息替换，告知读者丢失的信息。

<img src="boat.gif" alt="Big Boat">

11.html表格

表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

表格的表头使用标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

一些浏览器中，没有内容的单元格无法显示边框，这时我们的可读性较差，为了避免这种情况，我们可以通过加入占位符来解决。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
    <!--用空格占位符-->
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

11.1标题

我们可以使用标签为表格添加标题，自动是加黑加粗

<html>

<body>

<h4>这个表格有一个标题，以及粗边框：</h4>

<table border="6">
<caption>我的标题</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>

</html>

11.2单元格边距与间距

在

标签中具有cellpadding属性，可以通过控制cellpadding属性来改变单元格边距。

<html>

<body>

<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellpadding：</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oUOUl2Xp-1682216716372)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230302092226101.png)]

同样具有cellspacing属性，可以来改变单元格之间的间距

<html>

<body>

<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellspacing：</h4>
<table border="1" 
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R1cpO67v-1682216716374)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230302092424289.png)]

表格

描述

‘’

定义表格

‘

’

定义表格标题。

‘

’

定义表格的表头。

‘

定义表格的行。

‘

’

定义表格单元。

‘

定义表格的页眉。

‘

定义表格的主体。

‘

定义表格的页脚。

‘

定义用于表格列的属性。

‘

定义表格列的组。

’’’’’’

12.html列表

12.1无序列表

无序列表始于

标签。每个列表项始于
。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Coffee
Milk

列表项中不仅可以添加文字，还有使用段落、换行符、图片等

除此之外，我们可以通过改变其中的type属性来使用不同的序号符号。

常见的有circle、square。

Coffee
Milk

Coffee
Milk

12.2有序列表

有序列表始于

标签。每个列表项始于
标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Coffee
Milk

同无序列表一样，可以插入其他的内容,也可以使用不同的图标

数字列表：

苹果
香蕉
柠檬
桔子

字母列表：

苹果
香蕉
柠檬
桔子

小写字母列表：

苹果
香蕉
柠檬
桔子

罗马字母列表：

苹果
香蕉
柠檬
桔子

小写罗马字母列表：

苹果
香蕉
柠檬
桔子

### 12.3定义列表

自定义列表以

标签开始。每个自定义列表项以开始。每个自定义列表项的定义以

开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Coffee

Black hot drink

Milk

White cold drink

13.html块

大多数html元素为块级元素或者内联元素，块级元素在浏览器显示时，通常会以新行来开始或者结束。

例子：

,
,

,

内联元素通常不会以新行开始

例子：, , ,

13.1div标签

HTML

元素是块级元素，它是可用于组合其他 HTML 元素的容器。

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性。

’

‘ 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用元素进行文档布局不是表格的正确用法。

元素的作用是显示表格化的数据。

13.2span标签

HTML 元素是内联元素，可用作文本的容器。

元素也没有特定的含义。

当与 CSS 一同使用时，元素可用于为部分文本设置样式属性。

14.html类

在html中我们可以通过设置类的方式来设置相同的css样式，或者为不同类设置不同的样式。

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</div> 

</body>
</html>

html中’‘元素时行内元素，能够用作文本的容器。我们同样也可以为’'元素设置类，来设置不同的样式。

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

15.html中的id

id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。

id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。

下面的例子中我们有一个 <h1> 元素，它指向 id 名称 “myHeader”。这个 <h1> 元素将根据 head 部分中的 #myHeader 样式定义进行样式设置：

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

**注释：**id对大小写敏感，并且id必须包含一个字符，不能包含空白字符。

总结：

id 属性用于为 HTML 元素指定唯一的 id
id 属性的值在 HTML 文档中必须是唯一的
CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式
id 属性的值区分大小写
id 属性还可用于创建 HTML 书签
JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素

16.html中的内联框架

内联框架可以在网页中显示网页，使用’'可以进行实现。

<iframe src="URL"></iframe>

URL指向内嵌的网页的地址。

不仅如此，iframe还可以设置高度和宽度，属性值默认单位为像素px，也可以用百分比来进行设置。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

假如我们不想显示内联框架的边框时，html提供了一个frameborder属性，当我们设置为0的时候就可以移除边框。

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

同样，内联框架也可以作为链接的目标，通过target与iframe中的name属性进行绑定。

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

17.html JavaScript

html中的’

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

假如浏览器无法支持脚本运行，''标签可以定义替代内容。

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>

18.html头部

18.1 head元素

''是所有头部元素的容器。’ '内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

18.2 title元素

''标签定义了文档的标题。

title 元素能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

18.3 base元素

' '标签为页面上的所有链接规定默认地址或默认目标（target）：

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

18.4 link元素

标签定义文档与外部资源之间的关系。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

18.5 style元素

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

18.6 meta元素

meta 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

meta标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

19.html布局

html5布局元素

header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题

20.html实体

html中有些字符是预留的，例如<和>这些会被误以为是标签的字符，但我们还是希望可以使用这些字符的时候，这时我们就必须使用字符实体了。

显示结果	描述	实体名称	实体编号
	空格	&nbsp	&#160
<	小于号	&lt	&#60
>	大于号	&gt	&#62
&	和号	&amp	&#38
"	引号	&quot	&#34
’	撇号	&apos (IE不支持)	&#39
￠	分（cent）	&cent	&#162
£	镑（pound）	&pound	&#163
¥	元（yen）	&yen	&#165
€	欧元（euro）	&euro	&#8364
§	小节	&sect	&#167
©	版权（copyright）	&copy	&#169
®	注册商标	&reg	&#174
™	商标	&trade	&#8482
×	乘号	&times	&#215
÷	除号	&divide	&#247

21.html 表单

html表单用于收集用户输入。

21.1 form元素

HTML 表单用于收集用户输入。

<form>
 .
form elements
 .
</form>

21.2 input元素

input是使用最多的表单元素，根据其中type的不同来选择不同的使用类型。

类型	描述
text	定义常规文本输入。
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）

name:

文本宽度默认是20个字符。

Male
Female

<input type=“submit”> 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

First name:

Last name:

21.3 action元素

action用于定义提交表单时的动作。通常，表单会被提交到web服务器上的网页。在上面的例子中，指向了某个服务器脚本来处理该表单。

<form action="action_page.php">

当省略action属性时，会默认是当前页面。

21.4 method元素

method属性用于规定在提交表单时所用的HTTP方法（post或get）

<form action="action_page.php" method="GET">

<form action="action_page.php" method="POST">

默认是get方法。

get：GET 最适合少量数据的提交。浏览器会设定容量限制。

以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串

post：如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签

21.5 fieldset组合表单数据

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

21.6 target属性

值	描述
_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

默认是_self，在当前窗口打开。

21.7 autocomplete属性

autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

<form action="/action_page.php" autocomplete="on">

21.8 novalidate属性

novalidate 属性是一个布尔属性。

如果已设置，它规定提交时不应验证表单数据。

<form action="/action_page.php" novalidate>

22.html表单元素

22.1 select元素

select元素——下拉列表

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

在option中定义待选择选项

22.2 textarea元素

textarea元素定义多行输入字段（文本域）：

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

看起来就像一个文本输入框。

23.html输入类型

上面我们讲过了文本输入类型text，接下来我们将介绍一些别的输入类型。

23.1 password

这个类型用于定义密码字段

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>

password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

23.2 submit

‘’ 定义提交表单数据至表单处理程序的按钮。

表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。

在表单的 action 属性中规定表单处理程序（form-handler）：

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

如果您省略了提交按钮的 value 属性，那么该按钮将获得默认文本。

23.3 radio

定义单选按钮。

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

23.4 checkbox

定义复选框。

复选框允许用户在有限数量的选项中选择零个或多个选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

23.5 number

用于应该包含数字值的输入字段。

您能够对数字做出限制。

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

属性	描述
disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

23.6 date

用于应该包含日期的输入字段。

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

类似的还有week、time、month等等

24.html input属性

24.1 value

value用于规定输入字段的初始值。

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

First name上会出现初始值Bill。

24.2 readonly

readonly 属性规定输入字段为只读（不能修改）

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

其不需要输入特定的值，但也可以使用readonly=‘readonly’。

24.3 disabled

disabled 属性规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

24.4 size

size 属性规定输入字段的尺寸（以字符计）

<form action="">
 First name:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

24.5 maxlength

maxlength 属性规定输入字段允许的最大长度

<form action="">
 First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

如设置 maxlength 属性，则输入控件不会接受超过所允许数的字符。

该属性不会提供任何反馈。如果需要提醒用户，则必须编写 JavaScript 代码。

**注释：**输入限制并非万无一失。JavaScript 提供了很多方法来增加非法输入。如需安全地限制输入，则接受者（服务器）必须同时对限制进行检查。

24.6 list

list 属性引用的元素中包含了元素的预定义选项。

<input list="browsers">

<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist>

24.7 multiple

multiple 属性是布尔属性。

如果设置，则规定允许用户在元素中输入一个以上的值。

multiple 属性适用于以下输入类型：email 和 file。

Select images: <input type="file" name="img" multiple>

24.8 pattern

pattern 属性规定用于检查元素值的正则表达式。

pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。

Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

24.9 placeholder

placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。

该提示会在用户输入值之前显示在输入字段中。

placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

<input type="text" name="fname" placeholder="First name">

25.input form*属性

25.1 form属性

input中的form属性规定元素所属表单，必须与它所属的元素的id属性一致。

<form action="/action_page.php" id="form1">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="提交">
</form>

<label for="lname">名字：</label>
<input type="text" id="lname" name="lname" form="form1">

25.2 formaction属性

input 的 formaction 属性规定当提交表单时，对输入（数据）进行处理的文件的 URL。

**注释：**该属性会覆盖 <form> 元素的 action 属性。

formaction 属性适用于以下输入类型：submit 和 image。

<form action="/action_page.php">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">名字：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="提交">
  <input type="submit" formaction="/action_page2.php" value="以管理员提交">
</form>

二.CSS

1.CSS简介介绍

CSS是指层叠样式表（Cascading Style Sheets），因为html只是用于显示网页内容，当我们开发大型网站时想要将样式应用到每个html界面时这将是一个繁重且漫长的过程，所以就开发了css节省了大量工作。

2.css语法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jEwjrEx6-1682216716376)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230306165311413.png)]

选择器是指我们需要设置样式的html元素
在声明一条或多条时需要用分号隔开
每条包含一个css属性名称和值，用冒号分开
多条css声明用分号，每条css声明用花括号包围

p {
  color: red;
  text-align: center;
}

3.css选择器

3.1 简单选择器

3.1.1 元素选择器

根据元素名称来选择html元素

p {
  text-align: center;
  color: red;
}

3.1.2 id选择器

根据html中的id属性来选择特定的元素，id在一个界面是唯一的，所以我们只会选择唯一的元素，如果要使用id选择器，使用#加上id名称。

#para1 {
  text-align: center;
  color: red;
}

3.1.3 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

.center {
  text-align: center;
  color: red;
}

还可以在特定的元素中进行使用

p.center {
  text-align: center;
  color: red;
}

html元素中还可以引用多个类

<p class="center large">这个段落引用两个类。</p>

p元素将根据class='center’和class='large’来锁定

3.1.4 通用选择器

使用通用选择器(*)选择页面上的所有html元素

* {
  text-align: center;
  color: blue;
}

3.1.5 分组选择器

分组选择器选取所有具有相同样式定义的html元素，我们提倡最好对选择器进行分组，以最大程度缩减代码。

h1, h2, p {
  text-align: center;
  color: red;
}

3.2 组合选择器

主要根据属性之间的特定关系来进行锁定，一般有四种不同的组合器：

后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)

3.2.1 后代选择器

后代选择器可以匹配指定后代的所有元素

div p {
  background-color: yellow;
}

选择了div元素下的所有p元素

3.2.2 子选择器

子选择器匹配指定元素子元素的所有元素

div > p {
  background-color: yellow;
}

选择了div的子元素，子元素下的所有p元素

3.2.3 相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

div + p {
  background-color: yellow;
}

选择了与div同级的p元素，并且具有相同的父元素。

3.2.4 通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

div ~ p {
  background-color: yellow;
}

相较于相邻兄弟选择器，通用兄弟选择器会去选择与div同级的所有p元素，不管是否具有相同的父元素。

3.3伪类选择器

伪类用于定义元素的特殊状态，例如它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

3.3.1 锚伪类

链接能以不同的方式显示

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

所有css伪类

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的元素。
:disabled	input:disabled	选择每个被禁用的元素。
:empty	p:empty	选择没有子元素的每个元素。
:enabled	input:enabled	选择每个已启用的元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个元素。
:first-of-type	p:first-of-type	选择作为其父的首个元素的每个元素。
:focus	input:focus	选择获得焦点的元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的元素。
:invalid	input:invalid	选择所有具有无效值的元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个元素的每个元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个元素的每个元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个元素的每个元素。
:only-of-type	p:only-of-type	选择作为其父的唯一元素的每个元素。
:only-child	p:only-child	选择作为其父的唯一子元素的元素。
:optional	input:optional	选择不带 “required” 属性的元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的元素。
:read-write	input:read-write	选择不带 “readonly” 属性的元素。
:required	input:required	选择指定了 “required” 属性的元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的元素。
:visited	a:visited	选择所有已访问的链接

3.4伪元素选择器

伪元素用于设置元素指定部分的样式，它可以用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

3.4.1 ::first-line伪元素

可以通过::first-line伪元素来向文本的首行添加特殊样式

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

3.4.2 ::first-letter伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

注意：::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align（仅当 “float” 为 “none”）
text-transform
line-height
float
clear

选择器	例子	例子描述
::after	p::after	在每个元素之后插入内容。
::before	p::before	在每个元素之前插入内容。
::first-letter	p::first-letter	选择每个元素的首字母。
::first-line	p::first-line	选择每个元素的首行。
::selection	p::selection	选择用户选择的元素部分。

3.5属性选择器

用于带有特殊属性或者属性值的html元素进行设置样式。

3.5.1 [attribute]选择器

[attribute]选择器用于选取指定属性的元素

a[target] {
  background-color: yellow;
}

选择了带有target的a元素

3.5.2 [attribute=“value”] 选择器

用于选取带有指定属性和值的元素

a[target="_blank"] { 
  background-color: yellow;
}

选取所有带有 target=“_blank” 属性的 a 元素

不仅仅如此，还可以通过正则表达式进行限制。

选择器	例子	例子描述
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target=“_blank” 属性的所有元素。
[attribute~=value]	[title~=flower]	选择带有包含 “flower” 一词的 title 属性的所有元素。
[attribute\|=value]	[lang\|=en]	选择带有以 “en” 开头的 lang 属性的所有元素。
[attribute^=value]	a[href^=“https”]	选择其 href 属性值以 “https” 开头的每个元素。
[attribute$=value]	a[href$=“.pdf”]	选择其 href 属性值以 “.pdf” 结尾的每个元素。
[attribute=value*]	a[href*=“w3school”]	选择其 href 属性值包含子串 “w3school” 的每个元素。

4.css背景

4.1 background-color

background-color用于指定元素的背景颜色

body {
  background-color: lightblue;
}

可以通过：

颜色特定的名称，例如"red"
16进制数，例如"#ff0000"
RGB值，例如"rgb(255,0,0)"

opacity属性用于元素的不透明度/透明度。取值范围为0.0-1.0，越低越透明。

div {
  background-color: green;
  opacity: 0.3;
}

**注意：**使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

如果不想使子元素也应用之前的不透明度，可以使用RGBA

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

4.2 background-image

background-image属性用于指定元素背景的图像

body {
  background-image: url("paper.gif");
}

**注意：**使用背景图像时，请使用不会干扰文本的图像。

4.3 background-repeat

默认下，background-image属性在水平和垂直方向上都是会重复图像。我们可以通过background-repeat来实现某个方向的单独重复。

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

以上可以实现x轴水平方向的重复，把属性改成repeat-y可以实现y轴垂直方向的重复。

假如我们不想重复，只出现一次：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

4.4 background-position

background-position 属性用于指定背景图像的位置。

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

4.5 background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

这时图片就被固定在了右上角。

如果我们需要图片随着网页一起滚动

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

4.6 background

如果想要缩短代码量，可以用background这个属性，设置全部的背景属性，这是一种简写。

在使用简写属性时，我们必须按照一定顺序进行属性设置：

background-color
background-image
background-repeat
background-attachment
background-position

其中的属性值缺一并不要紧，但是要按照这个先后顺序设置

5.css边框

border属性用于设置元素边框的样式、宽度和颜色

5.1边框样式

border-style用于指定边框的类型

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

5.2 边框宽度

border-width属性指定四个边框的宽度

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
} 

p.four {
  border-style: dotted;
  border-width: thick;
}

同样可以一次设置多个边框值

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */

5.3 边框颜色

border-color属性用于设置四个边框的颜色

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

同一边框的不同部分也可以设置不同颜色

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

5.4 边框单独的边

我们可以通过属性来设置边框各个边的样式

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

5.5 border简写属性

同background相同，border也有简写属性

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color

p {
  border: 5px solid red;
}

5.6 圆角边框

border-radius属性可以为属性添加圆角边框

p {
  border: 2px solid red;
  border-radius: 5px;
}

总结：

属性	描述
border	简写属性，在一条声明中设置所有边框属性。
border-color	简写属性，设置四条边框的颜色。
border-radius	简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style	简写属性，设置四条边框的样式。
border-width	简写属性，设置四条边框的宽度。
border-bottom	简写属性，在一条声明中设置所有下边框属性。
border-bottom-color	设置下边框的颜色。
border-bottom-style	设置下边框的样式。
border-bottom-width	设置下边框的宽度。
border-left	简写属性，在一条声明中设置所有左边框属性。
border-left-color	设置左边框的颜色。
border-left-style	设置左边框的样式。
border-left-width	设置左边框的宽度。
border-right	简写属性，在一条声明中设置所有右边框属性。
border-right-color	设置右边框的颜色。
border-right-style	设置右边框的样式。
border-right-width	设置右边框的宽度。
border-top	简写属性，在一条声明中设置所有上边框属性。
border-top-color	设置上边框的颜色。
border-top-style	设置上边框的样式。
border-top-width	设置上边框的宽度。

6.外边框

6.1 margin基本属性

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

通过 CSS，您可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。

CSS 拥有用于为元素的每一侧指定外边距的属性：

margin-top
margin-right
margin-bottom
margin-left

所有外边框属性都可以设置以下的值：

auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距

外边框同样可以简写属性

margin 属性是以下各外边距属性的简写属性：

margin-top
margin-right
margin-bottom
margin-left

p {
  margin: 25px 50px 75px 100px;
}

6.2 外边框合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d6xWNZkL-1682216716379)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230315191241770.png)]

当一个元素在另一个元素中的时候，也可以合并

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j0Oi8wCH-1682216716380)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230315215236772.png)]

上下外边距会进行合并

甚至一个空元素具有外边距可以自行合并

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QgOA6fsX-1682216716381)(D:\笔记\image-20230315215348188.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fZCXiqsG-1682216716382)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230315215400733.png)]

**注释：**只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

7.内边距

padding 属性用于在任何定义的边界内的元素内容周围生成空间。

通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top
padding-right
padding-bottom
padding-left

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距

**提示：**不允许负值。

同样拥有简写属性

padding 属性是以下各内边距属性的简写属性：

padding-top
padding-right
padding-bottom
padding-left

7.1 内边距与元素宽度

CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。

因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。

div {
  width: 300px;
  padding: 25px;
}

在这里，

元素的宽度为 300px。但是，

元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px）

若要将宽度保持为 300px，无论填充量如何，那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

8.css高度和宽度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

height 和 width 属性可设置如下值：

auto - 默认。浏览器计算高度和宽度。
*length* - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。
initial - 将高度/宽度设置为默认值。
inherit - 从其父值继承高度/宽度。

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

8.1 max-width

max-width 属性用于设置元素的最大宽度。

可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。

当浏览器窗口小于元素的宽度（500px）时，会发生之前那个 <div> 的问题。然后，浏览器会将水平滚动条添加到页面。

在这种情况下，使用 max-width 能够改善浏览器对小窗口的处理。

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

注释：max-width 属性的值将覆盖 width（宽度）。

9.css框模型

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-asPHC9IC-1682216716383)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230318173653262.png)]

内容 - 框的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的。
边框 - 围绕内边距和内容的边框。
外边距 - 清除边界外的区域。外边距是透明的。

**提示：**背景应用于由内容和内边距、边框组成的区域

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

9.1 元素宽度和高度

**重要提示：**使用 CSS 设置元素的 width 和 height 属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

10.css轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

CSS 拥有如下轮廓属性：

outline-style
outline-color
outline-width
outline-offset
outline

**注意：**轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

10.1 轮廓样式outline-style

outline-style 属性指定轮廓的样式，并可设置如下值：

dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dUHauRql-1682216716384)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230318183920742.png)]

10.2 轮廓宽度outline-width

outline-width 属性指定轮廓的宽度，并可设置如下值之一：

thin（通常为 1px）
medium（通常为 3px）
thick （通常为 5px）
特定尺寸（以 px、pt、cm、em 计）

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

10.3 轮廓颜色outline-color

outline-color 属性用于设置轮廓的颜色。

可以通过以下方式设置颜色：

name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

反转颜色

下例使用 outline-color: invert，执行了颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RHo6AMYm-1682216716385)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230319173435353.png)]

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

10.4 outline简写属性

outline 属性是用于设置以下各个轮廓属性的简写属性：

outline-width
outline-style（必需）
outline-color

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

10.5 轮廓偏移outline-offset

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vVMD3VJD-1682216716386)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230319174205415.png)]

就感觉向轮廓和元素之间又填充了空白

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 25px;
}

11.css文本

11.1 css颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

颜色名 - 比如 “red”
十六进制值 - 比如 “#ff0000”
RGB 值 - 比如 “rgb(255,0,0)”

body {
  color: blue;
}

h1 {
  color: green;
}

11.2 文本对齐text-align

text-align用于设置文本的水平对齐方式，可以实现左对齐、右对齐或居中对齐

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

当 text-align 属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：

div {
  text-align: justify;
}

11.2.1 文本方向

direction和unicode-bidi属性可以设置文本方向

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

direction：

值	描述
ltr	默认。文本方向从左到右。
rtl	文本方向从右到左。
inherit	规定应该从父元素继承 direction 属性的值。

unicode-bidi：unicode-bidi 属性与 direction 属性一起使用，设置或返回是否应重写文本以支持同一文档中的多种语言。

值	描述
normal	默认值。元素不会打开额外的嵌入级别。
embed	对于行内元素，此值将打开额外的嵌入级别。
bidi-override	对于行内元素，该值会创建一个覆盖；对于块容器元素，该值将为不在另一个块容器元素内的行内级别的后代创建一个覆盖。
isolate	该元素与其同胞隔离。
isolate-override
plaintext
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

11.2.2 垂直对齐vertical-align

vertical-align 属性设置元素的垂直对齐方式。

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

11.3 文字修饰text-decoration

text-decoration属性用于设置文字的修饰，例如text-decoration：none；通常用于删除链接的下划线。

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

**注释：**建议不要在非链接文本加下划线，因为这经常会使读者感到困惑。

11.4 文本转换text-transform

text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

11.5 文字间距

11.5.1 文本缩进text-indent

text-indent用于指定文本第一行的缩进

p {
  text-indent: 50px;
}

11.5.2 字母间距letter-spacing

letter-spacing 属性用于指定文本中字符之间的间距。

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

11.5.3 行高line-height

line-height用于指定行之间的间距

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

11.5.4 字间距word-spacing

word-spacing属性用于指定文本单词之间的间距

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

11.5.5 空白white-space

white-space 属性指定元素内部空白的处理方式。

此例演示如何禁用元素内的文本换行：

<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
}
</style>
</head>
<body>

<h2>空白</h2>

<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>请尝试删除 white-space 属性来看一下区别。</p>

</body>
</html>

没有这个属性将进行换行。

11.6 文字阴影text-shadow

text-shadow 属性为文本添加阴影。

text-shadow: h-shadow v-shadow blur color;

**注释：**text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

11.7 文字font

11.7.1 字体font-family

我们使用font-famliy来设置字体，font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。

**注释：**如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”。

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

11.7.2 字体样式font-style

font-style用于指定字体的样式，主要用于指定斜体字体

此属性可设置三个值：

normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

11.7.2.1 字体粗细font-weight

font-weight用于指定字体的粗细

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

11.7.2.2 字体变体font-variant

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

11.7.3 字体大小font-size

font-size用于设置字体的大小

font-size 值可以是绝对或相对大小。

绝对尺寸：

将文本设置为指定大小
不允许用户在所有浏览器中更改文本大小（可访问性不佳）
当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

设置相对于周围元素的大小
允许用户在浏览器中更改文本大小

**注释：**如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（“viewport width”）。

这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放：

<h1 style="font-size:10vw">Hello World</h1>

11.7.4 font简写属性

font 属性是以下属性的简写属性：

font-style
font-variant
font-weight
font-size/line-height
font-family

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

注意：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

11.8 css图标

如何添加图标最简单的方法是添加图标库，例如Font Awesome图标库。

如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的部分：

<script src="https://kit.fontawesome.com/yourcode.js"></script>

Bootstrap图标

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Google图标

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

11.9 css链接

四种链接状态分别是：

a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

之前的text-decoration属性就可以消除链接下的下划线

11.10 css列表

之前我们学过html通过标签设置列表，现在我们可以通过css来改变列表的样式。

list-style-type 属性指定列表项标记的类型。

下例显示了一些可用的列表项标记：

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

我们还可以通过引入外部图形来设置自己想要的图标形式

list-style-image 属性将图像指定为列表项标记：

ul {
  list-style-image: url('sqpurple.gif');
}

list-style-position 属性指定列表项标记（项目符号）的位置。

“list-style-position: outside;” 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FyKLj4aC-1682216716388)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230320190335498.png)]

"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l0OykGhc-1682216716389)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230320190356991.png)]

list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在

或
1. 中添加 margin:0 和 padding:0 ：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

列表同样拥有简写属性，顺序是：

list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
list-style-position（指定列表项标记应显示在内容流的内部还是外部）
list-style-image（将图像指定为列表项标记）

ul {
  list-style: square inside url("sqpurple.gif");
}

12.CSS布局

12.1 display

display属性用于控制布局

display可以将行内元素更改为块元素，反之亦然，对于使页面以特定方式显示同时仍遵循 Web 标准很有用。

例如：

li {
  display: inline;
}

我们可以把一个列表改变成行内元素，呈现成一排，就想导航条一样。

**注意：**设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。

span {
  display: block;
}

如果我们将span的显示方式改为块级，两个span之间就会呈现换行。

display：none和visibility：hidden的区别

前者不仅可以隐藏元素，在界面中元素也仿佛看不见一样；后者虽然可以隐藏元素，但是还是会占用空间影响布局。

inline-block

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

下例展示 display: inline、display: inline-block 以及 display: block 的不同行为：

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;  
  background-color: yellow; 
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}
</style>
</head>
<body>

<h1>display 属性</h1>

<h2>display: inline</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="a">the People's Republic of China</span>. Welcome to <span class="a">Shanghai</span>!</div>

<h2>display: inline-block</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="b">the People's Republic of China</span>. Welcome to <span class="b">Shanghai</span>!</div>

<h2>display: block</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="c">the People's Republic of China</span>. Welcome to <span class="c">Shanghai</span>!</div>

</body>
</html>

12.2 css定位position

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

static
relative
fixed
absolute
sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

下面将详细讲解这五个定位属性：

12.2.1 static

static顾名思义静态定位，它不受top，bottom，left。right影响。position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：

div.static {
  position: static;
  border: 3px solid #73AD21;
}

12.2.2 relative

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

12.2.3 fixed

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

12.2.4 absolute

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

注意：“被定位的”元素是其位置除 static 以外的任何元素。

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

12.2.5 sticky

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

这些定位元素以外，我们还可以通过z-index属性进行元素堆栈顺序排序，实现重叠元素的效果。

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

因为img的z-index设置为-1，所以图片在最后面。

12.3 溢出overflow

overflow属性用于控制内容过大，区域无法容纳的情况

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条

注释：overflow 属性仅适用于具有指定高度的块元素。

12.3.1 visible

默认溢出是可见的，这是表示它将不会被裁剪。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SfnINFX4-1682216716391)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230321192333994.png)]

就像这个样子，文字不在渲染区域仍然可以看见。

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

12.3.2 hidden

假如我们觉得上面的方式影响布局，我们可以将overflow的属性设置为hidden，隐藏溢出的部分。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-snmD7TCb-1682216716393)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230321192636518.png)]

div {
  overflow: hidden;
}

12.3.3 scroll

如果将值设置为 scroll，溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条（即使您不需要它）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WjZuEG5o-1682216716396)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230321192902749.png)]

div {
  overflow: scroll;
}

12.3.4 auto

auto 值类似于 scroll，但是它仅在必要时添加滚动条：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-btH4kFDA-1682216716398)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230322143425937.png)]

div {
  overflow: auto;
}

overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：

overflow-x 指定如何处理内容的左/右边缘。

overflow-y 指定如何处理内容的上/下边缘。

div {
  overflow-x: hidden; /* 隐藏水平滚动栏 */
  overflow-y: scroll; /* 添加垂直滚动栏 */
}

12.4 浮动float和清除clear

12.4.1 浮动float

css通过float属性进行设置浮动，又通过clear属性规定可以在清除的元素旁边以及在哪一侧浮动。

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

最简单的用法是，float 属性可实现（报纸上）文字包围图片的效果。

当我们设置float：none

<!DOCTYPE html>
<html>
<head>
<style>
img {
  float: none;
}
</style>
</head>
<body>

<h1>向右浮动</h1>

<p>在本例中，图像会在段落中向右浮动，而段落中的文本会包围这幅图像。</p>

<p><img src="/i/logo/w3logo-3.png" alt="W3School" style="width:170px;height:170px;margin-left:15px;">
领先的 Web 技术教程 - 全部免费。在 W3School，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。
我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
在 W3School，我们提供上千个实例。通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。</p>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lX2L2TcU-1682216716399)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230322145757646.png)]

将会呈现出这样的效果。

当我们设置float为right或left时

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dBCxPgRg-1682216716401)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230322145837912.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cuV6UZZ0-1682216716404)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230322145849835.png)]

12.4.2 清除clear

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：

none - 允许两侧都有浮动元素。默认值
left - 左侧不允许浮动元素
right- 右侧不允许浮动元素
both - 左侧或右侧均不允许浮动元素
inherit - 元素继承其父级的 clear 值

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  border: 1px solid red;
}

.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div4 {
  border: 1px solid red;
  clear: left;
}
</style>
</head>
<body>

<h1>不使用 clear</h1>
<div class="div1">div1</div>
<div class="div2">div2 - 请注意，在 HTML 代码中 div2 在 div1 之后。不过，由于 div1 向左浮动，div2 中的文本会流动到 div1 周围。</div>
<br><br>

<h1>使用 clear</h1>
<div class="div3">div3</div>
<div class="div4">div4 - 在此处，clear: left; 把 div4 移动到浮动的 div3 下方。值 "left" 会清除向左浮动的元素。您也可以清除 "right" 和 "both"。</div>

</body>
</html>

比如这段代码div1浮动在div2的左边，挡住了div2的内容。解决方法就是像div4中将clear设置为left，清除左侧浮动，div4将显示在div3的下方。

12.4.2.1 clearfix Hack

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

然后我们可以向包含元素添加 overflow: auto;，来解决此问题：

.clearfix {
  overflow: auto;
}

只要您能够控制外边距和内边距（否则您可能会看到滚动条），overflow: auto clearfix 就会很好地工作。但是，新的现代 clearfix hack 技术使用起来更安全，以下代码被应用于多数网站：

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

12.5 水平和垂直对齐

如果想要一个块级元素水平居中，使用margin：auto。设置元素的宽度将防止其延伸到容器的边缘。然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 20px;
}

**注意：**如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。

如果我们想要其中的文本也居中对齐，只需要设置text-align属性为center就行。

假如我们想要一个图片居中如何实现呢？

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

我们需要把图片设置为块元素，并且左右外边距设置为auoto。

那么如何实现左右对齐呢？

运用我们之前学习到的方法。

方法一：通过position定位，根据绝对定位来控制元素的位置，如果是左对齐就设置left：0px，右对齐就设置right：0px。

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

方法二：还有一种就是使用刚刚学习的浮动，设置float：left或right

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

学会了水平对齐，接下来如何实现垂直对齐呢？

方法一：设置相同的上下内边距，这是一个简单的方法。

.center {
  padding: 70px 0;
  border: 3px solid green;
}

还有一个技巧就是设置值相等的height和line-height。

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* 如果有多行文本，请添加如下代码：*/
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

方法二：如果不想使用padding和line-height，还可以通过position和transform

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法三：还可以使用弹性盒子

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

13.css导航栏

13.1 垂直导航栏

导航栏＝链接列表

导航栏需要标准 HTML 作为基础。

在我们的实例中，将用标准的 HTML 列表构建导航栏。

导航栏基本上就是链接列表，因此使用

和
元素会很有意义：

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

然后消除列表的元素图标和内外边距填充

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

list-style-type: none; - 删除项目符号。导航条不需要列表项标记。
设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。

然后我们还需要设置a标签的样式

li a {
  display: block;
  width: 60px;
}

display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。
width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。

除此之外我们还可以设置：hover进行悬停特效展示，还可以为链接设置active类向用户展示当前在哪个界面。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* 鼠标悬停时改变链接颜色 */
li a:hover {
  background-color: #555;
  color: white;
}

.active {
  background-color: #4CAF50;
  color: white;
}

如何设置一个全高固定的垂直导航栏

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* 全高 */
  position: fixed; /* 使它产生粘性，即使在滚动时 */
  overflow: auto; /* 如果侧栏的内容太多，则启用滚动条 */
}

13.2 水平导航栏

我们可以通过创建一个无序列表，将布局改为inline

li {
  display: inline;
}

display: inline; -默认情况下，

元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 当鼠标悬停时把链接颜色更改为 #111（黑色） */
li a:hover {
  background-color: #111;
}

float: left; - 使用 float 使块元素滑动为彼此相邻
display: block; - 将链接显示为块元素可以使整个链接区域都可单击（不仅是文本），而且允许我们指定填充（如果需要，还可以指定高度，宽度，边距等）
padding: 8px; - 使块元素更美观
background-color: #dddddd; - 为每个元素添加灰色背景色

还可以通过之前学过的定位实现导航栏的不同位置粘连。

/*顶部*/
ul {
  position: fixed;
  top: 0;
  width: 100%;
}

/*底部*/
ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

14.css下拉菜单

14.1 下拉文本

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h1>可悬停的下拉菜单</h1>

<p>请把鼠标移到文本上，已查看下拉内容。</p>

<div class="dropdown">
  <span>把鼠标移到我上面</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>

</body>
</html>

HTML

使用任何元素打开下拉菜单内容，例如或元素。

使用容器元素（如

）创建下拉内容，并在其中添加任何内容。

用

元素包围这些元素，使用 CSS 正确定位下拉内容。

CSS

.dropdown 类使用 position:relative，当我们希望将下拉内容放置在下拉按钮的正下方（使用 position:absolute）时，需要使用该类。

.dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示（请看下文）。请注意，min-width 设置为 160px。可随时更改此设置。提示：如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％（设置 overflow:auto 可实现在小屏幕上滚动）。

我们用了 CSS box-shadow 属性，而不是边框，这样下拉菜单看起来像一张“卡片”。

当用户将鼠标移到下拉按钮上时，:hover 选择器用于显示下拉菜单。

14.2 下拉式菜单

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h1>下拉菜单</h1>

<p>请把鼠标移到按钮上，以打开下拉菜单。</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  </div>
</div>

<p><b>Note:</b>我们的测试链接用了 href="#"。真实的网站会用 URL。</p>

</body>
</html>

15.css计数器

CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。

如需使用 CSS 计数器，我们将使用以下属性：

counter-reset - 创建或重置计数器
counter-increment - 递增计数器值
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

如需使用 CSS 计数器，必须首先使用 counter-reset 创建它。

15.1 自动编号

例如我们要去创建一个递增的计数器标题：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h1>使用 CSS 计数器：</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h2>JavaScript 教程</h2>

</body>
</html>

15.2 嵌套计数器

下面的例子为页面（section）创建一个计数器，为每个

元素（subsection）创建一个计数器。

“section” 计数器为每个

元素计数，同时写入 “Section” 以及 section 计数器的值，“subsection” 计数器为每个

元素计数，同时写入 section 计数器的值以及 subsection 计数器的值：

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>


<h1>HTML 教程：</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>

<h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML 教程：</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
</html>

16.css特异性

如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。

将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。

通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性！

如何计算特异性呢？

从 0 开始，为 style 属性添加 1000，为每个 ID 添加 100，为每个属性、类或伪类添加 10，为每个元素名称或伪元素添加 1。

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

A 的特异性为 1（一个元素）
B 的特异性为 101（一个 ID 引用以及一个元素）
C 的特异性为 1000（行内样式）

由于 1 < 101 < 1000，因此第三条规则（C）具有更高的特异性，所以将被应用。

特异性规则1：

在特异性相同的情况下：最新的规则很重要 - 如果将同一规则两次写入外部样式表，那么样式表中后面的规将更靠近要设置样式的元素，因此会被应用：

h1 {background-color: yellow;}
h1 {background-color: red;}

虽然定义的同一个样式，但是由于最后一条是最新定义的，所以h1标题的颜色将会是红色。

特异性规则2：

ID 选择器比属性选择器拥有更高的特异性

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

第一条规则比其他两条更具体，并且id选择器比属性选择器具有更高的特异性，所以背景颜色将会被设置成绿色。

特异性规制3：

上下文选择器比单一元素选择器更具体

来自外部 CSS 文件：

#content h1 {background-color: red;}

在 HTML 文件中：

<style>
#content h1 {
  background-color: yellow;
}
</style>

将适用后一条规则。

特异性规则4：

类选择器会击败任意数量的元素选择器

.intro {background-color: yellow;}
h1 {background-color: red;}

此外，通用选择器以及被继承的值拥有 0 - * 的特异性，body * 及类似拥有 0 的特异性。被继承的值的特异性也为 0。

三.js

1.js变量

下面简要说一下js的三个变量类型:var,let.const

var是弱类型变量,属于是全局范围变量类型,如果在之前定义了一个var类型变量x,我们在后续的代码中改变x的值,那么x的值就为最后一次改变时的值.

var x=10;
{
var x=7;
}
var x=8;
//那么x的值为8

let是块作用域变量类型,假如我们想要一个变量只在{}作用域中生效,var无法为我们提供方法,但let却可以做到.

var x=7;
{
let x=10;
//里面x的值为10
}
//外面x的值仍为7

//假如我们想要再一次定义
let x=10; //这样是不合法的

在相同的作用域下,let重新定义var是不合法的

var x=10;
let x=1; //这样是不合法
{
    
}

而const,通过 const 定义的变量与 let 变量类似，但不能重新赋值

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

const只能在声明时赋值,并且作用域和let相似,只在一个块中

const PI;
PI = 3.14159265359;    //这样是错误的

const PI= 3.14159265359;  //这样是正确的

但是,虽然我们不能改变const的值,但是可以改变const其中的属性

// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";

//这样是允许的
-------------------------------------------
const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

//这样是不允许的

2.js事件

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

3.js字符串

3.1 字符串方法

3.1.1 length()

length方法用于返回字符串的长度

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

3.1.2 查找字符串

indexOf()方法返回字符串中文本首次出现的索引

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");

js中索引也是从0开始的

我们还可以查找最后一次出现的索引，使用的是lastIndexOf()方法

4.js函数

4.1 函数的几种使用类型

javascript通过function关键字进行定义函数，函数名可包含字母、数字、下划线和美元符号，其中的参数通过逗号隔开，通过return进行返回结果。

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
    return 返回的结果
}

如何使用函数呢？

我们只需要通过函数名（）就能进行函数的调用

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

//调用的函数对象
document.getElementById("demo").innerHTML = toCelsius;

//调用的函数结果
document.getElementById("demo").innerHTML = toCelsius();

当我们只需要使用一次这个函数的时候，我们可以使用匿名函数

(function(参数一,参数二，....){
	函数体
	return
})

还有种更简洁的方式——箭头函数

()=>{
    函数体
    return
}

4.2 arguments对象

有一种特殊对象arguments，开发者无需明确指出参数名，就能访问它们，就想数组一样通过索引就可以访问。

function sayHi() {
  if (arguments[0] == "bye") {
    return;
  }

  alert(arguments[0]);
}

我们可以通过arguments[0]访问第一个参数，之后的参数索引依次类推。不仅如此，我们还可以通过length方法来检测参数的个数。

function howManyArgs() {
  alert(arguments.length);
}

howManyArgs("string", 45);//'2'
howManyArgs();//'0'
howManyArgs(12);//'1'

4.3 call()和apply()

call() 方法是预定义的 JavaScript 方法。

它可以用来调用所有者对象作为参数的方法。

通过 call()，您能够使用属于另一个对象的方法。

本例调用 person 的 fullName 方法，并用于 person1和person2：

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
var person2 = {
    firstName:"Steve",
    lastName: "Jobs",
}
person.fullName.call(person1);  // 将返回 "Bill Gates"
person.fullName.call(person2);  // 将返回 "Steve Jobs"

apply() 方法与 call() 方法非常相似：

在本例中，person 的 fullName 方法被应用到 person1：

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 将返回 "Bill Gates"

但是call()和apply()之间有一些区别：

call() 方法分别接受参数。

apply() 方法接受数组形式的参数。

如果要使用数组而不是参数列表，则 apply() 方法非常方便。

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);

⭐4.4 闭包

5.js数字

JavaScript中的有一种类型为number类型，其中所有的数在计算机中都是64位双精度浮点数进行存储。

var x=50;
typeof x; //输出number

其中数字的+法运算和字符串的级联运用的同一个符号

var x=10;
var y=20;
var z='x';

//数字加法
var n1=x+y; //n1将会输出30

//数字和字符串相加，会被当做字符串进行处理
var n2=x+z;  //n2将会输出10x

var n3=x+y+z;  //n3将会输出30x

var n4=z+x+y;  //n4将会输出x1020

javascript中会尝试将字符串转换为数字

var x = "100";
var y = "10";
var z = x / y;       // z 将是 10

数字中还有一个特殊的数字为NaN（not a number）

//我们通过typeof进行类型检测
typeof NaN; //number

//任何数字于NaN进行操作返回的结果都为NaN
var x=1+NaN;  //x=NaN

我们可以通过isNaN()方法来判断是非是数字

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。

var myNumber = 2;

while (myNumber != Infinity) {          // 执行直到 Infinity
    myNumber = myNumber * myNumber;
}

JavaScript 会把前缀为 0x 的数值常量解释为十六进制。

绝不要用前导零写数字（比如 07）。

一些 JavaScript 版本会把带有前导零的数解释为八进制。

默认地，Javascript 把数显示为十进制小数。

但是您能够使用 toString() 方法把数输出为十六进制、八进制或二进制。

var myNumber = 128;
myNumber.toString(16);     // 返回 80
myNumber.toString(8);      // 返回 200
myNumber.toString(2);      // 返回 10000000

5.1 js数字方法

5.1.1 toString()

toString() 以字符串返回数值。

var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123

5.1.2 toExponential()

toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。

var x = 9.656;
x.toExponential(2);     // 返回 9.66e+0
x.toExponential(4);     // 返回 9.6560e+0
x.toExponential(6);     // 返回 9.656000e+0

5.1.3 toFixed()

toFixed() 返回字符串值，它包含了指定位数小数的数字

var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

5.1.4 toPrecision()

toPrecision() 返回字符串值，它包含了指定长度的数字：

var x = 9.656;
x.toPrecision();        // 返回 9.656
x.toPrecision(2);       // 返回 9.7
x.toPrecision(4);       // 返回 9.656
x.toPrecision(6);       // 返回 9.65600

5.2 js数组方法

5.2.1 toString()

JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 

//结果
Banana,Orange,Apple,Mango

5.2.2 join()

join() 方法也可将所有数组元素结合为一个字符串。

它的行为类似 toString()，但是您还可以规定分隔符：

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 

//结果
Banana * Orange * Apple * Mango

5.2.3 pop()和push()

pop() 方法从数组中删除最后一个元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

push() 方法（在数组结尾处）向数组添加一个新的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

5.2.4 shift()和unshift()

位移与弹出等同，但处理首个元素而不是最后一个。

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // 从 fruits 删除第一个元素 "Banana"

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

5.2.5 splice()

splice() 方法可用于向数组添加新项

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

5.2.6 concat()

concat() 方法通过合并（连接）现有数组来创建一个新数组：

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

5.2.7 slice()

slice() 方法创建新数组。它不会从源数组中删除任何元素。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

5.2.7 sort()和reverse()

sort是JavaScript最强大的数组方法之一，可以实现对数组的排序

reverse则是可以将数组进行反转顺序，两者配合一起就可以实现数组的逆向排序

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序

但是sort默认的是按字符串对值进行排序，如果排序数字的话，‘25’大于’100’，因为2大于1，我们可以通过比值函数来修正这个问题。

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

比值函数实际上是通过返回一个负、零或者正值来决定排序顺序，当sort比较两个数时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

如果我们想要实现逆向排序，修改比值函数为

points.sort(function(a, b){return b - a})

如果想要以随机顺序进行排序，引用random

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});

5.2.8 最大最小值

如果我们想要获取数组数值中的最大最小数可通过Math.min.apply和Math.max.apply来进行获取

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

function myArrayMin(arr) {
    return Math.min.apply(null, arr);
}

5.2.9 数组迭代

5.2.9.1 forEach()

forEach() 方法为每个数组元素调用一次函数（回调函数）。

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}
//forEach接收三个参数 1.项目值 2.索引值 3.数组自身
//但这里我们只需要使用项目值

5.2.9.2 map()

map()队每个数组元素执行函数创建新的数组，它不会对没有值的数组元素执行函数，并且不会改变原始数组。

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}
//map接收三个参数 1.项目值 2.索引值 3.数组自身

5.2.9.3 filter()

filter() 方法创建一个包含通过测试的数组元素的新数组。

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

5.2.9.4 reduce()和reduceRight()

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。reduce() 方法在数组中从左到右工作,而reduceRight()则相反，从右到左工作。

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}
//sum为99

//还可以为reduce()设置一个初始值
var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction,100);

function myFunction(total, value, index, array) {
  return total + value;
}
//sum为199

5.2.9.5 every()和some()

every() 方法检查所有数组值是否通过测试。

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
  return value > 18;
}

some() 方法检查某些数组值是否通过了测试。

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

function myFunction(value) {
  return value > 18;
}

两者的返回值都为Boolean类型

5.2.9.6 indexOf()和lastIndexOf()

indexOf() 方法在数组中搜索元素值并返回其位置。

array.indexOf(item, start)

item	必需。要检索的项目。
start	可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

如果未找到项目，Array.indexOf() 返回 -1。

如果项目多次出现，则返回第一次出现的位置。

lastIndexOf()则查找顺序不同，它是从数组末尾开始查找，其他与indexOf()相似

5.2.9.7 find()和findIndex()

find() 方法返回通过测试函数的第一个数组元素的值。

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

6.js日期

6.1日期的创建

Date 对象由新的 Date() 构造函数创建。

有 4 种方法创建新的日期对象：

new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)

new Date(*year*, *month*, ...) 用指定日期和时间创建新的日期对象。

7个数字分别指定年、月、日、小时、分钟、秒和毫秒（按此顺序）：

var d = new Date(2018, 11, 24, 10, 33, 30, 0);

注释：JavaScript 从 0 到 11 计算月份。

一月是 0。十二月是11。

6个数字指定年、月、日、小时、分钟、秒：

6.2日期格式

类型	实例
ISO 日期	“2018-02-19” （国际标准）
短日期	“02/19/2018” 或者 “2018/02/19”
长日期	“Feb 19 2018” 或者 “19 Feb 2019”
完整日期	“Monday February 25 2015”

6.3日期获取方法

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

6.4日期设置方法

方法	描述
setDate()	以数值（1-31）设置日
setFullYear()	设置年（可选月和日）
setHours()	设置小时（0-23）
setMilliseconds()	设置毫秒（0-999）
setMinutes()	设置分（0-59）
setMonth()	设置月（0-11）
setSeconds()	设置秒（0-59）
setTime()	设置时间（从 1970 年 1 月 1 日至今的毫秒数）

7.js数学方法

方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值，以弧度计
asin(x)	返回 x 的反正弦值，以弧度计
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度
ceil(x)	对 x 进行上舍入
cos(x)	返回 x 的余弦
exp(x)	返回 Ex 的值
floor(x)	对 x 进行下舍入
log(x)	返回 x 的自然对数（底为e）
max(x,y,z,…,n)	返回最高值
min(x,y,z,…,n)	返回最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把 x 四舍五入为最接近的整数
sin(x)	返回 x（x 以角度计）的正弦
sqrt(x)	返回 x 的平方根
tan(x)	返回角的正切

8.js中的this

JavaScript this 关键词指的是它所属的对象。

它拥有不同的值，具体取决于它的使用位置：

在方法中，this 指的是所有者对象。
单独的情况下，this 指的是全局对象。
在函数中，this 指的是全局对象。
在函数中，严格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。

像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

8.1 方法中的this

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
//在fullName方法中this指向的是方法的拥有者即person

8.2 单独下的this

var x = this;
//单独使用时拥有者就是全局对象，在浏览器窗口中就是window

"use strict";
var x = this;
//严格模式下也是

8.3 函数中的this

function myFunction() {
  return this;
}
//this指向的是函数的拥有者，即全局对象window

"use strict";
function myFunction() {
  return this;
}
//但是在严格模式下不允许默认绑定，这时thi是未定义的即undefined

8.4 显式函数绑定

call() 和 apply() 方法是预定义的 JavaScript 方法。

它们都可以用于将另一个对象作为参数调用对象方法。

您可以在本教程后面阅读有关 call() 和 apply() 的更多内容。

在下面的例子中，当使用 person2 作为参数调用 person1.fullName 时，this 将引用 person2，即使它是 person1 的方法：

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // 会返回 "Bill Gates"

8.5 箭头函数中的this

箭头函数中的this又和常规函数中的this不同，常规函数中的this指向的都是函数的调用者，而箭头函数中的this始终指向箭头函数的定义者

// 常规函数：
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

// window 对象调用该函数：
window.addEventListener("load", hello); 
//this指向window

// button 对象调用该函数：
document.getElementById("btn").addEventListener("click", hello);
//this指向button

但是在箭头函数中，下段代码中的this始终指向window

// 箭头函数：
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

// window 对象调用该函数：
window.addEventListener("load", hello);

// button 对象调用该函数：
document.getElementById("btn").addEventListener("click", hello);

9.js中的类

ES6中引入了类的概念，JavaScript中类是对象的模板

我们通过使用class关键字创建类，但一定要添加名为constructor()的方法

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

JavaScript中类不是对象，只是一个模板而已

我们还可以在类中添加类方法，就跟java一样

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}

let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "My car is " + myCar.age() + " years old.";

10.JSON

JSON 指的是 JavaScript Object Notation
JSON 是轻量级的数据交换格式
JSON 独立于语言 *****
JSON 是“自描述的”且易于理解

* JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。

JSON语法

数据是名称/值对
数据由逗号分隔
花括号保存对象
方括号保存数组

我们如何把JSON纯文本转换为JavaScript对象呢？这里以字符串进行演示。

//先创建JSON语法的字符串对象
var text = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';

//再通过JavaScript的内建函数JSON.parse()
var obj = JSON.parse(text);

//然后我们就可以使用这个对象来获取JSON中保存的数据

document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;

我们也可以通过JSON.stringify()方法将JavaScript中的任何对象转换为JSON格式字符串输出

const person = {
  name: "Bill",
  age: 19,
  city: "Seattle"
};

let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

11.js对象

在JavaScript中除了五大原始数据类型

string
number
boolean
null
undefined

大部分的数据类型都是对象，包括日期date、数组、函数等。

我们通常通过直接使用字面量来创建js对象

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

对象是易变的：它们通过引用来寻址，而非值。

var x = person;  // 这不会创建 person 的副本，x和person指向的都是一个地址，他们都是引用。

11.1 js对象属性

我们可以通过for in循环来获取对象中的所有属性

for (variable in object) {
    要执行的代码
}

添加新属性很简单，假如我们已经存在对象

person.nationality = "English";

删除则需要使用delete()方法

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
delete person.age;   // 或 delete person["age"];

这里会删除属性本身和属性的值，但是delete无法删除从原型继承而来的属性。

11.2 js对象方法

如何创建对象方法呢？假如我们已经存在对象，我们可以通过在构造器函数中添加

function person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;  
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    };
}

11.3 js对象访问器

11.3.1 get获取

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};

// 使用 getter 来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;

11.3.2 set设置

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};

// 使用 setter 来设置对象属性：
person.lang = "en";

// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.language;

11.4 js对象构造器

我们无法通过之前直接对已有对象添加属性和方法，如果我们想要向构造器中添加新的属性和方法，我们必须添加到构造器函数中

//添加nationality属性
function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.nationality = "English";
}

//添加changeName方法
function Person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;  
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    };
}

11.5 js对象原型

前面我们说我们无法直接对已有对象的构造器中添加新的属性和方法，这里我们可以使用prototype方法向构造器中添加属性和方法

//添加新的属性
function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";

//添加新的方法
function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

12.js异步

与其他函数并行运行的函数，这种行为就被称为异步

JavaScript中有一个很经典异步例子就是setTimeout()函数，可以指定超时时运行某个函数。

//设置3000毫秒之后调用myFunction()函数
setTimeout(myFunction, 3000);


function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

这里传入的是myFunction函数的引用，不是传入myFunction()调用

我们如何停止呢？

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不带 window 前缀来写。

clearTimeout() 使用从 setTimeout() 返回的变量：

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

类似上例，但是添加了“停止”按钮：

<button onclick="myVar = setTimeout(myFunction, 3000)">试一试</button>

<button onclick="clearTimeout(myVar)">停止执行</button>

还有一个例子setInterval()函数指定一定间隔调用函数

setInterval(myFunction, 1000);

function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML=
  d.getHours() + ":" +
  d.getMinutes() + ":" +
  d.getSeconds();
}

同理我们也可以停止这个函数间隔调用

clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。

window.clearInterval(timerVariable)

window.clearInterval() 方法可以不带 window 前缀来写。

clearInterval() 方法使用从 setInterval() 返回的变量：

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

12.1 js promise对象

JavaScript Promise 对象包含生产代码和对消费代码的调用，axios就是基于promise。

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code"（可能需要一些时间）

  myResolve(); // 成功时
  myReject();  // 出错时
});

// "Consuming Code" （必须等待一个兑现的承诺）
myPromise.then(
  function(value) { /* 成功时的代码 */ },
  function(error) { /* 出错时的代码 */ }
);

假如刚刚的等待超时例子我们用promise怎么写呢？

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

12.2 async和await修饰符

函数前的关键字 async 使函数返回 promise：

async function myFunction() {
  return "Hello";
}

//等同于：

async function myFunction() {
  return Promise.resolve("Hello");
}

函数前的关键字 await 使函数等待 promise：

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    myResolve("I love You !!");
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();

await只能在async函数中使用

、

13.HTML DOM

13.1 HTML DOM简介

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过DOM我们可以进行很多操作

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

13.2 HTML DOM方法

在DOM中所有HTML元素都被定义为对象

<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

其中getElementById就是方法，而innerHTML就是属性。

getElementById()是通过id来获取对象，而innerHTML属性可以用于获取和改变任何HTML元素。

查找HTML元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

改变HTML元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

查找HTML对象

属性	描述	DOM
document.anchors	返回拥有 name 属性的所有元素。	1
document.applets	返回所有元素（HTML5 不建议使用）	1
document.baseURI	返回文档的绝对基准 URI	3
document.body	返回元素	1
document.cookie	返回文档的 cookie	1
document.doctype	返回文档的 doctype	3
document.documentElement	返回元素	3
document.documentMode	返回浏览器使用的模式	3
document.documentURI	返回文档的 URI	3
document.domain	返回文档服务器的域名	1
document.domConfig	废弃。返回 DOM 配置	3
document.embeds	返回所有元素	3
document.forms	返回所有元素	1
document.head	返回元素	3
document.images	返回所有元素	1
document.implementation	返回 DOM 实现	3
document.inputEncoding	返回文档的编码（字符集）	3
document.lastModified	返回文档更新的日期和时间	3
document.links	返回拥有 href 属性的所有和元素	1
document.readyState	返回文档的（加载）状态	3
document.referrer	返回引用的 URI（链接文档）	1
document.scripts	返回所有

13.3 HTML DOM 事件

13.3.1 onclik事件

很常见的就是当我们点击一个按钮或者区域的时候触发事件

在本例中，当用户点击 <h1> 时，会改变其内容：

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">点击此文本！</h1>

<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>

</body>
</html>

13.3.2 onload和onunload事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。

onload 和 onunload 事件可用于处理 cookie。

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<p id="demo"></p>

<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookie 已启用";
  } else {
    text = "Cookie 未启用";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

13.3.3 onchange事件

onchange 事件经常与输入字段验证结合使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段内容时，会调用 upperCase() 函数。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>
</head>
<body>

请输入您的名字：<input type="text" id="fname" onchange="myFunction()">

<p>离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>

</body>
</html>

13.3.4 onmouseover和onmouseout事件

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
请把鼠标移上来</div>

<script>
function mOver(obj) {
  obj.innerHTML = "谢谢您"
}

function mOut(obj) {
  obj.innerHTML = "请把鼠标移上来"
}
</script>

</body>
</html>

13.3.5 onmousedown和onmouseup事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
点击鼠标</div>

<script>
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerHTML = "松开鼠标";
}

function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="谢谢您";
}
</script>

</body>
</html>

13.3.6 onfocus事件

onfocus是当获得焦点时触发事件

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
  x.style.background = "yellow";
}
</script>
</head>
<body>

请输入您的名字：<input type="text" onfocus="myFunction(this)">

<p>当输入字段获得焦点时，将触发一个更改背景颜色的函数。</p>

</body>
</html>

13.4 HTML DOM事件监听

addEventListener() 方法为指定元素指定事件处理程序。

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。

您能够向一个元素添加多个事件处理程序。

您能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。

您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。

当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。

您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript addEventListener()</h1>

<p>此示例使用 addEventListener() 方法将 click 事件附加到按钮。</p>

<button id="myBtn">试一试</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});
</script>

</body>
</html>

13.4.1 事件冒泡、事件捕获

事件传播是一种定义当发生事件时元素次序的方法。假如

元素内有一个

，然后用户点击了这个

元素，应该首先处理哪个元素“click”事件？

在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理

元素的点击事件，然后是

元素的点击事件。

在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理

元素的点击事件，然后是

元素的点击事件。

在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：

addEventListener(event, function, useCapture);

默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

13.5 HTMLCollection和NodeList

13.5.1 HTMLCollection

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象是类数组的 HTML 元素列表（集合）。

下面的代码选取文档中的所有

元素：

var x = document.getElementsByTagName("p");

该集合中的元素可通过索引号进行访问。

如需访问第二个

元素，您可以这样写：

y = x[1];

HTMLCollection 也许看起来像数组，但并非数组。

您能够遍历列表并通过数字引用元素（就像数组那样）。

不过，您无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join()。

13.5.2 NodeList

NodeList 对象是从文档中提取的节点列表（集合）。

NodeList 对象与 HTMLCollection 对象几乎相同。

① 如使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。

② 所有浏览器都会为 childNodes 属性返回 NodeList 对象。

③ 大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。

下面的代码选取文档中的所有

节点：

var myNodeList = document.querySelectorAll("p")

NodeList 中的元素可通过索引号进行访问。

如需访问第二个

节点，您可以这样写：

y = myNodeList[1];

HTMLCollection（前一章）是 HTML 元素的集合。

NodeList 是文档节点的集合。

NodeList 和 HTML 集合几乎完全相同。

HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。

它们都有定义列表（集合）中项目数的 length 属性。

它们都可以通过索引 (0, 1, 2, 3, 4, …) 像数组那样访问每个项目。

访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。

访问 NodeList 项目，只能通过它们的索引号。

只有 NodeList 对象能包含属性节点和文本节点。

节点列表不是数组！

节点数组看起来像数组，但并不是。

您能够遍历节点列表并像数组那样引用其节点。

不过，您无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()。

14.HTML BOM

14.1 HTML BOM简介

浏览器对象模型（Browser Object Model (BOM)）

不存在浏览器对象模型（BOM）的官方标准。

现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。

14.2 window对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象也是 window 对象属性：

window.document.getElementById("header");

等同于：

document.getElementById("header");

两个属性可用用于确定浏览器窗口的尺寸。

这两个属性都以像素返回尺寸：

window.innerHeight - 浏览器窗口的内高度（以像素计）

window.innerWidth - 浏览器窗口的内宽度（以像素计）

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

14.3 screen对象

14.3.1 screen宽度

screen.width 属性返回以像素计的访问者屏幕宽度。

显示以像素计的屏幕宽度：

document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。

显示以像素计的屏幕可用宽度：

document.getElementById("demo").innerHTML = "Available Screen Width: " + screen.availWidth;

14.3.2 screen高度

screen.height 属性返回以像素计的访问者屏幕的高度。

显示以像素计的屏幕高度：

document.getElementById("demo").innerHTML = "Screen Height: " + screen.height;

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。

显示以像素计的屏幕可用高度：

document.getElementById("demo").innerHTML = "Available Screen Height: " + screen.availHeight;

14.3.3 screen色深

screen.colorDepth 属性返回用于显示一种颜色的比特数。

所有现代计算机都使用 24 位或 32 位硬件的色彩分辨率：

24 bits =16,777,216 种不同的 “True Colors”
32 bits = 4,294,967,296 中不同的 “Deep Colors”

更老的计算机使用 14 位：65,536 种不同的 “High Colors” 分辨率。

异常古老的计算机，以及老式的手机使用 8 位：256 中不同的 “VGA colors”。

显示以位计的屏幕色彩深度：

document.getElementById("demo").innerHTML = "Screen Color Depth: " + screen.colorDepth;

14.4 location对象

14.4.1 href URL

window.location.href 属性返回当前页面的 URL。

显示当前页面的 href (URL)：

document.getElementById("demo").innerHTML = "页面位置是 " + window.location.href;

14.4.2 hostname主机名

window.location.hostname 属性返回（当前页面的）因特网主机的名称。

显示主机的名称：

document.getElementById("demo").innerHTML = "页面主机名是 " + window.location.hostname;

14.4.3 pathname路径名

window.location.pathname 属性返回当前页面的路径名。

显示当前 URL 的路径名：

document.getElementById("demo").innerHTML = "页面路径是 " + window.location.pathname;

14.4.4 protocol协议

window.location.protocol 属性返回页面的 web 协议。

显示 web 协议：

document.getElementById("demo").innerHTML = "页面协议是 " + window.location.protocol;

14.4.5 port端口

window.location.port 属性返回（当前页面的）互联网主机端口的编号。

显示主机的端口号：

document.getElementById("demo").innerHTML = "端口号是： " + window.location.port;

14.4.6 页面跳转

assign()：可以利用此方法跳转到其他页面，和直接修改location的作用一样
```
location.assign("http://www.baidu.com");
```
reload()：可以用此方法来重新加载当前页面，如果需要将缓存清除，则传一个true。（ctrl+F5）
```
location.reload();//传一个true表示强制清空缓存
```
replace()：使用新的页面来替换当前页面，不会生成历史记录（替换后无法回退页面）。
```
location.replace("http://www.baidu.com");//使用百度首页来替换当前页面，
```

14.5 history对象

14.5.1 back回退

history.back() 方法加载历史列表中前一个 URL。

这等同于在浏览器中点击后退按钮。

在页面中创建后退按钮：

<html>
<head>
<script>
function goBack() {
    window.history.back()
 }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

14.5.2 forward前进

history forward() 方法加载历史列表中下一个 URL。

这等同于在浏览器中点击前进按钮。

在页面中创建前进按钮：

<html>
<head>
<script>
function goForward() {
    window.history.forward()
 }
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>

14.5.3 go

go() 方法从历史列表中加载一个特定的 URL：

<button onclick="myFunction()">后退两页</button>

<script>
function myFunction() {
  window.history.go(-2);
}
</script>

14.6 navigator对象

navigator对象中包含对有关访问者的信息，这里只介绍这几个方法，因为许多浏览器返回的信息是不可靠的！

14.6.1 Cookie

cookieEnabled 属性返回 true，如果 cookie 已启用，否则返回 false：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "cookiesEnabled is " + navigator.cookieEnabled;
</script>

14.6.2 appName浏览器应用程序名

appName 属性返回浏览器的应用程序名称：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "navigator.appName is " + navigator.appName;
</script>

“Netscape” 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。

14.6.3 appCodeName浏览器应用程序代码名

appCodeName 属性返回浏览器的应用程序代码名称：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "navigator.appCodeName is " + navigator.appCodeName;
</script>

“Mozilla” 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称。

14.7 弹出框

JavaScript 有三种类型的弹出框：警告框、确认框和提示框。

我们经常会用弹出框来进行一些js代码测试

14.7.1 警告框

如果要确保信息传递给用户，通常会使用警告框。

当警告框弹出时，用户将需要单击“确定”来继续。

window.alert("sometext");

window.alert() 方法可以不带 window 前缀来写。

14.7.2 确认框

如果您希望用户验证或接受某个东西，则通常使用“确认”框。

当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。

如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。

window.confirm("sometext");

window.confirm() 方法可以不带 window 前缀来编写。

14.7.3 提示框

如果您希望用户在进入页面前输入值，通常会使用提示框。

当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。

如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。

window.prompt("sometext","defaultText");

window.prompt() 方法可以不带 window 前缀来编写。

14.8 Cookie

Cookie 是在您的计算机上存储在小的文本文件中的数据。

当 web 服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切。

Cookie 是为了解决“如何记住用户信息”而发明的：

当用户访问网页时，他的名字可以存储在 cookie 中。
下次用户访问该页面时，cookie 会“记住”他的名字。

打开cookie后才能进行以下实例

14.8.1 创建cookie

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

通过 JavaScript，可以这样创建 cookie：

document.cookie = "username=Bill Gates";

您还可以添加有效日期（UTC 时间）。默认情况下，在浏览器关闭时会删除 cookie：

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

14.8.2 读取cookie

通过 JavaScript，可以这样读取 cookie：

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

14.8.3 改变cookie

通过使用 JavaScript，你可以像你创建 cookie 一样改变它：

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

旧 cookie 被覆盖。

14.8.4 删除cookie

删除 cookie 非常简单。

删除 cookie 时不必指定 cookie 值：

直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

您应该定义 cookie 路径以确保删除正确的 cookie。

*如果你不指定路径，一些浏览器不会让你删除 cookie。

15.Web API

15.1 Form API

15.1.1 约束验证DOM方法

属性	描述
checkValidity()	如果 input 元素包含有效数据，则返回 true。
setCustomValidity()	设置 input 元素的 validationMessage 属性。

15.1.2 约束验证 DOM 属性

属性	描述
validity	包含与输入元素有效性相关的布尔属性。
validationMessage	包含当有效性为 false 时浏览器将显示的消息。
willValidate	指示是否将验证 input 元素。

15.1.3 有效性属性

input 元素的有效性属性包含许多与数据有效性相关的属性：

属性	描述
customError	如果设置了自定义有效性消息，则设置为 true。
patternMismatch	如果元素的值与其 pattern 属性不匹配，则设置为 true。
rangeOverflow	如果元素的值大于其 max 属性，则设置为 true。
rangeUnderflow	如果元素的值小于其 min 属性，则设置为 true。
stepMismatch	如果元素的值对其 step 属性无效，则设置为 true。
tooLong	如果元素的值超过其 maxLength 属性，则设置为 true。
typeMismatch	如果元素的值对其 type 属性无效，则设置为 true。
valueMissing	如果元素（具有 required 属性）没有值，则设置为 true。
valid	如果元素的值有效，则设置为 true。

15.2 Storage API

Web Storage API 是一种用于在浏览器中存储和检索数据的简单语法。他非常容易使用：

localStorage.setItem("name", "Bill Gates");
localStorage.getItem("name");

15.2.1 localStorage

localStorage 对象提供对特定网站的本地存储的访问。它允许您存储、读取、添加、修改和删除该域的数据项。

存储的数据没有到期日期，并且在浏览器关闭时不会被删除。

15.2.1.1 setItem()fan方法

localStorage.setItem() 方法将数据项存储在 storage 中。

它接受一个名称和一个值作为参数：

localStorage.setItem("name", "Bill Gates");

15.2.1.2 getItem() 方法

localStorage.getItem() 方法从存储（storage）中检索数据项。

它接受一个名称作为参数：

localStorage.getItem("name");

15.2.2 sessionStorage

sessionStorage 对象与 localStorage 对象相同。

不同之处在于 sessionStorage 对象存储会话的数据。

当浏览器关闭时，数据会被删除。

sessionStorage.getItem("name");

15.2.2.1 setItem() 方法

sessionStorage.setItem() 方法将数据项存储在存储（storage）中。

它接受一个名称和一个值作为参数：

sessionStorage.setItem("name", "Bill Gates");

15.2.2.2 getItem() 方法

sessionStorage.getItem() 方法从存储（storage）中检索数据项。

它接受一个名称作为参数：

sessionStorage.getItem("name");

Storage相关属性和方法

属性/方法	描述
key(n)	返回存储中第 n 个键的名称。
length	返回存储在 Storage 对象中的数据项数。
getItem(keyname)	返回指定的键名的值。
setItem(keyname, value)	将键添加到存储中，或者如果键已经存在，则更新该键的值。
removeItem(keyname)	从存储中删除该键。
clear()	清空所有键。

16.AJAX

AJAX = Asynchronous JavaScript And XML.

AJAX 并非编程语言。

AJAX 仅仅组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

AJAX工作原理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F4bvQOUn-1682216716408)(C:\Users\28290\AppData\Roaming\Typora\typora-user-images\image-20230422150938551.png)]

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作（比如更新页面）

16.1 XMLHttpRequest对象

Ajax的核心就是XMLHttprequest对象

所有现代浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。

var xhttp;
if (window.XMLHttpRequest) {
    //创建XMLHttpRequest对象
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

16.1.1 XMLHttpRequest 对象方法

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名称psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

16.1.2 XMLHttpRequest 对象属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。0：请求未初始化1：服务器连接已建立2：请求已收到3：正在处理请求4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号200: "OK"403: "Forbidden"404: "Not Found"如需完整列表请访问 Http 消息参考手册
statusText	返回状态文本（比如 “OK” 或 “Not Found”）

16.1.3 发送请求

如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

缓存文件不是选项（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 无大小限制）
发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

16.1.3.1 get请求

一条简单的 GET 请求：

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

在上面的例子中，您可能会获得一个缓存的结果。为了避免此情况，请向 URL 添加一个唯一的 ID：

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

如果您需要用 GET 方法来发送信息，请向 URL 添加这些信息：

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

16.1.3.2 post请求

一条简单的 POST 请求：

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

如需像 HTML 表单那样 POST 数据，请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据：

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

16.1.3.3 onreadystatechange属性

通过 XMLHttpRequest 对象，您可以定义当请求接收到应答时所执行的函数。

这个函数是在 XMLHttpResponse 对象的 onreadystatechange 属性中定义的：

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

readyState 属性存留 XMLHttpRequest 的状态。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 正在处理请求
4: 请求已完成且响应已就绪

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

200: “OK”
403: “Forbidden”
404: “Page not found”

17.jQuery

jQuery旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。

查找id为id01的元素

var myElement = $("#id01");

查找所有p标签

var myElements = $("p");

查找类名为intro的元素

var myElements = $(".intro");

设置内部文本

myElement.text("Hello China!");

获取内部文本

var myText = myElement.text();

设置元素中的html内容

var myElement.html("<p>Hello World</p>");

获取元素的html内容

var content = myElement.html();

隐藏元素

myElement.hide();

显示html元素

myElement.show();

样式化HTML

myElement.css("font-size","35px");

删除HTML元素

$("#id").remove();

获取父元素

var myParent = myElement.parent();

);




#### 15.2.2 sessionStorage

sessionStorage 对象与 localStorage 对象相同。

不同之处在于 sessionStorage 对象存储会话的数据。

当浏览器关闭时，数据会被删除。

```js
sessionStorage.getItem("name");

15.2.2.1 setItem() 方法

sessionStorage.setItem() 方法将数据项存储在存储（storage）中。

它接受一个名称和一个值作为参数：

sessionStorage.setItem("name", "Bill Gates");

15.2.2.2 getItem() 方法

sessionStorage.getItem() 方法从存储（storage）中检索数据项。

它接受一个名称作为参数：

sessionStorage.getItem("name");

Storage相关属性和方法

属性/方法	描述
key(n)	返回存储中第 n 个键的名称。
length	返回存储在 Storage 对象中的数据项数。
getItem(keyname)	返回指定的键名的值。
setItem(keyname, value)	将键添加到存储中，或者如果键已经存在，则更新该键的值。
removeItem(keyname)	从存储中删除该键。
clear()	清空所有键。

16.AJAX

AJAX = Asynchronous JavaScript And XML.

AJAX 并非编程语言。

AJAX 仅仅组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

AJAX工作原理

[外链图片转存中…(img-F4bvQOUn-1682216716408)]

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作（比如更新页面）

16.1 XMLHttpRequest对象

Ajax的核心就是XMLHttprequest对象

所有现代浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。

var xhttp;
if (window.XMLHttpRequest) {
    //创建XMLHttpRequest对象
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

16.1.1 XMLHttpRequest 对象方法

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名称psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

16.1.2 XMLHttpRequest 对象属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。0：请求未初始化1：服务器连接已建立2：请求已收到3：正在处理请求4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号200: "OK"403: "Forbidden"404: "Not Found"如需完整列表请访问 Http 消息参考手册
statusText	返回状态文本（比如 “OK” 或 “Not Found”）

16.1.3 发送请求

如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

缓存文件不是选项（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 无大小限制）
发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

16.1.3.1 get请求

一条简单的 GET 请求：

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

在上面的例子中，您可能会获得一个缓存的结果。为了避免此情况，请向 URL 添加一个唯一的 ID：

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

如果您需要用 GET 方法来发送信息，请向 URL 添加这些信息：

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

16.1.3.2 post请求

一条简单的 POST 请求：

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

如需像 HTML 表单那样 POST 数据，请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据：

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

16.1.3.3 onreadystatechange属性

通过 XMLHttpRequest 对象，您可以定义当请求接收到应答时所执行的函数。

这个函数是在 XMLHttpResponse 对象的 onreadystatechange 属性中定义的：

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

readyState 属性存留 XMLHttpRequest 的状态。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 正在处理请求
4: 请求已完成且响应已就绪

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

200: “OK”
403: “Forbidden”
404: “Page not found”

17.jQuery

jQuery旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。

查找id为id01的元素

var myElement = $("#id01");

查找所有p标签

var myElements = $("p");

查找类名为intro的元素

var myElements = $(".intro");

设置内部文本

myElement.text("Hello China!");

获取内部文本

var myText = myElement.text();

设置元素中的html内容

var myElement.html("<p>Hello World</p>");

获取元素的html内容

var content = myElement.html();

隐藏元素

myElement.hide();

显示html元素

myElement.show();

样式化HTML

myElement.css("font-size","35px");

删除HTML元素

$("#id").remove();

获取父元素

var myParent = myElement.parent();

梅教授

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
前端知识笔记

一.html1.html基础1.1html标题html设置了-级标题<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>1.2html段落html段落由标签进行定义<p>This is a paragraph.</p><p>This is another paragraph.&
复制链接

扫一扫