w3c h5 + css + js笔记

本文链接： https://blog.csdn.net/denggun12345/article/details/100007334

公司电脑：/Users/yangyangzi/Desktop/YangZi2/2019前端/h5+css+js

「

1. js基础/css基础/html基础

w3school https://www.w3school.com.cn/js/index.asp

菜鸟 https://www.runoob.com/js/js-tutorial.html

注意点

css flex布局

实例 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

语法 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

扫描二维码关注公众号，回复： 7197699 查看本文章

css 浮动float和清除clear 需要理解但现在布局尽量多使用flex少使用float

css position

css 布局盒模型

css bem法则, 要用人能看懂的语言

css 作用域

js jquery

原型链

var 变量提升

this

AMD/CMD require()

闭包

js es6语法

Class

const/let

箭头函数

promise then catch 链式 all并发

解构

展开运算符

import/export

async/await

generators 理解但非重点,用async/await

2. 工程化

npm 用法

node 用途, 暂时无需深入

webpack 了解下, 暂时无需深入

babel 转义了解下, 无需深入

vue 重点,百信全行在用,文档看官方文档就行

vue-router

vue-cli

饿了吗的element-ui

react

蚂蚁的ant design

css加工 less/sass/stylus(财富在用) .less .sass .sty .css

elerion

3.调试

chrome debug

4.工具

webstorm

sublime

vscode

prettier 格式化插件

vetur vue插件

language-stylus stylus插件

color highlight 颜色高亮插件

」

============================

7.22

html

标签http://www.w3school.com.cn/tiy/t.asp?f=html_textformatting

1、h标签（标题标签）：h1~h6字体变小

2、hr标签（水平线标签）

例：

<hr/>

<p>This is a paragraph</p>

<hr />

<p>This is a paragraph</p>

3、p标签（段落标签）p

4、br标签（折行标签）br <br />

5、

5.1文本格式化标签：文本进行格式化

粗体标签：<b>This text is bold</b>

加重语气：<strong>This text is strong</strong>

大号字：<big>This text is big</big>(H5已删除)

着重文字（也是斜的）：<em>This text is emphasized</em>

斜体：<i>This text is italic</i>

小号字：<small>This text is small</small>

下标字（右下角）：

This text contains

<sub>subscript</sub>

上标字（右上角）：

This text contains

<sup>superscript</sup>

5.2、pre标签对空格和空行进行控制：

保留空格和空行

定义预格式文本：

<pre>

for i = 1 to 10

print i

next i

</pre>

5.3、不同的“计算机输出”标签的显示效果

定义计算机代码（code元素不保留多余的空格和折行）：<code>Computer code</code>

定义键盘码：<kbd>Keyboard input</kbd>

定义打字机代码：<tt>Teletype text</tt> (H5已删除)

定义计算机代码样本：<samp>Sample text</samp>

定义变量：<var>Computer variable</var>

5.4、地址标签（元素通常以斜体显示）

定义地址：<address>

Written by <a href="mailto:[email protected]">Donald Duck</a>.<br

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

5.5、缩写或首字母缩写（仅对于 IE 5 中的 acronym 元素有效；对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。）

定义缩写：<abbr title="etcetera">etc.</abbr>

定义首字母缩写：<acronym title="World Wide Web">WWW</acronym>(H5已删除)

5.6、改变文字的方向（如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)）

定义文字方向：<bdo dir="rtl">

Here is some Hebrew text

</bdo>

5.7、实现长短不一的引用语：使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现

长块引用：

定义长的引用：<blockquote>

这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。

</blockquote>

断块引用（四周都会添加空白）：

定义短的引用语(含双引号的文字)：

<q>

这是短的引用。

</q>

5.8、标记删除文本和插入文本（大多数浏览器会改写为删除文本和下划线文本；一些老式的浏览器会把删除文本和下划线文本显示为普通文本）

<p>一打有

删除字：<del>二十</del>

插入字：<ins>十二</ins> 件。

</p>

5.9、其他

定义引用、引证：<cite>元素

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

定义一个定义项目：

<dfn>

<p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p>

6、a标签：

文本链接：

指向本网站中的一个页面的链接：<a href="/index.html">本文本</a>

指向万维网上的页面的链接：<a href="http://www.microsoft.com/">

图像链接：

</a>

有两种使用 <a> 标签的方式：

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

提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

a标签属性：

1》、href = ”“

2》、target = ”_blank“打开新窗口显示

3》、name = ”“ 锚（anchor）；用name 属性创建 HTML 页面中的书签；使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了

例：

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

<a href="#tips">有用的提示</a>//在同一个文档中创建指向锚的链接

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>//在其他页面中创建指向该锚的链接

4》、跳出框架：target="_top" （？？？？）

其他常用链接：

发邮件（有发邮件的软件）：<a href="mailto:[email protected]?subject=Hello%20again">发送邮件</a>

复杂邮件链接：<a href="mailto:[email protected][email protected]&[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>

7、图像标签：<img> 是一种空标签，空标签：即只能包含属性，而且并没有闭合标签

属性：

1》src = “url”

2》alt = “”为图像定义一串预备的可替换的文本；在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像

图片常用案例：

1》HTML 页面添加背景图片：<body background="/i/eg_background.jpg">

2》文本中添加图片：<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>（对齐方式align="bottom”；align=“middle”；align=“top”，默认是bottom对齐）

3》段落添加浮动图片：

3.1》段落前：

<p>

带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。

</p>

3.2》段落右侧：

<p>

带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。

</p>

4》调整图片尺寸：<img src="/i/eg_mouse.jpg" width="200" height="200">

5》如果无法显示图像，将显示 "alt" 属性中的文本：<img src="/i/eg_goleft.gif" alt="向左转" />

6》图像链接：

</a>

7》图像映射：

</map>

8、<area>:定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）,area 元素总是嵌套在 <map> 标签中；定义图像地图中的可点击区域

属性：

1》alt

2》coords：坐标值

3》herf：

4》noherf：从图像映射排除某个区域

5》shape：default；rect；circle；poly 定义区域的形状。

6》target：_blank;_parent;_self;_top

9、<map>:定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像；定义图像地图

注释：area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

注释：<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性

属性：

id（必须属性）为 map 标签定义唯一的名称

Name（可选属性）为 image-map 规定的名称

10、表格：<table>

组成（由多标签组成）：

表格由 table 标签开始;

表格行由 tr 标签开始;

表格数据由 td 标签开始

<tr>

</tr>

<tr>

</tr>

</table>

table属性：

1》边框：border = ”1“ <table border="1">

2》单元格边距cellpadding：内容与其边框的空白 <table cellpadding="10">

3》单元格间距cellspacing：<table cellspacing="10">

4》表格背景色bgcolor：<table bgcolor="red">

5》表格背景图background：<table background="/i/eg_bg_07.gif">

6》表格边框展示：<table frame="box"> 展示四周

<table frame="above"> 展示上线

<table frame="below"> 展示下线

<table frame="hsides"> 展示上下线

<table frame="vsides"> 展示左右线

td属性：

1》单元格背景色bgcolor：<td bgcolor="red">First</td>

2》单元格背景图background：<td background="/i/eg_bg_07.gif"> Second</td>

3》对齐align：<td align="left">衣服</td> <td align="right">$241.10</td>

th属性：

1》内容对齐属性align：<th align="left">消费项目</th> <th align="right">二月</th>

其他：

1、表格表头：<th>表格头</th> :

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

2、空单元格（有边框）： 

<tr>

</tr>

用空格占位符：插入一个 no-breaking 空格；no-breaking 空格是一个字符实体；no-breaking 空格由和号开始 ("&")，然后是字符"nbsp"，并以分号结尾(";")

3、表格标题：<caption>我的标题</caption>

4、跨多行或多列的单元格：

<th colspan="2">电话</th> 跨两行

<th rowspan="2">电话</th> 跨两列

5、单元格内容与其边框之间的空白：

cellpadding

表格标签其它相关标签：

1、<thead>：表格页眉

2、<tbody>：表格主题

3、<tfoot>：表格页脚

4、<col>：定义用于表格列的属性。 safari和chrome 不好使，而w3说（所有主流浏览器都支持 <col> 标签）？？？

5、<colgroup>：定义表格列的组。即<colgroup> safari和chrome 不好使，而w3说（Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性）？？？例 <colgroup span="2" align="left"></colgroup> 注意第一个 colgroup 元素横跨两列

例：其它相关标签之1、2、3，感觉没啥实际意义

<table border="1">

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tbody>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

11、列表

1、无序列表： <ul>列表；<li>列表行元素

<ul>

</ul>

列表属性：type="disc”（圆黑点,默认） “circle”（圆圈） “square”（正方形）”none”

2、有序列表：<ol>列表；<li>列表行元素

列表属性：type=“A”； “a”（默认）；”I”（罗马数字，大写i）；”i”（小写罗马数字，小写i）；decimal（阿拉伯数字）

3、自定义列表：<dl> <dt> <dd>

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

注：<dir>(H5已删除) <menu>已被<ul>代替

12、块

<div>（块元素）：用于组合其他 HTML 元素的容器；与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性；定义文档中的分区或节（division/section）；存在意义：设置样式

<span>（内联元素）：用作文本的容器；与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性；定义 span，用来组合文档中的行内元素。存在意义：设置样式

块元素：div；p；h；ul，…

内联元素：b；td；img；a；span，…

13、布局:

HTML5的网站布局：H5提供新语义元素定义了网页的不同部分：

<nav>

<aside>

自己写的例子如下（没发现这样写有什么好处，除了详细信息的下箭头以外，可能是我这样写有问题 to be continued）：

==========================

<body>

header定义文档或节的页眉

</header>

<nav>

nav:定义导航链接的容器

</nav>

section:定义文档中的节

</section>

article:定义独立的自包含文章

</article>

summary:定义 details 元素的标题

</summary>

details:定义额外的细节

</details>

<aside>

aside:定义内容之外的内容（比如侧栏）

</aside>

footer:定义文档或节的页脚

</footer>

</body>

==========================

14、响应式设计：RWD（Respons Web Design）：响应式web设计；能够以可变尺寸传递网页，对于平板和移动设备是必须的

使用Bootstrap

15、框架

1》框架结构标签：<frameset> (H5已删除)

属性：cols = “25%，75%” （按比例）；cols = “100，*”（第一列占100宽，另一列占剩下所有）

rows = “25%，75%”

noresize="noresize”加上此属性，框架就不能拖动调整尺寸

2》框架标签：<frame>(H5已删除)

属性：src = "/example/html/frame_a.html"

name="showframe"

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

为不支持框架的浏览器添加 <noframes> (H5已删除)标签

3》不能将 <body></body> 标签与 <frameset></frameset>(html5中已删除) 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

加<noframe>标签好像也显示不了<body>标签内的内容

示例：

<html>

</frameset>

</html>

4》导航框架：

页面中两个框架：其中一个框架里有三个链接，另外一个框架展示第一个框架选中的链接

<html>

</frameset>

</html>

解析：

http://www.w3school.com.cn/example/html/html_contents.html

http://www.w3school.com.cn/example/html/content.html

content.html源码如下：

	<html>
	<body>

	<a href ="/example/html/frame_a.html" target ="showframe">Frame a</a><br />
	<a href ="/example/html/frame_b.html" target ="showframe">Frame b</a><br />
	<a href ="/example/html/frame_c.html" target ="showframe">Frame c</a>

	</body>
	</html>

5》内联框架：（HTML页中的框架）<iframe>

一些老浏览器不支持iframe；如果不支持，iframe不可见

<html>

<body>

<p>一些老的浏览器不支持 iframe。</p>

<p>如果得不到支持，iframe 是不可见的。</p>

</body>

</html>

6》跳转至框架内的指定细节

<html>

</frameset>

</html>

//http://www.w3school.com.cn/example/html/content.html

源码：

	<html>
	<body>

	<a href ="/example/html/link.html" target ="showframe">没有锚的链接</a><br />
	<a href ="/example/html/link.html#C10" target ="showframe">带有锚的链接</a>

	</body>
	</html>
//http://www.w3school.com.cn/example/html/link.html#C10 与 http://www.w3school.com.cn/example/html/link.html 是一个链接地址，只不过前者加了锚点

源码：	<html>
	<body>

	<a name="C1"><h2>Chapter 1</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C2"><h2>Chapter 2</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C3"><h2>Chapter 3</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C4"><h2>Chapter 4</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C5"><h2>Chapter 5</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C6"><h2>Chapter 6</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C7"><h2>Chapter 7</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C8"><h2>Chapter 8</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C9"><h2>Chapter 9</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C10"><h2>Chapter 10</h2></a>
	<p>This chapter explains ba bla bla</p>

	<a name="C11"><h2>Chapter 11</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C12"><h2>Chapter 12</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C13"><h2>Chapter 13</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C14"><h2>Chapter 14</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C15"><h2>Chapter 15</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C16"><h2>Chapter 16</h2>
	<p>This chapter explains ba bla bla</p>

	<a name="C17"><h2>Chapter 17</h2>
	<p>This chapter explains ba bla bla</p>

	</body>
	</html>

16、内联框架<iframe> 用于在网页内显示网页：<iframe src="URL"></iframe>

属性：src="https://www.baidu.com/"

width="200"

height="200"

frameborder=“0”//0即边框；非0即有边框

17、背景

<body>修改body的背景或背景色

属性：bgcolor="#000000" ；”rgb(0,0,0)" ；”black"

background="clouds.gif”；"http://www.w3school.com.cn/clouds.gif"

18、HTML脚本

1》<noscript> 不支持 Javascript 的浏览器将显示 noscript 元素中的文本

document.write("Hello World!")

</script>

19、HTML路径

20、头部标签<head>：头部元素常包含以下标签：

<title>、<base>、<link>、<meta>、<script> 以及 <style>。

1》<title>

2》<base>:标签为页面上的所有链接规定默认地址或默认目标（target）

3》<link>:标签定义文档与外部资源之间的关系;标签最常用于连接样式表

4》<style>：样式

5》<meta>：meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

属性：name；content

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。（name和content属性的作用是描述页面内容）

搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面

5.1》描述：<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

5.2》定义页面关键字：<meta name="keywords" content="HTML, CSS, XML" />

5.3》重定向：<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />//5即5秒跳转

6》<script>元素：用于定义客户端脚本

21、实体：希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）

格式：&entity_name;或&#entity_number;

实体符号参考手册：http://www.w3school.com.cn/tags/html_ref_entities.html

22、URL：scheme://host.domain:port/path/filename

23、URL编码：URL只能通过ASCII字符集来通过网络进行发送；所以URL中非ASCII之外的字符必须转化为ASCII格式；URL编码用%其后跟两位十六进制数来替换非ASCII字符；URL不能包含空格。URL编码通常使用+来替换空格（URL编码手册 http://www.w3school.com.cn/tags/html_ref_urlencode.html）

24、HTML文档类型：<!DOCTYPE>声明：此声明帮助浏览器正确地显示网页；不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的

<!DOCTYPE html>是HTML5

25、<form>表单：收集用户输入

表单包含表单元素：input、复选框、单选按钮、提交按钮等

<form>属性：

1》action 提交表单的动作<form action="/demo/demo_form.asp"> 表单数据会被发送到名为 demo_form.asp 的页面；会把input标签的name和value发送给服务器；如果省略action，则action或被设置为当前页

2》method <form action="action_page.php" method="GET"> 请求方式

3》accept-charset

4》autocomplete：规定浏览器应该自动完成表单（默认：开启）

5》enctype：规定被提交数据的编码（默认：url-encoded）

6》name：规定识别表单的名称（对于 DOM 使用：document.forms.name）

7》novalidate：规定浏览器不验证表单。

8》target：规定 action 属性中地址的目标（默认：_self）

例：<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"

enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate> </form>

26、表单元素：

1、<input>

属性：

1.1》type （输入类型）= “text”（常规文本输入；输入框）；

“radio”（单选按钮输入；圆圈）；

“submit”（提交表单；按钮）；

”password”(密码类型的输入)

“checkbox”（复选框）

“button”

以下是html5新加的type取值（老式的会把新加的识别为text）

color

date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Input的输入限制（输入属性 to be continued）：

disabled 规定输入字段应该被禁用

max 规定输入字段的最大值

maxlength 输入字段的最大字符数；输入字符的长度

min 最小值

pattern 规定通过其检查输入值的正则表达式

readonly 输入的值无法修改

readonly 属性不需要值。它等同于 readonly="readonly"。

required 必输

size 输入字段的宽度，输入框的宽度（字符计）

step 输入字段的合法数字间隔

value 输入字段的默认值

以下是html5为<input>新加的属性：
autocomplete：属性规定表单或输入字段是否应该自动完成，当自动完成开启，浏览器会基于用户之前的输入值自动填写值；把表单的 autocomplete 设置为 on，同时把特定的输入字段设置为 off
autofocus：boolean值，规定当页面加载时 <input> 元素应该自动获得焦点
form：与<form>的id属性合用；属性规定 <input> 元素所属的一个或多个表单;即使在<form>之外，但仍属表单。
<form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

formaction：会覆盖<form> 元素的 action 属性；适用于 type="submit" 以及 type="image"
formenctype:把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）;覆盖 <form> 元素的 enctype 属性;适用于 type="submit" 以及 type="image" ;<input type="submit" formenctype="multipart/form-data"

formmethod:定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法;覆盖 <form> 元素的 method 属性;适用于 type="submit" 以及 type="image"
formnovalidate:布尔型；规定在提交表单时不对 <input> 元素进行验证；属性覆盖 <form> 元素的 novalidate 属性；可用于 type="submit”；<input type="submit" formnovalidate value="Submit without validation">
formtarget:规定的名称或关键词指示提交表单后在何处显示接收到的响应;会覆盖 <form> 元素的 target 属性;与 type="submit" 和 type="image" 使用
height 和 width:属性规定 <input> 元素的高度和宽度;仅用于 <input type="image”>;注意：请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁
list：引用的 <datalist> 元素中包含了 <input> 元素的预定义选项，即匹配相应<datalist>；
min 和 max
multiple：boolean属性；如果设置，则规定允许用户在 <input> 元素中输入一个以上的值；适用于以下输入类型：email 和 file
pattern (regexp)：用于检查 <input> 元素值的正则表达式；<input type="text" name="country_code" pattern="[A-z]{3}"title="三个字母的国家代码" />;与title属性合用，给用户提示
placeholder：
required
step：规定 <input> 元素的合法数字间隔；
title：提示内容；与pattern合用给用户改正错误的提示；如果 step="3"，则合法数字应该是 -3、0、3、6、等等。

1.2》name：要正确地被提交，每个输入字段必须设置一个 name 属性

1.3》value：input显示的值（radio除外）

1.4》checked：input显示的值（radio专用）

1.4》list

<filedset>：组合表单数据，一般嵌套在<form>外层一个框框

<legend>:为<fieldset>元素定义标题，紧挨着第一个<filedset> 框框上线之间的文字

2、<select> 元素（下拉列表），列表的每一项用<option>元素表示

属性：name 提交的name

<option> 素定义待选择的选项

属性：

value =“” 提交的值

selected 默认选中第一个，<option>元素加上此属性，则此<option>标签成为默认值，定义预定义选项

3、<textarea> 定义多行输入字段

属性：

name=“”

rows=“10” 行

cols=“30” 列

4、<button>

5、<datalist>(H5新加的):为<input>规定预定义选项列表，用户输入时会看到此列表；<input>元素的list属性必须引用<datalist>元素的id属性；与<input>和<option>标签合用

属性：id

例：

</datalist>

</form>

6、<keygen>(H5新加的)

7、<output>(H5新加的)

26、<option>

27、<select>

28、<textarea>

29、HTML5

1》H5被删的元素：<acronym>;<applet>;<basefont>;<big>;<center>;<dir>;<font>;;<frame>;;<frameset>;<noframes>;<strike>;<tt>;

2》浏览器支持：所有现代浏览器都支持 HTML5；所有浏览器，不论新旧，都会自动把未识别元素当做行内元素来处理

HTML5 定义了八个新的语义 HTML 元素（都是块级元素），故为适配旧浏览器，需要将H5新加的元素block化：

header, section, footer, aside, nav, main, article, figure {

display: block;

}

3》添加自定义元素：

<style>

myHero {

display: block;

background-color: #ddd;

padding: 50px;

font-size: 30px;

}

</style>

<myHero>My First Hero</myHero>

但是：已添加的 JavaScript 语句 document.createElement("myHero")，仅适用于 IE

自定义元素及给此元素添加样式适用于所有新的 HTML5 元素，IE8之前版本除外，可通过Shiv解决，如下：

<!--[if lt IE 9]>

<![endif]-->

注：以上代码（shiv 代码）是一段注释，但是 IE9 的早期版本会读取它（并理解它）；shiv 代码的链接必须位于 <head> 元素中，因为 Internet Explorer 需要在读取之前认识所有新元素

4》skeleton

30、注释：

一般注释：

<!- - dd - ->

条件注释：

<!--[if IE 8]>

.... some HTML here ....

<![endif]-->

31、html的css样式：

外部样式表：<link>

内部样式表:<head> <style> </style> </head>

内联样式:<p style = “”></p>

32、H5画布canvas：使用js在网页上绘制图像，是一矩形区域，可以控制其每一像素

有多种绘制路径；

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d”);//创建context对象；此对象是内建的H5对象

cxt.fillStyle="#FF0000”;//填充颜色

cxt.fillRect(0,0,150,75);//填充位置和区域

</script>

1》<canvas>元素：

属性：width

height

style

2》js的context对象：

函数：创建context对象:var cxt=c.getContext("2d”);

填充颜色：cxt.fillStyle="#FF0000”;闭合图形才有用

填充位置和区域：cxt.fillRect(0,0,150,75);

移到指定点:cxt.moveTo(10,10);

画线：cxt.lineTo(10,10);

??：cxt.stroke();

开始：cxt.beginPath();画扇形或圆下边有指定坐标的

画角：cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

渐变色：

var grd=cxt.createLinearGradient(0,0,175,50);

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

cxt.fillStyle=grd;

将图像放到画布上： cxt.drawImage(img,0,0);

画矩形；画圆；画角；把图片贴到画布上

33、H5内联SVG：可缩放矢量图形 SVG教程；

34、Canvas与SVG对比：

SVG：使用XML描述2D图形的语言；基于XML故SVG DOM中每个元素都可用，每个元素都可用js事件处理器；SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas：通过js来绘制2D图形；是逐像素进行渲染；一旦绘制完成，便不会继续得到浏览器关注；如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

34、HTML媒体：

媒体的格式：

音频：。。。。。。

视频：。。。。。。

35、HTML Object元素：

HTML的embed元素：

可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面；

36、使用插件

插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等

使用插件问题：

不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

37、音频：audio元素：H5可用，H4非法

1》、插件<embed> <embed height="100" width="100" src="song.mp3" /> 有问题

2》、插件<object> <object height="100" width="100" data="song.mp3"></object> 有问题

3》、<audio> 有问题

Your browser does not support this audio format.

</audio>

4》、<audio> + <embed> 有问题

</audio>

5》将音频添加到三方网站（最简单添加音频方法）例如使用雅虎网

<a href="song.mp3">Play Sound</a>

</script>

6》使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会自动使用“辅助应用程序”来播放文件。

以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”来播放该文件例：<a href="song.mp3">Play the sound</a>

总结：5、6方法比较好

H4中音频多媒体标签：

<applet>不赞成。定义内嵌 applet。;<object>;<param>定义对象的参数。

H5中音频多媒体标签：<audio> <embed>

38、视频video：

播放视频方法：

1》<embed> <embed src="movie.swf" height="200" width="200"/> 有问题

2》<object> <object data="movie.swf" height="200" width="200"/>有问题

3》<video>（H5新加）有问题

Your browser does not support the video tag.

</video>

4》以上三种各有问题，最好方式如下：<video>+ <object> + <embed> 有问题

</object>

</video>

5》借助三方网站：在 HTML 中显示视频的最简单的方法是使用优酷等视频网站

width="480" height="400"

type="application/x-shockwave-flash">

</embed>

6》使用a标签：如果网页包含指向媒体文件的超链接，大多数浏览器会自动使用“辅助应用程序”来播放文件。以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”

<a href="movie.swf">Play a video file</a>

总结：5、6方法比较好

H4中视频多媒体标签：

<applet>不赞成。定义内嵌 applet。;<object>;<param>定义对象的参数。

H5中视频多媒体标签：<video> <embed>

HTML API

39、H5地理定位：

判断是否支持地理定位：navigator.geolocation

获取地理定位：navigator.geolocation.getCurrentPosition(showPosition，错误处理);

错误处理：PERMISSION_DENIED；POSITION_UNAVAILABLE；TIMEOUT；UNKNOWN_ERROR

维度：position.coords.latitude

精度：position.coords.longitude

返回用户当前位置，并持续更新：navigator.geolocation.watchPosition(showPosition);

停止更新用户位置：navigator.clearWatch()

40、H5拖放：

元素的draggable设为true <img draggable="true">

ondragstart()

ev.dataTransfer.setData("text", ev.target.id);

ondragover()

event.preventDefault():数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式

ondrop() ev.dataTransfer.getData("text");

41、Web本地存储：web 应用程序能够在用户浏览器中对数据进行本地的存储

H5之前，用于程序数据只能存在cookie中，包括每个服务器请求；本地存储更安全，且可在不影响网站性能前提下将大量数据存在本地。比cookie存储限制大（>=5MB）,且信息不会传到服务器。

本地存储对象：

存储数据时，先检查是否支持本地存储：typeof(Storage) !== "undefined"

1》对象1：window.localStorage:存储没截止日期的数据；

存数据：localStorage.setItem("lastname", "Gates”);等价于localStorage. lastname = "Gates”

取数据：localStorage.getItem("lastname"); 于localStorage.lastname

删除数据：localStorage.removeItem("lastname");

注：存储的名称和值都只能为字符串类型；

其他属性：clickcount点击次数

2》对象2：window.sessionStorage:针对一个 session 来存储数据，浏览器相应标签页则数据被删除；

与window.localStorage对象存取删数据一样，同样存在clickcount点击次数属性

42、HTML5应用程序缓存：

通过创建cache manifest文件，可轻松创建web应用的离线版本

如果启用应用程序缓存，需要在<html>中包含manifest属性

manifest文件的扩展名是.appcache；而相应的web服务器上需要配置：MIME-type="text/cache-manifest”；此文件是简单的文本文件，它告知浏览器被缓存的内容及不缓存的内容

manifest文件有三个部分：

1》CACHE MANIFEST 在此标题下列出的文件将在首次下载后缓存；

2》NETWORK 此标题下列出的文件需要与服务器的链接，且不会缓存；

3》FALLBACK 此标题下列出的文件规定当页面无法访问时的回退页面（404）

更新缓存：

一旦应用被缓存，它就会保持缓存直到发生下列情况：

1、用户清空浏览器缓存； 2、manifest文件修改； 3、应用程序更新应用缓存

完整的manifest文件如下：

CACHE MANIFEST

# 2012-02-21 v1.0.0 （一般通过更新此处的日期或版本号更新manifest文件）（#开头是注释）

/theme.css

/logo.gif

/main.js

NETWORK:

FALLBACK:

/html/ /offline.html （/offline.html 替换 /html/）

应用程序缓存注意项：

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件

浏览器对缓存数据的容量限制可能不太一样（某些浏览器的限制是每个站点 5MB）。

43、HTML5 Web Workers：是运行在后台的js代码；

出现原因：当HTML页面执行脚本时，页面不可响应，直到脚本已完成。

Web worker 是运行在后台的js，独立于其他脚本，不会影响页面性能。

案例：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<button οnclick="startWorker()">开始 Worker</button>

<button οnclick="stopWorker()">停止 Worker</button>

<script>

var w;

function startWorker()

{

if(typeof(Worker)!=="undefined")

{

if(typeof(w)=="undefined")

{

w=new Worker("/example/html5/demo_workers.js");

}

w.onmessage = function (event) {

document.getElementById("result").innerHTML=event.data;

};

}

else

{

document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";

}

function stopWorker()

{

w.terminate();

w = undefined;//把 worker 变量设置为 undefined，在其被终止后，可以重复使用该代码

}

</script>

</body>

</html>

Event现在不太懂，学完js再来看吧，先理解web work

注: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

注：由于web worker位于外部文件，它们无法访问如下js对象：window；document；parent；

44、HTML5 SSE（Server-Sent事件）：此事件允许网页自动从服务器获得更新；以前也可以更新，但前提是网页得询问是否有可用更新；通过server-sent可以自动更新

接收SSE事件通知：var source = new EventSource("demo_sse.php");

示例：

<!DOCTYPE html>

<html>

<body>

<h1>获得服务器更新</h1>

if(typeof(EventSource)!=="undefined")

{

var source=new EventSource("/example/html5/demo_sse.php");

source.onmessage=function(event)

{

document.getElementById("result").innerHTML+=event.data + "<br />";

};

}

else

{

document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ...";

}

</script>

</body>

</html>

SSE需要能够发送数据更新的服务器（比如 PHP 或 ASP）；

服务器端把 "Content-Type" 报头设置为 "text/event-stream"

EventSource对象的事件：

onopen() 当通往服务器的连接被打开;

onmessage()当接收到消息

onerror()当发生错误

45、ISO语言代码：

HTML的lang：

...

</html>

HTML 的 lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的；根据 W3C 推荐标准，您应该通过 <html> 标签中的 lang 属性对每张页面中的主要语言进行声明即lang=""

XHTML的lang：

...

</html>

46、ISO字符集：ISO 字符集是国际标准组织 (ISO) 针对不同的字母表/语言定义的标准字符集

字符集和字符编码：https://www.jianshu.com/p/c5339d31afd1

==============================================

CSS教程：

css重叠时层叠次序：优先级从低到高：浏览器缺省设置；外部设置（link里）；页面设置（head里）；内联样式（写在元素内部）

47、路径：

<img src="picture.jpg"> picture.jpg 位于与当前网页相同的文件夹

<img src="images/picture.jpg"> picture.jpg 位于当前文件夹的 images 文件夹中

<img src="/images/picture.jpg"> picture.jpg 当前站点根目录的 images 文件夹中

<img src="../picture.jpg"> picture.jpg 位于当前文件夹的上一级文件夹中

1、css基础语法：

格式：selector {property: value;property: value}

值的不同写法和单位：

color属性：

h1 {color:red}；

h1 {color:#ff0000}；

h1 {color:#f00}；

h1 {color:rgb(255,0,0);}；

h1 {color:rgb(100%,0%,0%);}；

2、css高级语法：

2.1》选择器分组：

h1,h2,h3,h4,h5,h6 {

color: green;

}

2.2》继承及其问题：

body {

font-family: Verdana, sans-serif;

}

按说所有<body>的子元素都能继承上边body的css样式；但是Netspace4不支持；不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略

用以下方法解决Netspace4的问题：

body {

font-family: Verdana, sans-serif;

}

p, td, ul, ol, li, dl, dt, dd {

font-family: Verdana, sans-serif;

}

3、css派生选择器（上下文选择器）：依据元素在其位置的上下文关系定义样式

后代选择器（包含选择器）:

注意点：

1》h1 em h2{color:yellow;} 元素间可以是一个或多个空格；可以多代嵌套；主要针对最后一种元素设置格式

2》ul em {color:red; font-weight:bold;}

<li>List item <em>1-3-2</em></li> //1-3-2为红色，满足后代关系

<li>List item <div><em>1-3-2</em></div></li> //1-3-2为红色，满足后代关系，即使是中间又隔n个div 也可以

3》h1 em h2{color:yellow;}

<h1>22This i<p>a2qe</p>sheading</h1>//a2qe没有yellow样式，不符合此后代选择器

子元素选择器：

h1 > strong {color:red;}

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>//有用

<h1>This is <em>really <strong>very</strong></em> important.</h1>//无用

注：>前后有无空格都可以

相邻兄弟选择器：选择紧接在另一个元素后的元素，而且二者有相同的父元素;一个结合符(+)只能选择两个相邻兄弟中的第二个元素

li + li {font-weight:bold;background:red}

<body>

<div>

<ul>

<li>List item 2</li>//红

<li>List item 3</li>//红

</ul>

<ol>

<li>List item 2</li>//红

<li>List item 3</li>//红

</ol>

</div>

</body>

4、id选择器：

1》简单用

#red {color:red;}

<p id="red">这个段落是红色。</p>

2》id和派生

#sidebar p {

font-style: italic;

text-align: right;

margin-top: 0.5em;

}

id和后代

3》元素+id：1》加下边

div#sidebar {

border: 1px dotted #000;

padding: 10px;

}

id为sidebar的div标签

5、类选择器：

1》简单用

.center {text-align: center}

This heading will be center-aligned

</h1>

2》class和派生

.fancy td {

color: #f60;

background: #666;

}

class和后代

3》元素+class：

td.fancy {

color: #f60;

background: #666;

}

6、属性选择器：对带有指定属性的所有元素设置样式：

1》单纯属性选择器：

[title]{

color:red;

}

2》属性和值选择器：

[title=W3School]{

border:5px solid blue;

}

3》属性和值选择器-多个值：

~=:

[title~=hello]{//所有title属性并且属性值以空格分割的且某个空格间内容含hello的

color:red;

}

<h2 title="hello world">Hello world</h2>

<p title="student hello"> W3School Hello students!</h1>

|=:

[title|=mama]{//所有title属性并且属性值以mama开头的，且mama为单独的词组

color:red;

}

4》元素+属性

input[type="text"]

{

width:150px;

display:block;

margin-bottom:10px;

background-color:yellow;

font-family: Verdana, Arial;

}

5》元素+属性

[attribute]选取带有指定属性的元素

[attribute=value]用于选取带有指定属性和值的元素

[attribute~=value]用于选取属性值中包含指定词汇的元素，且此词汇为单独的，且由空格链接

[attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是单独的,且由-链接

[attribute^=value]匹配属性值以指定值开头的每个元素

[attribute$=value]匹配属性值以指定值结尾的每个元素

[attribute*=value]匹配属性值中包含指定值的每个元素

7.29

7、创建css

1》外部样式：

<head>

</head>

2》内部样式：

<head>

hr {color: sienna;}

p {margin-left: 20px;}

body {background-image: url("images/back40.gif");}

</style>

</head>

3》内联样式：

This is a paragraph

</p>

8、背景：

1》backgoround-color：transparent（透明）；#00ff00；rgb(250,0,255)；yellow

p {background-color: gray; padding: 20px;}

2》background-image：

body {background-image: url(/i/eg_bg_04.gif);}

3》背景重复：background-repeat: no-repeat; repeat-x; repeat-y；repeat

body

{

background-image: url(/i/eg_bg_03.gif);

background-repeat: repeat-y;

}

4》背景定位：background-position：

4.1》background-position+关键字：top、bottom、left、right、center；默认值left top 位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向；如果只出现一个关键字，则认为另一个关键字是 center；

body

{

background-image:url('/i/eg_bg_03.gif');padding: 20px;

background-repeat:no-repeat;

background-position:center;

}

等价位置关键字：

center = center center

top = top center 或 center top

bottom = bottom center 或 center bottom

right = right center 或 center right

left = left center 或 center left

4.2》background-position+百分数值：

background-position:100% 100% //右下角

background-position:0% 0% //左下角

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

4.3》background-position+长度值：

background-position:50px 100px;

5》背景关联：backgorund-attachment 默认值：scroll

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

background-attachment:fixed

6》将所有背景属性简写到一个声明中：

body

{

background: #ff0000 url(refresh1.png) no-repeat fixed center;

}

9、css文本：

0》文本颜色 color：

1》缩进文本：text-indent

text-indent:（使用具体值）

一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动

如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

text-indent:（使用百分比值）缩进值是父元素宽度的百分比

text-indent:（cm）p {text-indent: 1cm}

div {width: 500px;}

p {text-indent: 20%;}

<div>

<p>this is a paragragh</p>

</div>

缩进值是父元素的 20%，即 100 个像素

text-indent:（继承）可以继承给内层元素

div#outer {width: 500px;}

div#inner {text-indent: 10%;}

p {width: 200px;}

<div id="inner">some text. some text. some text.

<p>this is a paragragh.</p>//继承父元素div的inner样式

</div>

2》对齐：text-align left；right；center；justify(两端对齐)

3》字间隔：word-spacing ：默认normal（0）

p.spread {word-spacing: 30px;}

p.tight {word-spacing: -0.5em;}

4》字母间隔：letter-spacing：

h1 {letter-spacing: -0.5em}

h4 {letter-spacing: 20px}

5》字符转换：text-transform： none；uppercase；lowercase；capitalize（对每个单词的首字母大写）

6》文本装饰：text-decoration：none；underline；overline；line-through；blink(文本闪烁，但实际测试无效果)

结合：a:link a:visited {text-decoration: underline overline;}

7》处理空白符：white-sapce

normal：丢掉多余的空白符；换行字符（回车）会转换为空格；一行中多个空格的序列也会转换为一个空格

pre：空白符不会被忽略；注：E 7 以及更早版本的浏览器不支持该值，因此请使用非 IE 的浏览器来查看上面的实例

nowrap：防止元素中文本换行，除非使用br元素；

pre-wrap:元素中的文本会保留空白符序列，但是文本行会正常地换行;

pre-line:元素中的文本会不保留空白符序列，但是文本行会正常地换行;

pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

8》的文本方向：

块级元素：direction：ltr（默认）；rtr；inherit

行内元素：unicode-bidi ：

9》行间距：

百分比：在大多数浏览器中默认行高大约是 110% 到 120%。

p.small {line-height: 100%}

p.big {line-height: 200%}

Px：在大多数浏览器中默认行高大约是 20px

p.small {line-height: 10px}

p.big {line-height: 20px}

数字：默认行高大约是 1

p.small {line-height: 0.5}

p.big {line-height: 2}

10、CSS字体：通用字体 + 特定字体

1》font-family字体系列：

使用通用字体（有相似外观的字体系统组合）：sans-serif；serif；monospace; cursive; fantasy

特定字体（具体的字体系列）：Times；Courier。。。。

用户代理上没有安装 Georgia（特定）字体，就只能使用用户代理的默认字体来显示 h1 元素。可以通过结合特定字体名和通用字体系列来解决这个问题如下：

h1 {font-family: Georgia, serif;}

也可以为给定的元素指定一系列类似的字体。要做到这一点，需要把这些字体按照优先顺序排列，然后用逗号进行连接：p {font-family: Times, TimesNR, 'New Century Schoolbook',

Georgia, 'New York', serif;}

当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号，单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号：

2》font-style字体风格：normal；italic（斜体）；oblique（倾斜）

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本;通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

3》font-variant字体形变：设定小型大写字母（小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小）

取值：small-caps（小型大写字母）;normal

4》font-weight字体加粗：取值范围：100 ~ 900 ；400（normal）；700（bold）;lightter;bold;bolder;

5》font-size字体大小：

绝对值（px为单位）：将文本设置为指定的大小；不允许用户在所有浏览器中改变文本大小（不利于可用性）；绝对大小在确定了输出的物理尺寸时很有用

h1 {font-size:60px;}

相对大小（相对于父元素）（em为单位）：相对于周围的元素（一般是相对于父元素）来设置大小；允许用户在浏览器改变文本大小；

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变；

p {font-size:0.875em;}

（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）

h1 {font-size:3.75em;} /* 60px/16=3.75em */

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

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

注意：如果没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。

在上面的例子中，以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

不幸的是，在 IE 中仍存在问题。在重设文本大小时，会比正常的尺寸更大或更小。

结合使用百分比和 EM

在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：body {font-size:100%;}

6》简写属性：font 用简写属性将字体属性设置在一个声明内

p.ex2

{

font:italic bold 12px/30px arial,sans-serif;（逗号前的顺序好像不能任意互换，有时候换位后则不显示目标效果；只有italic 和 bold可互换，其属性不能互换，否则无目标效果）

background-color:red;

}

11、CSS链接：能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）；链接的特殊性在于能够根据它们所处的状态来设置它们的样式

链接四种状态：

a:link 普通、未被访问的链接

a:visited 已经被访问的链接

a:hover 鼠标指针位于链接上方

a:active 链接被点击的时刻

注意：当为链接的不同状态设置样式时，请按照以下次序：

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

即 l v h a （link visited hover active）

例：

a:link,a:visited

{

display:block;

font-weight:bold;

font-size:14px;

font-family:Verdana, Arial, Helvetica, sans-serif;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

}

a:hover,a:active

{

background-color:#7A991A;

}

12、CSS列表：

1》列表类型：list-style-type（与学习html中type属性相似）；（列表点样式）

无序：disc ; circle ；square ；none

有序：upper-roman ；lower-roman ；upper-alpha ；lower-alpha；decimal

「HTML列表的type属性

【无序列表属性：type="disc”（圆黑点,默认） “circle”（圆圈） “square”（正方形）】

【有序列表属性：type=“A”； “a”（默认）；”I”（罗马数字，大写i）；”i”（小写罗马数字，小写i）；decimal（阿拉伯数字）】

」

list-style-type:square;

所有的list-style-type类型如下：

ul.none {list-style-type: none}

ul.disc {list-style-type: disc}

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

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

ul.decimal {list-style-type: decimal}//1.

ul.decimal-leading-zero {list-style-type: decimal-leading-zero}//01.

ul.lower-roman {list-style-type: lower-roman}//i.

ul.upper-roman {list-style-type: upper-roman}//I.

ul.lower-alpha {list-style-type: lower-alpha}//a.

ul.upper-alpha {list-style-type: upper-alpha}//A.

ul.lower-greek {list-style-type: lower-greek}// α.

ul.lower-latin {list-style-type: lower-latin}// a.

ul.upper-latin {list-style-type: upper-latin}//A.

ul.hebrew {list-style-type: hebrew} //א.

ul.armenian {list-style-type: armenian}//

ul.georgian {list-style-type: georgian}//

ul.cjk-ideographic {list-style-type: cjk-ideographic}//一、

ul.hiragana {list-style-type: hiragana} //あ、

ul.katakana {list-style-type: katakana}//ア、

ul.hiragana-iroha {list-style-type: hiragana-iroha}//い、

ul.katakana-iroha {list-style-type: katakana-iroha}//イ、

2》列表项图像：list-style-image （列表点样式）

list-style-image:url("/i/arrow.gif");

3》列表标志位置：list-style-position 规定列表中列表项目标记的位置：inside outside （列表点位置）

list-style-position:inside;

4》简写列表样式：list-style

list-style: inside url('/i/eg_arrow.gif');

list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

13、CSS表格：

1》表格边框：border

table,th,td{

border:1px solid blue;

}

2》折叠边框：border-collapse 设置是否将表格边框折叠为单一边框

border-collapse属性与borde合用：（如果没有规定 !DOCTYPE，border-collapse 属性可能会引起意想不到的错误）

取值：collapse（合并）；separate（默认；不合并）；

table

{

border-collapse:collapse;

}

table,th,td

{

border: 1px solid black;

}

3》表格宽度和高度：

width: px ；百分比（占父元素的）

height：px；百分比（占父元素的）

4》表格文本对齐：

text-align：水平对齐（左对齐left；右对齐right；居中center）

vertical-align：竖直对齐（底bottom；顶top；居中center）

5》表格内边距：padding:15px

6》单元格边距：border-spacing：xspaceing yspacing border-spacing: 40px 20px

7》caption-side：表格标题的位置 bottom；top

8》empty-cells：是否隐藏空单元格取值：hide（隐藏）；show（不隐藏，默认）

9》table-layout：设置显示单元、行和列的算法

取值：atomatic：根据td内的内容显示单元格宽度；与设定的width无关（默认。列宽度由单元格内容设定。）

Fixed：根据设定的width显示单元格宽度；与td内容无关（列宽由表格宽度和列宽度设定。）

14、CSS轮廓：outline 元素周围的一条线，border外围

outline-color:

outline-style:

outline-width:

outline: red 1px solid;

15、CSS模型概述：

16、css内边距：padding

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

padding属性：长度px；百分比%；不能为负。padding-top；padding-right；padding-bottom；padding-left；

注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

td.test2 {padding: 0.5cm 2.5cm} 上下是0.5cm；左右是2.5cm

17、css边框：border

1》边框与背景：元素的背景是内容、内边距和边框区的背景（边框在元素的背景上）

边框样式：样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

2》边框样式：

多边样式：border-style

dotted；dashed；solid；double；groove；ridge；inset；outset

多种样式可以混合：p.aside {border-style: solid dotted dashed double;}

单边样式：border-top-style;border-right-style;border-bottom-style;border-left-style

p {border-style: solid solid solid none;}等价于p {border-style: solid; border-left-style: none;}

3》边框宽：border-width

px或em或三个关键字（thin、medium(默认)、thick）

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

p {border-style: solid; border-width: thick;}

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

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

定义单边宽度：（上右下左）

border-top-width;border-right-width;border-bottom-width;border-left-border

4》无边框：border-style默认是none

p {border-style: none; border-width: 50px;}

5》边框颜色：border-color

p {

border-style: solid;

border-color: blue rgb(25%,35%,45%) #909090 red;

}

p {//上下蓝色；左右红色

border-style: solid;

border-color: blue red;

}

5.1、默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同

5.2、如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

单边颜色：border-top-color；border-right-color；border-bottom-color；border-left-color；

透明边框：transparent

从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）

6》练习

6.1》边框样式简写：

p {

border: medium double rgb(0,0,0)

}

6.2》设置某一边的简写：

p {

border-style:solid;

border-bottom:thick dotted #ff0000;

}

18、css外边距

1》margin （默认0）

auto

单位：可接受任何单位：px；in；cm;mm；em；%（百分数是相对于父元素的 width 计算）等

值复制：

CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：

如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值

2》单边外边距

margin-left;margin-right;margin-bottom;mragin-top

3》简写：p.margin {margin: 2cm 4cm 3cm 4cm}

19、css外边距合并

1》当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

展示结果为：这两个元素之中上边的元素的下边距不变，下边元素的上边距消失

2》当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

展示结果为：里边的元素的上和/或下外边距消失，左右的不变

3》外边距甚至可以与自身发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并；如果这个外边距遇到另一个元素的外边距，它还会发生合并

展示结果为：内侧元素不展示

20、css定位定位概述

1》定位机制：普通流；浮动；绝对定位

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

2》position属性：

定位：相对于此元素的正常位置；

相对于此元素的父元素；

相对于另一个元素；

相对于浏览器窗口本身位置；

一切皆为框：块框（块级元素）；行内框（行内元素）；

display修改框类型：block；inline；inline-block；none(生成的元素无框，即该框不展示，不占用文档空间)

但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待（说的是下边的some text还是整个div？？？）：

<div>

some text

</div>

在这种情况下，这个框称为无名块框（匿名块框），因为它不与专门定义的元素相关联。（应该说的是some text这块内容）

匿名块框：当在块框前添加文本时，会将这些文本定义为块级元素，形成匿名块框。

例如：<div>这里的文本会形成匿名块框！<p>此为一个块框</p></div>

这里的文本会形成匿名块框！这段内容即为匿名块框

行内框（inline box）：每个行内元素会生成一个行内框；只是一个概念，它无法显示出来，但是它又确实存在；它的高度就是行高；在没有其他因素（padding）影响的时候，行内框等于内容区域。

tip：能通过border侧面烘托出行内框区域；

行框（line box）：同行内框类似，行框是指本行的一个虚拟的矩形框；行框高度等于本行内所有元素中行高最大的值。

行高（line-height）：行高就是等于行与行间的基线距离的文本高度；

https://www.cnblogs.com/dolphinX/p/3236686.html（写的比较好的）

position取值：

Static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

元素正常生成；

Relative：生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留

h2.pos_left

{

position:relative;

left:-20px

}

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

元素从文档流完全删除，相对于其包含快定位。包含块可能是文档中的另一个元素或初始包含块。元素原先在正常文档流中占的空间会关闭，好像元素不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

h2.pos_abs

{

position:absolute;

left:100px;

top:150px

}

Fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

表现类似于abosolute，不过其包含块是视窗本身。(相对于浏览器窗口来对元素进行定位）生成块级元素

p.one

{

position:fixed;

left:5px;

top:5px;

}

固定值：

百分比：

像素：

处理超出内容的情况：overflow（溢出）；clip（剪切）

3》overflow属性：溢出

3.1》scroll(滚动展示溢出内容)：

元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作

3.2》hidden（隐藏溢出内容）：

元素中的内容太大以至于无法适应指定的区域时，如何设置 overflow 属性来隐藏其内容

3.3》 auto

设置浏览器来自动地处理溢出

注：这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。

4》clip属性：剪切

设置元素的形状。此元素被剪裁到这个形状内，并显示出来

img

{

position:absolute;

clip:rect(0px 50px 200px 0px)

}

5》vertical-align 在文本中垂直排列图象

取值：top；middle；baseline;bottom

6》z-index:z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面;Z-index 仅能在定位元素上奏效;该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

默认的 z-index 是 0。Z-index -1 拥有更低的优先级;Z-index 1 拥有更高的优先级

21、css相对定位：

Relative：元素“相对于”它的起点进行移动

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

#box_relative {

position: relative;

left: 30px;

top: 20px;

}

22、css绝对定位：

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样。

绝对定位的元素的位置相对于最近的已定位祖先元素（相对或绝对定位都包括在内），如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

23、css浮动：float：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素

浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框不在文档的普通流中，所以文档的普通流中的块框表现的就像浮动框不存在一样。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

取值：left right none（默认值）

1》当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘

2》当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失

3》如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框

4》如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间

5》如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

24、css选择器：

元素选择器（类型选择器）：h1 {color:blue;}

CSS 元素选择器（类型选择器）可以设置 XML 文档中元素的样式

25、css选择器分组：

h2, p {color:gray;}

body, h2, p, table, th, td, pre, strong, em {color:gray;}

26、通配符选择器：* 该选择器可以和任何元素匹配，就像一个通配符。

* {color:red;} 此规则可以使文档中的每个元素都为红色

这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red

27、类选择器：

1》普通类选择器：

.important {color:red;}

2》结合元素选择器：

p.important {color:red;}

3》多类选择器：

一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作

</p>

例：class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。就可以写作：

.important {font-weight:bold;}

.warning {font-style:italic;}

.important.warning {background:silver;}

<p class="important">This paragraph is very important.</p>

<p class="warning">This is a warning.</p>

<p class="important warning">This paragraph is a very important warning.</p>

注：通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）；如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败；.important.urgent {background:silver;}

不出所料，这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：

This paragraph is a very important and urgent warning.

</p>

28、id选择器：

1》

#intro {font-weight:bold;}

<p id="intro">This is a paragraph of introduction.</p>

2》类选择器与id选择器区别：

2.1》与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次；

2.2》不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表；

2.3》类似于类，可以独立于元素来选择 ID；

29、属性选择器：根据元素的属性或属性的值来选择元素。

1》简单属性选择器：

1.1》把包含标题（title）的所有元素变为红色：[title] {color:red;}或*[title] {color:red;}

对有 href 属性的锚（a 元素）应用样式：a[href] {color:red;}

1.2》可以根据多个属性进行选择，只需将属性选择器链接在一起即可：a[href][title] {color:red;}

1.3》为 XML 文档使用属性选择器

2》根据具体属性值选择：

2.1》a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

2.2》a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

2.3》XML 语言也可以利用这种方法来设置样式

注意：属性与属性值必须完全匹配：这种格式要求必须与属性值完全匹配；如果属性值包含用空格分隔的值列表，匹配就可能出问题。

<p class="important warning">This paragraph is a very important warning.</p>

如果写成 p[class="important"]，那么这个规则不能匹配示例标记。

要根据具体属性值来选择该元素，必须这样写：

p[class="important warning"] {color: red;}

3》根据部分属性值选择：

3.1》如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）想选择 class 属性中包含 important 的元素：p[class~="important"] {color: red;}

3.2》子串匹配属性选择器

[abc^="def"]选择 abc 属性值以 "def" 开头的所有元素

[abc$="def"]选择 abc 属性值以 "def" 结尾的所有元素

[abc*="def"]选择 abc 属性值以 "def" 包含的所有元素:a[href*="w3school.com.cn"] {color: red;}

3.3》特定属性选择器：

*[lang|="en"] {color: red;}会选择 lang 属性等于 en ；或以 en- 开头的所有元素

HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：img[src|="figure"] {border: 1px solid gray;}

30、css后代选择器(包含选择器)：a b{}

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的；如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深；

31、子元素选择器：a>b{}(>左右两边可以有也可以无空格)

a元素与b元素必须紧紧相邻，中间不能隔代

集合后代选择器：table.company td > p

32、相邻兄弟选择器：a+b{}(+左右两边可以有也可以无空格)

可选择紧邻在另一个元素后的元素(注意只是紧挨着的一个元素)，且二者有相同的父元素

用一个结合符只能选择两个相邻兄弟中的第二个元素

结合其他选择器：html > body table + ul {margin-top:20px;}

33、伪类：用于向某些选择器添加特殊效果：

1》a （link；visited；hover；active ）

a:link {color: #FF0000}

a:visited {color: #00FF00}

a:hover {color: #FF00FF}

a:active {color: #0000FF}

a.one:link {color: #ff0000}

a.one:visited {color: #0000ff}

a.one:hover {color: #ffcc00}

2》focus伪类（焦点）

input:focus

{

background-color:yellow;

}

如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。

34、first-child伪类（首个子对象）(必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。)

p:first-child {font-weight: bold;}

li:first-child {text-transform:uppercase;}

p > em:first-child

{

font-weight:bold

}

p:first-child em

{

font-weight:bold

}

35、lang伪类（语言）如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :lang 伪类。

lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，在下面的例子中，:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型

q:lang(no)

{

quotes: "~" "~"

}

<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>

伪类语法：selector : pseudo-class {property: value}

Css类与伪类搭配：selector.class : pseudo-class {property: value}

锚伪类：a标签的状态

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

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

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

伪类总结：

:active向被激活的元素添加样式。（css1）

:focus向拥有键盘输入焦点的元素添加样式。（css2 需要声明<!DOCTYPE>）

:hover当鼠标悬浮在元素上方时，向元素添加样式。（css1）

:link向未被访问的链接添加样式。（css1）

:visited向已被访问的链接添加样式。（css1）

:first-child向元素的第一个子元素添加样式。（css2必须需声明<!DOCTYPE>才能用于IE）

:lang向带有指定 lang 属性的元素添加样式。（css2需要声明<!DOCTYPE>）

36、伪元素：

1》:first-line

注释："first-line" 伪元素只能用于块级元素。

下列属性可用于first-line伪元素

font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

2》:first-letter

注释："first-letter" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-letter" 伪元素：

font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear

3》伪元素和css类：

伪元素和css类配合使用：

p.article:first-letter

{

color: #FF0000;

}

<p class="article">This is a paragraph in an article。</p>

4》多重伪元素：结合多个伪元素来使用

p:first-letter

{

color:#ff0000;

font-size:xx-large;

}

p:first-line

{

color:#0000ff;

font-variant:small-caps;

}

<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>

5》:before伪元素：":before" 伪元素可以在元素的内容前面插入新内容；默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

h1:before

{

content:url(logo.gif);//插入图片

}

h1:before {content:"ddsd"} //插入ddsd内容

6》:after伪元素：":after" 伪元素可以在元素的内容之后插入新内容；默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

h1:after

{

content:url(logo.gif);

}

h1:after {content:"ddsd"} //插入ddsd内容

37、css对齐：

1》margin 水平对齐

左右margin设为auto来对齐块元素

把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素

.center{

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#b0e0e6;

}

2》position 左右对齐

.right{

position:absolute;

right:0px;

width:300px;

background-color:#b0e0e6;

}

3》float左右对齐

.right{

float:right;

width:300px;

background-color:#b0e0e6;

}

38、css尺寸

width（auto ;px；%）； height（auto ;px；%；）；max-height（none;px；%）；max-width（none;px；%）；min-height（0;px；%）；min-width（none;px；%）；line-height（normal;%；px；数值）

39、css分类：允许你规定如何及在何处显示元素。

CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

1》display：inline（内联）； none （不展示）；block（块级）

2》float：

3》visibility：visible；hidden

4》改变光标：cursor: auto；crosshair；default；pointer；move；e-resize ；ne-resize；nw-resize；n-resize；se-resize；sw-resize；s-resize；w-resize；text；wait；help

5》clear 设置一个元素的侧面是否允许其他的浮动元素。

clear设置一个元素的侧面是否允许其他的浮动元素。left（左侧不允许浮动）； right（右侧不允许浮动）； both （左右两侧均不允许浮动）；none（允许浮动出现在两侧）

cursor规定当指向某元素之上时显示的指针类型。

display设置是否及如何显示元素。

float定义元素在哪个方向浮动。

position把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

visibility设置元素是否可见或不可见。

40、css导航条：

用ul 及li转化的

41、css图片库：

42、css图像透明度：

img{

opacity:0.4;

filter:alpha(opacity=40); /* For IE8 and earlier */

}

img:hover{

opacity:1.0;

filter:alpha(opacity=100); /* For IE8 and earlier */

}

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

43、css媒介类型：媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

@media规则：

<style>

@media screen//浏览器字体和字体类型展示

{

p.test {font-family:verdana,sans-serif; font-size:14px}

}

@media print//打印时字体和字体类型展示

{

p.test {font-family:times,serif; font-size:10px}

}

@media screen,print//浏览器和打印时字体

{

p.test {font-weight:bold}

}

</style>

不同媒介：

All 所有媒介设备；

Aural 语音和音频合成器

Braille 盲人用点字法触觉回馈设备

Embossed 用于分页的盲人用点字法打印机

handheld 用于小的手持的设备。

print 用于打印机。

projection 用于方案展示，比如幻灯片。

screen 用于电脑显示器。

tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。

tv 用于电视机类型的设备。

44、css注意事项：

Internet Explorer Behaviors：behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法；为什么要避免它？只有 Internet Explorer 支持 behavior 属性；

==================================

1、js输出：

window.alert() 写入警告框；document.getElementById("demo").innerHTML = 5 + 6;

document.write() 写入 HTML 输出； document.write(5 + 6); 测试用；

1》在文档加载完后使用document.write()将删除所有HTML（即在window.onlaod函数中调用时）

2》<button type="button" οnclick="document.write(5 + 6)">试一试（即在按钮的事件函数中调用时）

innerHTML 写入 HTML 元素；document.getElementById("demo").innerHTML = 5 + 6;

console.log() 写入浏览器控制台；

2、js语句：

3、js语法：

Js值：混合值（字面量）；变量值（变量）

Js数据类型：

可包含值的数据类型：string；number；boolean；object；function

对象类型：Object；Date；Array

不包含值的数据类型：null；undefined；

NaN 的数据类型是数值

数组的数据类型是对象

日期的数据类型是对象

null 的数据类型是对象

未定义变量的数据类型是 undefined

尚未赋值的变量的数据类型也是 undefined

无法使用 typeof 去判断 JavaScript 对象是否是数组（或日期）。

4、js运算符：

4.1》+= 赋值运算符也可用于相加（级联）字符串：txt1 = "Hello "; txt1 += "Kitty!";

4.2》类型运算符：typeof； instanceof（返回 true，如果对象是对象类型的实例。）

4.3》逻辑运算符 &&（逻辑与） ||（逻辑或） !（逻辑非）

4.4》位运算符：&； |； ~（非）；^;<<(零填充左位移)；>>（有符号右位移）；>>>(零填充右位移)

5、算数：

算数运算符：

1》**幂 var z = x ** 2; // 结果是 25

var z = Math.pow(x,2); // 结果是 25

2》in 对象中的属性 "PI" in Math

3》yield暂停函数 yield x

6、赋值运算符：

x %= y 即 x = x % y

x <<= y 即 x = x << y

x >>= y 即 x = x >> y

x >>>= y即x = x >>> y

x &= y即x = x & y

x ^= y x = x ^ y

x |= y x = x | y

x **= y x = x ** y

>>> 右位移（无符号）

6、js数据类型：

1》Js拥有动态类型：即相同变量可用作不同类型

var x;

x = 7;

x = “bill”

变量x从number转换为string类型

2》字符串：string

3》js数值：number

超大或超小都可以用科学计数法来写：

var y = 123e5; //12300000

Var z = 123e-5;//0.00123

4》js布尔：

5》数组：array

6》对象：object

typeof运算符：

数组-object（js中数组属于对象）

7》Undefined：

7.1》无值的变量值为undefined；typeof返回undefined

eg：var person；//值和类型分别是undefined和undefined

7.2》任何变量可以通过设置为undefined进行清空。其类型也是undefined

eg：person = undefined；//值和类型分别是undefined和undefined

8》空值：

与undefined不一回事；例如空的字符串变量既有值也有类型；eg var str= “”；//值是“”，类型是string

9》Null：是object类型；也可以用来清空对象

10》Null与Undefined区别：==返回true；类型不同

typeof undefined // undefined

typeof null // object

null === undefined // false

null == undefined // true

11》

11.1》原始数据：typeof返回string number boolean undefined

11.2》复杂数据：typeof返回function object

typeof 数组/对象/null为 object；

typeof 函数 function

原始类型：Undefined、Null、Boolean、Number 、 String

typeof原始类型：undefined、object、boolean、number、string

Undefined类型：Undefined 类型只有一个值，即 undefined。当声明的变量未初始化或未定义时，该变量的默认值是 undefined。如果对为声明的变量使用除 typeof 之外的其他运算符的话，会引起错误，因为其他运算符只能用于已声明的变量上。

Null类型：另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的；alert(null == undefined); //输出 "true"尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

Boolean类型：

Number类型：整数；浮点数（对于浮点字面量的有趣之处在于，用它进行计算前，真正存储的是字符串。）；科学计数法；（ECMAScript 默认把具有 6 个或 6 个以上前导 0 的浮点数转换成科学计数法。）；

八进制和十六进制：尽管所有整数都可以表示为八进制或十六进制的字面量，但所有数学运算返回的都是十进制结果。

特殊Number值：几个特殊值也被定义为 Number 类型。

1》前两个是 Number.MAX_VALUE 和 Number.MIN_VALUE，它们定义了 Number 值集合的外边界。所有 ECMAScript 数都必须在这两个值之间。不过计算生成的数值结果可以不落在这两个值之间；当计算生成的数大于 Number.MAX_VALUE 时，它将被赋予值 Number.POSITIVE_INFINITY，意味着不再有数字值。同样，生成的数值小于 Number.MIN_VALUE 的计算也会被赋予值 Number.NEGATIVE_INFINITY，也意味着不再有数字值。如果计算返回的是无穷大值，那么生成的结果不能再用于其他计算。

事实上，有专门的值表示无穷大：infinity；有专门值表示无穷小：-infinity；对任何数调用 isFinite() 方法，以确保该数不是无穷大；

2》NaN：表示非数；alert(NaN == NaN); //输出 "false"

isNaN(“666”) //false 参数是数字则返回false

String类型：是唯一没有固定大小的原始类型；

7、类型转换：

1》转换成字符串：Boolean 值、数字和字符串的原始值的有趣之处在于它们是伪对象，这意味着它们实际上具有属性和方法。

1.1》toString()：Boolean；Number；String都可以用此方法，可以把它们的值转换成字符串；

1.1.1》Number 类型的 toString()（默认模式/基模式）：

默认模式：返回的都是数字的十进制表示。因此，以八进制或十六进制字面量形式声明的数字输出的都是十进制形式的；var iNum1 = 10;alert(iNum1.toString()); //输出 "10"

基模式：可以用不同的基输出数字，例如二进制的基是 2，八进制的基是 8，十六进制的基是 16。var iNum = 10;alert(iNum.toString(2));//输出"1010"alert(iNum.toString(8)); //输出 "12"alert(iNum.toString(16)); //输出 "A"

1.1.2》Array类型的toString() 与数组的join()无参方法作用相同

var arrayStr = array.toString();console.log(arrayStr,typeof arrayStr);

当数组用于字符串环境时，JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下，需要显式地调用该方法。

1.1.3》boolean类型的toString()

返回 true 或 false 在 Boolean 对象被用于字符串环境中时，此方法会被自动调用。

1.1.4》Date类型的toString()

var d = new Date();var dateStr = d.toString();

1.1.5》函数的toString()等于valueof() 返回结果为函数的描述

1.2》toLocalString()：得到本地格式的字符串数据

2》转换数字：

2.1》parseInt())只有对string类型调用这些方法，他们才能正确运行；对其他类型返回的都是NaN；

默认模式：

基模式：如果十进制数包含前导 0，那么最好采用基数 10，这样才不会意外地得到八进制的值

2.2》parseFloat(注：使用 parseFloat() 方法的另一不同之处在于，字符串必须以十进制形式表示浮点数，而不是用八进制或十六进制。该方法会忽略前导 0，所以八进制数 0102 将被解析为 102。对于十六进制数 0xA，该方法将返回 NaN，因为在浮点数中，x 不是有效字符。（注释：经测试，具体的浏览器实现会返回 0，而不是 NaN。）parseFloat() 方法也没有基模式

3》强制类型转换：

Boolean(value) - 把给定的值转换成 Boolean 型;当要转换的值是至少有一个字符的字符串、非 0 数字或对象时，Boolean() 函数将返回 true。如果该值是空字符串、数字 0、undefined 或 null，它将返回 false;

Number(value) - 把给定的值转换成数字（可以是整数或浮点数）:Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似，只是它转换的是整个值，而不是部分值;Number() 进行强制类型转换，"1.2.3" 将返回 NaN,如果字符串值能被完整地转换，Number() 将判断是调用 parseInt() 方法还是 parseFloat() 方法

String(value) - 把给定的值转换成字符串

8、js函数：

1》函数在加()是函数的调用；如果不加括号则引用的是函数对象；

2》局部变量：在函数中声明的变量，只能在函数内访问。

3》、Function对象（类）：

3.1》直接创建函数：

var function_name = new function(arg1, arg2, ..., argN, function_body)

在上面的形式中，每个 arg 都是一个参数，最后一个参数是函数主体（要执行的代码）。这些参数必须是字符串。

function sayHi(sName, sMessage) {

alert("Hello " + sName + sMessage);

}

等价于：

var sayHi = new Function("sName", "sMessage", "alert(\"Hello \" + sName + sMessage);");

注意：尽管可以使用 Function 构造函数创建函数，但最好不要使用它，因为用它定义函数比用传统方式要慢得多。不过，所有函数都应看作 Function 类的实例。

3.2》Function对象的length：函数期望的参数个数，即形参个数。

3.3》Function对象的方法：valueof() toString()

function doAdd(iNum) {

alert(iNum + 10);

}

document.write(doAdd.toString());

document.write(doAdd.valueOf());

结果都是函数的源代码function doAdd(iNum) { alert(iNum + 10); }

4》arguments对象：函数实参组成的数组；

4.1》

function howManyArgs() {

alert(arguments.length);

}

howManyArgs("string", 45);//2

howManyArgs();//0

howManyArgs(12);//1

注释：与其他程序设计语言不同，ECMAScript 不会验证传递给函数的参数个数是否等于函数定义的参数个数。开发者定义的函数都可以接受任意个数的参数（根据 Netscape 的文档，最多可接受 255 个），而不会引发任何错误。任何遗漏的参数都会以 undefined 传递给函数，多余的函数将忽略。

4.2》可以模拟重载：

function doAdd() {

if(arguments.length == 1) {

alert(arguments[0] + 5);

} else if(arguments.length == 2) {

alert(arguments[0] + arguments[1]);

}

doAdd(10); //输出 "15"

doAdd(40, 20); //输出 "60"

5》闭包：函数可以使用函数之外定义的变量

简单闭包：在 ECMAScript 中使用全局变量是一个简单的闭包实例。

var sMessage = "hello world";

function sayHelloWorld() {

alert(sMessage);

}

sayHelloWorld();

复杂闭包：在一个函数中定义另一个会使闭包变得更加复杂

var iBaseNum = 10;

function addNum(iNum1, iNum2) {

function doAdd() {

return iNum1 + iNum2 + iBaseNum;

}

return doAdd();

}

闭包由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。

外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象，这就是闭包的重要概念。

闭包一般都是函数嵌套函数

在javascript中，如果一个对象不再被引用，那么这个对象就会被垃圾回收机制回收；

如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。

这里要理解函数名与函数功能是分割开的，不要认为函数在哪里，其内部的this就指向哪里。这里要理解函数名与函数功能是分割开的，不要认为函数在哪里，其内部的this就指向哪里。

闭包：https://www.jianshu.com/p/102e44f35b3b

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

9、this关键字：this关键字是它所属的对象；

其位置不同，则取值不同：

1》方法中，this指的是所有者对象；

2》单独情况，this指全局对象；

3》函数中，this是全局对象；

4》函数中，严格模式下，this是undefined；

5》事件中，this指的是接收事件的元素；

向call(),applay()这样的方法可以将this引用到任何对象

var person1 = {

fullName: function() {

return this.firstName + " " + this.lastName;

}

var person2 = {

firstName:"Bill",

lastName: "Gates",

}

person1.fullName.call(person2); // 会返回 "Bill Gates"

10、js对象

对象应用：

声明和实例化：

var oObject = new Object();

var oStringObject = new String();

如果构造函数无参数，括号则不是必需的，因此可以采用下面的形式重写上面的两行代码：

var oObject = new Object;

var oStringObject = new String;

对象引用：引用类型

对象废除：ECMAScript拥有无用存储单元收集程序，即不必专门销毁对象来释放内存。当没有对对象的引用时，该对象被废除。运行无用存储单元收集程序时，所有废除的对象都被销毁。每当函数执行完它的代码，无用存储单元收集程序都会运行，释放所有的局部变量，还有在一些其他不可预知的情况下，无用存储单元收集程序也会运行。

对象所有引用设为null，可强制废除对象。var oObject = new Object;oObject = null;

注意：废除对象的所有引用时要当心。如果一个对象有两个或更多引用，则要正确废除该对象，必须将其所有引用都设置为 null。

绑定：即把对象的接口与对象实例结合在一起的方法。

晚绑定：指的是编译器或解释程序在运行前，不知道对象的类型，使用晚绑定，无需检查对象的类型，只需检查对象是否支持属性和方法即可。ECMAScript 中的所有变量都采用晚绑定方法。这样就允许执行大量的对象操作，而无任何惩罚。

请不要把字符串、数值和布尔值声明为对象:

通过关键词 "new" 来声明 JavaScript 变量，则该变量会被创建为对象;

请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度;

11、ECMAScript引用类型：引用类型通常叫做class，也就是说，遇到引用值，所处理的就是对象。

1、Object对象具有如下属性：

constructor：对创建对象的函数的引用（指针）。对于object对象，该指针指向原始的Object()函数；对于字面量对象，该指针指向原始的Object()函数；如果是自定义构造函数，则该指针指向此构造函数；

prototype：对该对象的对象原型的引用。对于所有对象，它默认返回Object对象的一个实例。

Object对象的其他方法：

1》hasOwnProperty(“属性名”)：判断对象是否有某个特定属性。必须用字符串指定该属性。（例如：o.hasOwnProperty(“name”)）

console.log(bird.hasOwnProperty('name'),bird.hasOwnProperty('major'),Bird.hasOwnProperty('name’));（注：没有 bird.prototype.hasOwnProperty('name’)这种写法）

2》IsPrototypeOf(object):判断该对象是否为另一个对象的原型。console.log(Bird.prototype.isPrototypeOf(bird),Object.prototype.isPrototypeOf(bird));

3》PropertyIsEnumerable 判断给定的属性是否可以用 for...in 语句进行枚举。(通过secondConstructor.prototype = new firstConstructor;

secondConstructor.prototype.constructor = secondConstructor;

方式继承的属性的PropertyIsEnumerable值为false，但却能通过for…in遍历出来（特殊）)

for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。

如果一个对象的属性不是可枚举属性，那么这个属性就不会被for...in迭代出来，包括继承的可枚举属性。

每个对象都有一个propertyIsEnumerable方法。此方法可以确定对象中指定的属性是否可以被for...in循环枚举，但是通过原型链继承的属性除外。如果对象没有指定的属性，则此方法返回false。

可枚举： 如果一个属性可以使用for in 能遍历出，就是可枚举的。

1、可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true

2、对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false。

3、可枚举的属性可以通过 for...in 循环进行遍历（除非该属性名是一个 Symbol）。属性的所有权是通过判断该属性是否直接属于某个对象决定的，而不是通过原型链继承的。

4、继承属性如果是可枚举属性也能被迭代出来

5、原型属性原则上是不可枚举的

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable

https://www.jianshu.com/p/305459cabcbd

https://www.cnblogs.com/SourceKing/p/5760050.html

https://blog.csdn.net/qq_44034384/article/details/92018303

2、Boolean对象：

var oBooleanObject = new Boolean(true);在 ECMAScript 中很少使用 Boolean 对象，即使使用，也不易理解。

创建Boolean对象的语法：

new Boolean(value);

3、Number对象：

//Number对象

var num = new Number(68);

var oriOfNum = num.valueOf();//得到数字对象的Number的原始值

//toFixed(n) 显示n为小数位,仅限于0~20

var toFixNum = num.toFixed(2);

var toFixNumm = num.toFixed(3);

//toExponential(n) 用科学计数法表示的数字的字符串形式

var toExp = num.toExponential(1);

//toPrecision(n) 表示数的数字总数（不包括指数）

var toPre = num.toPrecision(1);

var toPree = num.toPrecision(2);

var toPreee = num.toPrecision(3);

console.log(num,oriOfNum,toFixNum,toFixNumm,toExp,toPre,toPree,toPreee);

//结果：68 "68.00" "68.000" "6.8e+1" "7e+1" "68" "68.0"

4、String对象：

//String对象

var strO = new String('hello world')

var valueStr = strO.valueOf();

var toStrStr = strO.toString();

console.log(valueStr,typeof valueStr,toStrStr,typeof toStrStr)//hello world string hello world string

//字符串的字符个数

var strLen = strO.length;

console.log(strLen);//11

//charAt()

var d0 = strO.charAt(0);

console.log(d0);//h

//charCodeAt()

var d1 = strO.charCodeAt(0);

console.log(d1);//104

//concat() 拼接字符串到str上,原始值不变

var str1 = new String('hello');

var str2 = str1.concat('world');

console.log(str1,str2);//String {"hello"} "helloworld"

//+:调用 concat() 方法返回的是 "hello world"，而 String 对象存放的仍然是 "hello "。出于这种原因，较常见的是用加号（+）连接字符串，因为这种形式从逻辑上表明了真正的行为

var str3 = new String('hello');

var str4 = str3 + 'world';

var strr = 'hello'

console.log(str3,str4,strr);//String {"hello"} "helloworld" "hello"

//indexof() lastIndexOf()

var index1 = strO.indexOf('o');

var index2 = strO.lastIndexOf('o');

var index3 = strO.indexOf('m');

var index4 = strO.lastIndexOf('m');

console.log(index1,index2,index3,index4)//4 7 -1 -1

// localeCompare() 是区分大小写;大写字母在字母顺序上排在小写字母之后

//如果 String 对象按照字母顺序排在参数中的字符串首字母之前，返回-1

//如果 String 对象等于参数中的字符串首字母之前，返回 0

//如果 String 对象按照字母顺序排在参数中的字符串首字母之前之后，返回1

var strY = 'eellow'

var one = strY.localeCompare('abc');//1

var two = strY.localeCompare('zoo');//-1

var three = strY.localeCompare('eellow');//0

var four = strY.localeCompare('Eellow')//-1

console.log(one,two,three,four);//1 -1 0 -1

//slice(),两个参数【起始index，终止index）

var sliceStr = strO.slice(1,3);

console.log(sliceStr);//el

//substring(),两个参数【起始index，终止index）

var subString = strO.substring(1,3);

console.log(subString);//el

//slice()与subString()区别

// 处理负数时slice()会将负数+字符串长度；subString()会将负数以0处理

//substring() 方法则将两个参数解释为 substring(3, 0)，实际上即 substring(0, 3)，因为 substring() 总把较小的数字作为起始位，较大的数字作为终止位

var sr1 = strO.slice(-3);

var sr11 = strO.slice('-3');

var sr111 = strO.slice('3','-4');

var sr2 = strO.substring(-3);

var sr22 = strO.substring('3','-4');

var sr222 = strO.substring('1','-4');

console.log(sr1,sr11,sr111,sr2,sr22);//rld rld lo w hello world hel

console.log(sr111,'=',sr22,'=',sr222);//lo w = hel = h

//大小写转换

var s1 = strO.toLowerCase();

var s2 = strO.toLocaleLowerCase();

var s3 = strO.toUpperCase();

var s4 = strO.toLocaleUpperCase();

console.log(s1,s2,s3,s4);//hello world hello world HELLO WORLD HELLO WORLD

//instanceof运算符;与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型,只有new String创建的字符串此值才为true

var bol = strO instanceof String;

console.log(bol);//true

var sdf = '都是对的';

var bol1 = sdf instanceof String;

console.log(bol1)//false

var bol2 = sdf instanceof Object;

console.log(bol2);//false

12、对象类型：

在ECMAScript中，所有对象并非等同创建。

可以创建并使用的对象分三种：本地对象、内置对象、宿主对象

12.1本地对象：本地对象就是 ECMA-262 定义的类（引用类型）

Object；

Function；

Array；

String；

Boolean；

Number；

Date；

RegExp;

Error;

EvalError;

RangeError;

ReferenceError;

SyntaxError;

TypeError;

URIError;

12.2内置对象：开发者不必明确实例化内置对象，它已被实例化，ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象）

1》Global对象（全局对象）：全局函数（顶层函数）；全局属性（顶层属性）

全局对象是预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称

Math对象；

在顶层 JavaScript 代码中，可以用关键字 this 引用全局对象。但通常不必用这种方式引用全局对象，因为全局对象是作用域链的头，这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。例如，当JavaScript 代码引用 parseInt() 函数时，它引用的是全局对象的 parseInt 属性。全局对象是作用域链的头，还意味着在顶层 JavaScript 代码中声明的所有变量都将成为全局对象的属性。

var test1="http://www.w3school.com.cn/My first/"

document.write(encodeURI(test1)+ "<br />")

document.write(decodeURI(test1))

2》Math对象：

var pi_value=Math.PI;

var sqrt_value=Math.sqrt(15);

12.3宿主对象：所有非本地对象都是宿主对象，所有BOM和DOM对象

RegExp：此对象表示正则表达式，匹配字符串；

1》RegExp对象：

直接量语法：/pattern/attributes

创建RegExp对象语法：new RegExp(pattern,attributes)

pattern：是正则表达式而不是字符串；

attributes：可选字符串；（g:全局匹配 i:区分大小写 m:多行匹配）

返回值：pattern 是正则表达式而不是字符串，RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象？？？。

抛出：

SyntaxError：如果pattern不是合法正则表达式，或attributes含i g m之外的字符，抛出该异常

TypeError：如果pattern是RegExp对象，但没有省略attributes，抛出该异常。

2》修饰符：匹配规则

i:执行对大小写不敏感的匹配。

g:执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

m:执行多行匹配。

3》方括号：用于查找某个范围内的字符：

[abc]:查找方括号之间的任何字符

[^abc]:查找任何不在方括号之间的字符

[0-9]:查找0-9的数字

[^0-9]:0-9以外的数字

[a-z]:a到z的字符

[A-Z]:A到Z的字符

[A-z]:A到z的字符

[adgk]:给定集合的任意字符

[^adgk]:给定集合外是任何字符

(red|blue|green):查找任何指定的选项

4》元字符：拥有特殊含义的字符

. 查找单个字符，除了换行和行结束符

\w 查找单词字符

\W 查找非单词字符

\d 查找数字

\D 查找非数字字符

\s 空白字符

\S 非空白字符

\b 匹配单词边界

\B 匹配非单词边界

\0 查找NUL字符

\n 查找换行符

\f 换页符

\r 回车符

\t 制表符

\v 垂直制表符

\xxx 八进制数xxx规定的字符

\xdd 十六进制数dd规定的字符

\uxxxx 十六进制数xxxx规定的Unicode字符

5》量词：

n+ 匹配任何包含至少一个n的字符串

n* 。。。。。。零个或多个n的字符串

n? 。。。。。。零个或一个n的字符串

n{X} 匹配包含X个n的序列的字符串

n{X,Y} 匹配包含X至Y个n的序列字符串

n{X,} 匹配包含至少X个n的序列字符串

n$ 匹配任何结尾为n的字符串

^n 。。。。以n开头的字符串

?=n 。。。。其后紧接指定字符串n的字符串

?!n 。。。。其后没有紧接指定字符串n的字符串

6》对象属性：

Global：RegExp对象是否有标志g，如果g标志被设置则为true，反之为false

ignoreCase：RegExp对象是否有标志i，如果i标志被设置则为true，反之为false

lastIndex：一个整数，标示开始下一次匹配的起始字符位置（重要事项：不具有标志 g 和不表示全局模式的 RegExp 对象不能使用 lastIndex 属性。提示：如果在成功地匹配了某个字符串之后就开始检索另一个新的字符串，需要手动地把这个属性设置为 0。）

multiline: RegExp对象是否有标志m，如果m标志被设置则为true，反之为false

source: 正则表达式的源文本

7》对象方法：

compile():编译正则表达式；改变和重新编译正则表达式

var str="Every man in the world! Every woman on earth!";

patt=/man/g;

str2=str.replace(patt,"person");

document.write(str2+"<br />");

patt=/(wo)?man/g;

patt.compile(patt);

str2=str.replace(patt,"person");

document.write(str2);

</script>

exec():检索字符串中指定的值。返回找到的值，并确定其位置

返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

如果 exec() 找到了匹配的文本，则返回一个结果数组。否则，返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本，第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（如果有的话），第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本（如果有的话），以此类推。除了数组元素和 length 属性之外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看得出，在调用非全局的 RegExp 对象的 exec() 方法时，返回的数组与调用方法 String.match() 返回的数组是相同的。

但是，当 RegExpObject 是一个全局正则表达式时，exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说，您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。

例：

var str = "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll W3School";

//2、局部RegExp

function testIvarRegExp() {

var patt = new RegExp("W3School","g");

var pattresult = patt.exec(str);

console.log(pattresult)

console.log('match',str.match('W3School'))

}

//1、全局RegExp

var patt = new RegExp("W3School","g");

var result;

while ((result = patt.exec(str)) != null) {

document.write(result);

document.write("<br />");

document.write(patt.lastIndex);

document.write("<br />");

console.log('result',result)

}

result ["W3School", index: 8, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll W3School", groups: undefined]

js-对象.html?_ijt=bn65ed7rc3griu7a6i6pnbf22c:356 result ["W3School", index: 23, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll W3School", groups: undefined]

js-对象.html?_ijt=bn65ed7rc3griu7a6i6pnbf22c:356 result ["W3School", index: 33, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll W3School", groups: undefined]

js-对象.html?_ijt=bn65ed7rc3griu7a6i6pnbf22c:356 result ["W3School", index: 77, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll W3School", groups: undefined]

js-对象.html?_ijt=bn65ed7rc3griu7a6i6pnbf22c:356 result ["W3School", index: 89, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll W3School", groups: undefined]

js-对象.html?_ijt=bn65ed7rc3griu7a6i6pnbf22c:345

["W3School", index: 8, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll W3School", groups: undefined]

js-对象.html?_ijt=bn65ed7rc3griu7a6i6pnbf22c:346 match ["W3School", index: 8, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll W3School", groups: undefined]

提示：请注意，无论 RegExpObject 是否是全局模式，exec() 都会把完整的细节添加到它返回的数组中。这就是 exec() 与 String.match() 的不同之处，后者在全局模式下返回的信息要少得多。因此我们可以这么说，在循环中反复地调用 exec() 方法是唯一一种获得全局模式的完整模式匹配信息的方法。

test():检索字符串中指定值。返回true或false

RegExpObject.test(string)

var str = "Visit W3School";

var patt1 = new RegExp("W3School");

var result = patt1.test(str);

如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

8》支持正则表达式的String对象的方法：

search():方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

stringObject.search(regexp)如果没有找到任何匹配的子串，则返回 -1。

search() 方法不执行全局匹配，它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性，并且总是从字符串的开始进行检索，这意味着它总是返回 stringObject 的第一个匹配的位置

//支持正则表达式的String对象的方法

//1、search()

//返回值：stringObject 中第一个与 regexp 相匹配的子串的起始位置。如果没有找到任何匹配的子串，则返回 -1。

var str = 'Visit w3School W3School ffW3School teacher!'

var ind = str.search(/W3School/);

var pattern = new RegExp('W3School','i');

var ind1 = str.search(pattern);

var ind2 = str.search(/W3School/i);

var ind3 = str.search(/w3School/i);

var ind4 = str.search(/w3School/);

var ind5 = str.search(/W3School/g);

var ind6 = str.search(/Teacher/)

console.log(ind,ind1,ind2,ind3,ind4,ind5,ind6);

// 15 6 6 6 6 15 -1

//2、match() 找到一个或多个正则表达式的匹配

返回：存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

match() 方法将检索字符串 stringObject，以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外，返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置，input 属性声明的是对 stringObject 的引用。

如果 regexp 具有标志 g，则 match() 方法将执行全局检索，找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串，则返回 null。如果找到了一个或多个匹配子串，则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同，它的数组元素中存放的是 stringObject 中所有的匹配子串，而且也没有 index 属性或 input 属性。

//2.1 match()检索字符串：stringObject.match(searchvalue)

var strm="Hello world!"

var m1 = strm.match('world');

var m2 = strm.match('World');

var m3 = strm.match('worlld');

var m4 = strm.match('world!');

console.log(m1,m2,m3,m4);

// ["world", index: 6, input: "Hello world!", groups: undefined]

// null

// ["world!", index: 6, input: "Hello world!", groups: undefined]

//2.2 match()检索正则表达式：stringObject.match(regexp)

var strmm = '1plus2equal3';

var patternM = new RegExp('\d','g');

var patternM1 = /\d+/g;

var mm1 = strmm.match(patternM);

var mm2 = strmm.match(patternM1);

console.log(mm1,mm2);

//3、replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

//stringObject.replace(regexp/substr,replacement)

//返回值：一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的

// regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

//第一个参数：规定子字符串或要替换的模式的 RegExp 对象，请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象

//第二个参数replacement：可以是字符串，也可以是函数；

//replacement中的$有特定含义

/**

* $1、$2、$3、$4、...、$99 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本

* $& 与 regexp 相匹配的子串

* $` 位于匹配子串左侧的文本

* $' 位于匹配子串右侧的文本

* $$ 直接量符号

* 注意：ECMAScript v3 规定，replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下，每个匹配都调用该函数，它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。接下来的参数是一个整数，声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

* */

// 3.1、替换字符串

var str="Visit Microsoft!"

console.log(str.replace(/Microsoft/, "W3School"));

// 3.2、替换字符串-全局替换

var str="Welcome to Microsoft! "

str=str + "We are proud to announce that Microsoft has "

str=str + "one of the largest Web Developers sites in the world."

console.log(str.replace(/Microsoft/g, "W3School"));

// 3.3、确保匹配字符串大写字符的正确

var text = "javascript Tutorial";

text.replace(/javascript/i, "JavaScript");

// 3.4、正则表达式+replacement参数中$符

var name = "Doe, John";

name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");

// 3.5、正则表达式+replacement参数$符

name = '"a", "b"';

name.replace(/"([^"]*)"/g, "'$1'");

// 3.6、正则表达式+replacement参数为函数

name = 'aaa bbb ccc';

uw=name.replace(/\b\w+\b/g, function(word){

return word.substring(0,1).toUpperCase()+word.substring(1);}

);

//4、split()把字符串分割为字符串数组

// stringObject.split(separator,howmany)

// 参数一：必需，字符串或正则表达式，从该参数指定的地方分割 stringObject

// 参数二：可选，该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度

//返回值：一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。

// 但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本

//String.split() 执行的操作与 Array.join 执行的操作是相反的

//1》

var strSp = "How are you doing today?";

var sp1 = strSp.split('');

var sp2 = strSp.split(' ');

var sp3 = strSp.split(' ',3);

console.log(sp1,sp2,sp3);

//2》

var sp4 = '2:3:4:5'.split(':');

var sp5 = '|a|b|c'.split('|');

console.log(sp4,sp5);

// 3》

var sentence = 'I am a beautify girl';

var sp6 = sentence.split(' ');

var sp7 = sentence.split(/\s+/);

console.log(sp6,sp7);

2》Js Events

事件通常与函数配合使用；

onabort:图像加载被中断

onblur：元素失去焦点

onchange：用户改变阈的内容

onclick：鼠标点击某个对象

ondblclick：鼠标双击某个对象

onerror：当加载文档或图像时发生某个错误

onfocus：元素获得焦点

onkeydown：某个键盘的键被按下

onkeypress：某个键盘的键被按下或按住

onkeyup：某个键盘的键被松开

onload：某个页面或图像被完成加载

onmousedown：某个鼠标按键被按下

onmousemove：鼠标被移动

onmouseout：鼠标从某元素移开

onmouseover：鼠标被移到某元素之上

onmouseup：某个鼠标按键被松开

onreset：重置按钮被点击

onresize：窗口或框架被调整尺寸

onselect：文本被选定

onsubmit：提交按钮被点击

onunload：用户退出页面

13、js继承：/Users/yangyangzi/Desktop/YangZi2/2019前端/h5+css+js/testJS/html/js-继承.html（公司电脑）

https://www.cnblogs.com/liangxiaofeng/p/5935581.html

https://www.cnblogs.com/yichengbo/p/3719387.html

https://www.cnblogs.com/yichengbo/p/3719164.html

https://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp

出于安全原因，本地类和宿主类不能作为基类，这样可以防止公用访问编译过的浏览器级的代码，因为这些代码可以被用于恶意攻击。

有时，你可能想创建一个不能直接使用的基类，它只是用于给子类提供通用的函数。在这种情况下，基类被看作抽象类。

创建的子类将继承超类的所有属性和方法，包括构造函数及方法的实现。

ECMAScript 实现继承的方式不止一种；是因为 JavaScript 中的继承机制并不是明确规定的，而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者，你有权决定最适用的继承方式。

继承方式：

1》对象冒充：使A类的构造方法成为B类的方法，然后在B类的构造方法中调用此方法。

构想原始的 ECMAScript 时，根本没打算设计对象冒充（object masquerading）。它是在开发者开始理解函数的工作方式，尤其是如何在函数环境中使用 this 关键字后才发展出来。

原理：构造函数使用 this 关键字给所有属性和方法赋值（即采用类声明的构造函数方式）。因为构造函数只是一个函数，所以可使 ClassA 构造函数成为 ClassB 的方法，然后调用它。ClassB 就会收到 ClassA 的构造函数中定义的属性和方法；这个原理是把 ClassA 作为常规函数来建立继承机制，而不是作为构造函数。在代码中，为 ClassA 赋予了方法 newMethod（请记住，函数名只是指向它的指针）。然后调用该方法，传递给它的是 ClassB 构造函数的参数 sColor。最后一行代码删除了对 ClassA 的引用，这样以后就不能再调用它；所有新属性和新方法都必须在删除了新方法的代码行后定义。否则，可能会覆盖超类的相关属性和方法（我未删除，暂未发现覆盖的问题，可能在特定情况下会出问题）

1.1》冒充对象-直接法

{//冒充对象

function classA(sColor) {

this.color = sColor;

this.sayColor = function () {

console.log(this.color);

}

function classB(sColor,name) {

this.newMethod = classA;

this.newMethod(sColor);

delete this.newMethod;

this.BMethod = function () {

console.log('B类新加的方法');

}

this.Bname = name;

}

var a = new classA('blue');

var b = new classB('red','小龙');

a.sayColor();//blue

// a.BMethod(); //Uncaught TypeError: a.BMethod is not a function

b.sayColor();//red

b.BMethod();//B类新加的方法

console.log(a.color,a.Bname,b.color,b.Bname);//blue,undefined，red，小龙

}

冒充对象可以实现多重继承

function ClassZ() {

this.newMethod = ClassX;

this.newMethod();

delete this.newMethod;

this.newMethod = ClassY;

this.newMethod();

delete this.newMethod;

}

这里存在一个弊端，如果存在两个类 ClassX 和 ClassY 具有同名的属性或方法，ClassY 具有高优先级。因为它从后面的类继承。除这点小问题之外，用对象冒充实现多重继承机制轻而易举

call()方法
function sayColor(sPrefix,sSuffix) {

alert(sPrefix + this.color + sSuffix);

};

var obj = new Object();

obj.color = "blue";

sayColor.call(obj, "The color is ", "a very nice color indeed.");

1.2》冒充对象-call()方法:与对象冒充方法相似；参数一：this对象；其他参数都直接传递给函数自身。

要与继承机制的对象冒充方法一起使用该方法，只需将前三行的赋值、调用和删除代码替换即可:

function ClassB(sColor, sName) {

//this.newMethod = ClassA;

//this.newMethod(color);

//delete this.newMethod;

ClassA.call(this, sColor);

this.name = sName;

this.sayName = function () {

alert(this.name);

};

}

1.3》冒充对象-apply()方法：与call()方法相似；参数一：this对象；参数二：要传递给函数的参数的数组；

注：webstorm(MAC)格式化快捷键：option + cmd + L

2》原型链：(prototype-chaining)//原型链不经继承以原型方式创建的属性和方法，也继承构造函数中创建的属性和方法

继承这种形式在 ECMAScript 中原本是用于原型链的。上一章介绍了定义类的原型方式。原型链扩展了这种方式，以一种有趣的方式实现继承机制。

在上一章学过，prototype 对象是个模板，要实例化的对象都以这个模板为基础。总而言之，prototype 对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制。

function ClassA() {

this.onlyAPro = 'aOne';

this.onlyAFunc = function () {

console.log(this,'这是ClassA的only方法',this.onlyAPro);

}

ClassA.prototype.name = '小明';

ClassA.prototype.age = 12;

ClassA.prototype.aMethod = function () {

console.log(this.name,this.age);

}

function ClassB() {

this.onlyBPro = 'bOne';

this.onlyBFunc = function () {

console.log(this,'这是ClassB的only方法',this.onlyBPro);

}

ClassB.prototype = new ClassA();

ClassB.prototype.address = '中国';

ClassB.prototype.name = '晓梅';

ClassB.prototype.bMethod = function () {

console.log(this.name,this.age,this.address);

}

var a = new ClassA();

a.aMethod();

a.onlyAFunc();

// a.bMethod();//Uncaught TypeError: a.bMethod is not a function

var b = new ClassB();

b.age = 23;

b.aMethod();

b.bMethod();

b.onlyBFunc();

b.onlyAFunc();

//原型链不经继承以原型方式创建的属性和方法，也继承构造函数中创建的属性和方法

//注意：在原型链中，instanceof 运算符的运行方式也很独特。对 ClassB 的所有实例，instanceof 为 ClassA 和 ClassB 都返回 true

console.log(a instanceof ClassA);

console.log(b instanceof ClassB);

原型方式的神奇之处在于ClassB.prototype = new ClassA();。这里，把 ClassB 的 prototype 属性设置成 ClassA 的实例。这很有意思，因为想要 ClassA 的所有属性和方法，但又不想逐个将它们 ClassB 的 prototype 属性。这是最好方法。

注意：调用 ClassA 的构造函数，没有给它传递参数。这在原型链中是标准做法。要确保构造函数没有任何参数。

与对象冒充相似，子类的所有属性和方法都必须出现在 prototype 属性被赋值后，因为在它之前赋值的所有方法都会被删除。因为 prototype 属性被替换成了新对象，添加了新方法的原始对象将被销毁。

在原型链中，instanceof 运算符的运行方式也很独特。对 ClassB 的所有实例，instanceof 为 ClassA 和 ClassB 都返回 true

console.log(a instanceof ClassA);

console.log(b instanceof ClassB);

在 ECMAScript 的弱类型世界中，这是极其有用的工具，不过使用对象冒充时不能使用它。

原型链的弊端是不支持多重继承。记住，原型链会用另一类型的对象重写类的 prototype 属性。

3》混合方式：创建类的最好方式是用构造函数定义属性，用原型定义方法。这种方式同样适用于继承机制，用对象冒充继承构造函数的属性，用原型链继承 prototype 对象的方法

function ClassA(name) {

this.name = name;

}

ClassA.prototype.tellStory = function () {

console.log('听',this.age,'岁的',this.name,'讲ClassA的故事');

}

function ClassB(name,age) {

ClassA.call(this,name);

this.age = age;

}

ClassB.prototype = new ClassA();

var a = new ClassA('小龙');

var b = new ClassB('小丽',13);

a.tellStory();

b.tellStory();

console.log(a instanceof ClassA);//true

console.log(b instanceof ClassB);//true

由于这种混合方式使用了原型链，所以 instanceof 运算符仍能正确运行

URL URI：

URL 的常见定义格式为：scheme://host[:port#]/path/.../[;url-params][?query-string][#anchor]

URL：统一资源定位符

URI：统一资源标识符

URI 属于父类，而 URL 属于 URI 的子类。URL 是 URI 的一个子集。

二者的区别在于，URI 表示请求服务器的路径，定义这么一个资源。而 URL 同时说明要如何访问这个资源（http://）

https://www.cnblogs.com/haore147/p/5507662.html

14、对象-定义类或对象的方式：

1》工厂方式：

每个对象都有自己的 showColor() 版本。而事实上，每个对象都共享同一个函数。

有些开发者在工厂函数外定义对象的方法，然后通过属性指向该方法，从而避免这个问题：

function showColor() {

alert(this.color);

}

function createCar(sColor,iDoors,iMpg) {

var oTempCar = new Object;

oTempCar.color = sColor;

oTempCar.doors = iDoors;

oTempCar.mpg = iMpg;

oTempCar.showColor = showColor;

return oTempCar;

}

var oCar1 = createCar("red",4,23);

var oCar2 = createCar("blue",3,25);

oCar1.showColor(); //输出 "red"

oCar2.showColor(); //输出 "blue"

2》构造函数方式：

function Car(sColor,iDoors,iMpg) {

this.color = sColor;

this.doors = iDoors;

this.mpg = iMpg;

this.showColor = function() {

alert(this.color);

};

}

var oCar1 = new Car("red",4,23);

var oCar2 = new Car("blue",3,25);

就像工厂函数，构造函数会重复生成函数，为每个对象都创建独立的函数版本。不过，与工厂函数相似，也可以用外部函数重写构造函数，同样地，这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在

3》原型方式：

function Car() {

}

Car.prototype.color = "blue";

Car.prototype.doors = 4;

Car.prototype.mpg = 25;

Car.prototype.drivers = new Array("Mike","John");

Car.prototype.showColor = function() {

alert(this.color);

};

var oCar1 = new Car();

var oCar2 = new Car();

oCar1.drivers.push("Bill");

alert(oCar1.drivers); //输出 "Mike,John,Bill"

alert(oCar2.drivers); //输出 "Mike,John,Bill"

问题：

1、这个构造函数没有参数。使用原型方式，不能通过给构造函数传递参数来初始化属性的值

2、函数共享不会造成问题，但对象却很少被多个实例共享，是引用值，Car 的两个实例都指向同一个数组。这意味着给 oCar1.drivers 添加值 "Bill"，在 oCar2.drivers 中也能看到。输出这两个指针中的任何一个，结果都是显示字符串 "Mike,John,Bill"。

4》混合的构造函数/原型方式：最优解

联合使用构造函数和原型方式，就可像用其他程序设计语言一样创建对象。这种概念非常简单，即用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数属性（方法）。结果是，所有函数都只创建一次，而每个对象都具有自己的对象属性实例

function Car(sColor,iDoors,iMpg) {

this.color = sColor;

this.doors = iDoors;

this.mpg = iMpg;

this.drivers = new Array("Mike","John");

}

Car.prototype.showColor = function() {

alert(this.color);

};

var oCar1 = new Car("red",4,23);

var oCar2 = new Car("blue",3,25);

oCar1.drivers.push("Bill");

alert(oCar1.drivers); //输出 "Mike,John,Bill"

alert(oCar2.drivers); //输出 "Mike,John"

5》动态原型方法：次优解

动态原型方法的基本想法与混合的构造函数/原型方式相同，即在构造函数内定义非函数属性，而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置

function Car(sColor,iDoors,iMpg) {

this.color = sColor;

this.doors = iDoors;

this.mpg = iMpg;

this.drivers = new Array("Mike","John");

if (typeof Car._initialized == "undefined") {

Car.prototype.showColor = function() {

alert(this.color);

};

Car._initialized = true;

}

6》混合工厂方式：

这种方式通常是在不能应用前一种方式时的变通方法。它的目的是创建假构造函数，只返回另一种对象的新实例。

这段代码看起来与工厂函数非常相似

function Car() {

var oTempCar = new Object;

oTempCar.color = "blue";

oTempCar.doors = 4;

oTempCar.mpg = 25;

oTempCar.showColor = function() {

alert(this.color);

};

return oTempCar;

}

var car = new Car();

结论：使用最广泛的是混合的构造函数/原型方式。此外，动态原始方法也很流行，在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。

15、对象-对象作用域：

1》公用、私有、受保护作用域

ECMAScript只有公用作用域；ECMAScript 中的所有对象的所有属性和方法都是公用的；

建议性解决方法：有效的属性作用域模式，解决了ECMAScript这种问题；

由于缺少私有作用域，开发者确定了一个规约，说明哪些属性和方法应该被看做私有的。这种规约规定在属性前后加下划线：obj._color_ = "blue";

注意：下划线并不改变属性是公用属性的事实，它只是告诉其他开发者，应该把该属性看作私有的。

2》静态作用域：ECMAScript 没有静态作用域

严格来说，ECMAScript 并没有静态作用域。不过，它可以给构造函数提供属性和方法。构造函数只是函数。函数是对象，对象可以有属性和方法

function sayHello() {

alert("hello");

}

sayHello.alternate = function() {

alert("hi");

}

sayHello(); //输出 "hello"

sayHello.alternate(); //输出 "hi"

这里，方法 alternate() 实际上是函数 sayHello 的方法。可以像调用常规函数一样调用 sayHello() 输出 "hello"，也可以调用 sayHello.alternate() 输出 "hi"。即使如此，alternate() 也是 sayHello() 公用作用域中的方法，而不是静态方法。

3》关键字this：在对象的方法中。关键字 this 总是指向调用该方法的对象

var oCar = new Object;

oCar.color = "red";

oCar.showColor = function() {

alert(this.color);//等价于alert(oCar.color);

};

oCar.showColor(); //输出 "red"

//this 等于 oCar。

使用this原因：因为在实例化对象时，总是不能确定开发者会使用什么样的变量名。使用 this，即可在任何多个地方重用同一个函数。

如果不用对象或 this 关键字引用变量，ECMAScript 就会把它看作局部变量或全局变量。然后该函数将查找名为 color 的局部或全局变量，但是不会找到。结果如何呢？该函数将在警告中显示 "null"

function showColor() {

alert(color);

};

16、对象-修改对象：

1》创建新方法：

Number.prototype.toHexString = function() {

return this.toString(16);

};

var iNum = 15;

alert(iNum.toHexString()); //输出 "F"

2》重命名已有方法：

我们还可以为已有的方法命名更易懂的名称。例如，可以给 Array 类添加两个方法 enqueue() 和 dequeue()，只让它们反复调用已有的 push() 和 shift() 方法即可：

Array.prototype.enqueue = function(vItem) {

this.push(vItem);

};

Array.prototype.dequeue = function() {

return this.shift();

};

3》添加与已有方法无关的方法：假设要判断某个项在数组中的位置，没有本地方法可以做这种事情。我们可以轻松地创建下面的方法：

Array.prototype.indexOf = function (vItem) {

for (var i=0; i<this.length; i++) {

if (vItem == this[i]) {

return i;

}

return -1;

}

var aColors = new Array("red","green","blue");

alert(aColors.indexOf("green")); //输出 "1"

4》为本地对象添加新方法：如果想给 ECMAScript 中每个本地对象添加新方法，必须在 Object 对象的 prototype 属性上定义它；所有本地对象都继承了 Object 对象，所以对 Object 对象做任何改变，都会反应在所有本地对象上。例如，如果想添加一个用警告输出对象的当前值的方法，可以采用下面的代码：

Object.prototype.showValue = function () {

alert(this.valueOf());

};

var str = "hello";

var iNum = 25;

str.showValue(); //输出 "hello"

iNum.showValue(); //输出 "25"

5》重定义已有方法：

Function.prototype.toString = function() {

return "Function code hidden";

}

function sayHi() {

alert("hi");

}

alert(sayHi.toString()); //输出 "Function code hidden"

toString() 指向的原始函数怎么了呢？它将被无用存储单元回收程序回收，因为它被完全废弃了。没有能够恢复原始函数的方法，所以在覆盖原始方法前，比较安全的做法是存储它的指针，以便以后的使用。有时你甚至可能在新方法中调用原始方法：

Function.prototype.originalToString = Function.prototype.toString;

Function.prototype.toString = function() {

if (this.originalToString().length > 100) {

return "Function too long to display.";

} else {

return this.originalToString();

}

};

6》极晚绑定：从技术上讲，根本不存在极晚绑定。本书采用该术语描述 ECMAScript 中的一种现象，即能够在对象实例化后再定义它的方法。

var o = new Object();

Object.prototype.sayHi = function () {

alert("hi");

};

o.sayHi();

在大多数程序设计语言中，必须在实例化对象之前定义对象的方法。这里，方法 sayHi() 是在创建 Object 类的一个实例之后来添加进来的。在传统语言中不仅没听说过这种操作，也没听说过该方法还会自动赋予 Object 对象的实例并能立即使用（接下来的一行）。

注意：不建议使用极晚绑定方法，因为很难对其跟踪和记录。不过，还是应该了解这种可能。

15、js事件：

16、js字符串：

\转义符：

\' '

\" "

\\ \

\b 退格

\f 换页

\n 换行

\r 回车

\t 水平制表符

\v 垂直制表符

长代码行换行：为了最佳可读性，程序员们通常会避免每行代码超过 80 个字符串。如果某条 JavaScript 语句不适合一整行，那么最佳换行位置是某个运算符之后；

也可以在字符串中换行，通过一个反斜杠即可：document.getElementById("demo").innerHTML = "Hello \

Kitty!";

\ 方法并不是 ECMAScript (JavaScript) 标准。

某些浏览器也不允许 \ 字符之后的空格。

对长字符串换行的最安全做法（但是有点慢）是使用字符串加法：

document.getElementById("demo").innerHTML = "Hello" +

"Kitty!";

字符串可以是对象 new创建：var y = new String("Bill");

字面方式创建：var firstName = "Bill"

注：请不要把字符串创建为对象。它会拖慢执行速度

var x = "Bill";

var y = new String("Bill");

// (x === y) 为 false，因为 x 和 y 的类型不同（字符串与对象）

var x = new String("Bill");

var y = new String("Bill");

// (x == y) 为 false，因为 x 和 y 是不同的对象

17、js字符串方法

//1、查找字符串

//indexOf()返回字符串中指定文本首次出现的索引;如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

//作为检索起始位置的第二个参数

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

var pos = str.indexOf('china')

var pos1 = str.indexOf('China')

var pos2 = str.indexOf('China',18);

var pos2 = str.indexOf('China',3);

console.log(pos,pos1,pos2);

//lastIndexOf() 法返回指定文本在字符串中最后一次出现的索引;如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

//lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。

var lain = str.lastIndexOf('China');

var lain1 = str.lastIndexOf('China',50);

var lain2 = str.lastIndexOf('China',52);

console.log(lain,lain1,lain2);

//search()方法搜索特定值的字符串，并返回匹配的位置：可与正则联合使用

var se = str.search('locate');

var se1 = str.search('China');

var se2 = str.search(/china/i);

console.log(se,se1,se2);

//2、提取部分字符串

/**

* slice(start,end) [)

* 1:如果某个参数为负，则从字符串的结尾开始计数

* 2:如果省略第二个参数，则该方法将裁剪字符串的剩余部分

* index = str.length + 负数

* substring(start,end) [)

* 1:substring() 类似于 slice()。

* 2:不同之处在于 substring() 无法接受负的索引

* 3:如果省略第二个参数，则该 substring() 将裁剪字符串的剩余部分。

* substr(start,end) [)

* 1:substr() 类似于 slice()

* 2:不同之处在于第二个参数规定被提取部分的长度

* 3:如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分

* 4:第一个参数可以为负，第二个则不能为负;如果首个参数为负，则从字符串的结尾计算位置

* */

//slice()

var str = "Apple, Banana, Mango";

var res = str.slice(7,13);

var res1 = str.slice(-13,-7);//str.slice(-13+str.length,-7+str.length)

var res2 = str.slice(7);

var res3 = str.slice(-13);

console.log(str.length,res,res1,res2,res3);

// Banana Banana Banana, Mango Banana, Mango

//substring()

var str = "Apple, Banana, Mango";

var subS = str.substring(7,13);

var subS1 = str.substring(7);

console.log(subS,subS1);

//substr()

var str = "Apple, Banana, Mango";

var res = str.substr(7,6);

var res1 = str.substr(7);

var res2 = str.substr(-5);

console.log(res,res1,res2);

//3、替换字符串内容replace()

/**

* replace() 方法不会改变调用它的字符串。它返回的是新字符串。

* 默认地，replace() 只替换首个匹配

* 默认地，replace() 对大小写敏感

* 与正则联合使用

* */

str = "Please visit Microsoft!";

var restr = str.replace('Microsoft','mama');

console.log(str,restr);

//4、大小写转换

//大写

var text1 = "Hello World!";

var text2 = text1.toUpperCase();

//小写

var text3 = text1.toLowerCase();

console.log(text1,text2,text3);

//5、concat() 连接两个或多个字符串;所有字符串方法都会返回新字符串。它们不会修改原始字符串。

// 正式地说：字符串是不可变的：字符串不能更改，只能替换

var tex1 = 'hello';

var tex2 = 'world';

var tex3 = tex1.concat('',tex2);

var tex4 = tex1.concat('-',tex2);

var tex5 = tex1.concat('aa','bb','cc');

console.log(tex3,tex4,tex5);

//6、trim() 方法删除字符串两端的空白符

var str = ' hello world! ';

var strr = str.trim();

console.log(str,strr);

//正则去两端的空白

var str = " Hello World! ";

var strrr = str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

console.log(strrr);

//7、提取字符串字符

/**

* charAt(position) 方法返回字符串中指定下标（位置）的字符串

* charCodeAt(position) 方法返回字符串中指定索引的字符 unicode 编码

* */

//charAt(position)

var str = "HELLO WORLD"

var str1 = str.charAt(0);

//charCodeAt(position)

var str2 = str.charCodeAt(0);

console.log(str1,str2);

//8、属性访问

/**

使用属性访问有点不太靠谱：

不适用 Internet Explorer 7 或更早的版本

它让字符串看起来像是数组（其实并不是）

如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。

它是只读的。str[0] = "A" 不会产生错误（但也不会工作！）

* */

var str = "HELLO WORLD";

var s = str[0];

console.log(s);//H

//不靠谱

str[0] = 's';

console.log(str[0]);//依旧是H

//9、字符串转换为数组 split()

/**

* 如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串

* 如果分隔符是 ""，被返回的数组将是间隔单个字符的数组

* */

var txt = 'a,b,c,d,e';

var t1 = txt.split(',');

var t2 = txt.split('');

var t3 = txt.split('|');

console.log(t1,t2,t3);

// ["a", "b", "c", "d", "e"] ["a", ",", "b", ",", "c", ",", "d", ",", "e"] ["a,b,c,d,e"]

18、js数字

JavaScript 只有一种数值类型;书写数值时带不带小数点均可。

//1、书写只有一种数值类型 JavaScript 数值既可以带小数点，也可以不带

var x = 3.14;

var y = 3;

//2、科学计数

var x = 123e5;

var y = 123e-5;

console.log(x,y);

//3、js数值始终是64位的浮点数

/**

* 与许多其他编程语言不同，JavaScript 不会定义不同类型的数，比如整数、短的、长的、浮点的等等;

* JavaScript 数值始终以双精度浮点数来存储，根据国际 IEEE 754 标准。

* 此格式用 64 位存储数值，其中 0 到 51 存储数字（片段），52 到 62 存储指数，63 位存储符号：

* */

//4、精度:

// 整数（不使用指数或科学计数法）会被精确到15位

var x = 999999999999999;//15 999999999999999

var y = 9999999999999999;//16 10000000000000000 17

console.log(x,y);

//999999999999999 10000000000000000

// 小数小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准

var x = 0.2 + 0.1;

console.log(x);

//0.30000000000000004 //17

var x = 2e-1 + 1e-1;

console.log(x);

//乘法解决以上问题

var x = (0.2 * 10 + 0.1 * 10)/10;

console.log(x);

//5、数字和字符相加

// js加法和级联（concatenation）都使用 + 运算符。

// 在所有数字运算中，js会尝试将字符串转化为数字 / * -

//6、数字字符串

var x = "100";

var y = "10";

var z = x / y

var m = x - y;

var n = x * y;

console.log(z,m,n,typeof z,typeof m,typeof n);

//7、NaN 非数值

// NaN 属于 JavaScript 保留词，指示某个数不是合法数。

// NaN 是数，typeof NaN 返回 number：

var x = 100 / "Apple";

isNaN(x);

console.log(x,isNaN(x));

//NaN true

//数学运算中使用了 NaN，则结果也将是 NaN

var x = NaN;

var y = 5;

var z = x + y; // z 将是 NaN

console.log(z);

//级联运算中使用了 NaN，结果是字符串

var x = NaN;

var y = "5";

var z = x + y; // z 将是 NaN5

console.log(z);

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

// 除以 0（零）也会生成 Infinity

var x = 2 / 0; // x 将是 Infinity

var y = -2 / 0; // y 将是 -Infinity

console.log(x,y,typeof Infinity,typeof -Infinity);

//9、进制

/**

* 绝不要用前导零写数字（比如 07）,一些 JavaScript 版本会把带有前导零的数解释为八进制

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

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

* */

var num = 128;

var a = num.toString(16);

var b = num.toString(8);

var c = num.toString(2);

console.log(a,b,c);

//10、数值可以是对象

/**

* 请不要创建数值对象。这样会拖慢执行速度。

new 关键词使代码复杂化，并产生某些无法预料的结果;

当使用 == 相等运算符时，相等的数看上去相等;

对象无法进行对比

* */

var x = 123;

var y = new Number(123);

console.log(typeof x,typeof y)

// number object

console.log(x == y,x === y);

//true false

//对象无法进行对比

var ff = new Number(500);

var gg = new Number(500);

console.log(ff == gg,ff === gg);

//false false

19、js Let

js块作用域：

1》通过var声明的变量没有块作用域，即块{}内声明的变量可以在块外进行访问。

{

var x = 10;

}

// 此处可以使用 x

ES2015之前，js没有块作用域。ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const

可以使用let关键词声明拥有块作用域的变量。

2》let在块{}内声明的变量无法在块外访问。

{

let x = 10;

}

// 此处不可以使用 x

3》重新声明变量：使用var关键字重新声明变量会带来问题。在块中声明变量也将重新声明块外变量。使用 let 关键字重新声明变量可以解决这个问题。

var x = 10;

// 此处 x 为 10

{

var x = 6;

// 此处 x 为 6

}

// 此处 x 为 6

用 let 关键字重新声明变量可以解决这个问题，在块中重新声明变量不会重新声明块外的变量。

var x = 10;

// 此处 x 为 10

{

let x = 6;

// 此处 x 为 6

}

// 此处 x 为 10

4》循环作用域：

4.1》在循环中使用var：

var i = 7;

for (var i = 0; i < 10; i++) {

// 一些语句

}

// 此处，i 为 10

此循环中使用var重新声明了循环外的变量i

4.2》在循环中使用let：

let i = 7;

for (let i = 0; i < 10; i++) {

// 一些语句

}

// 此处 i 为 7

此循环中使用let并没有重新声明循环外的变量；如果在循环中用let声明了变量i，那么只有在循环内i才是可见的。

5》函数作用域：

在函数内声明变量时，let和var很相似。都有函数作用域：

function myFunction() {

var carName = "porsche"; // 函数作用域

}

function myFunction() {

let carName = "porsche"; // 函数作用域

}

6》全局作用域：在块外声明，var和let也很相似，都有全局作用域；

var x = 10; // 全局作用域

let y = 6; // 全局作用域

7》HTML中全局变量：

使用js情况下，全局作用域是js环境；

在HTML中，全局作用域是window；

通过var关键词定义的全局变量属于window；

通过let关键词定义的全局变量不属于window；

8》重新声明：

8.1》允许在程序的任何位置使用 var 重新声明 JavaScript 变量：

var x = 10;

// 现在，x 为 10

var x = 6;

// 现在，x 为 6

8.2》在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的

var x = 10; // 允许

let x = 6; // 不允许

{

var x = 10; // 允许

let x = 6; // 不允许

}

8.3》在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的

let x = 10; // 允许

let x = 6; // 不允许

{

let x = 10; // 允许

let x = 6; // 不允许

}

8.4》在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的

let x = 10; // 允许

var x = 6; // 不允许

{

let x = 10; // 允许

var x = 6; // 不允许

}

8.5》在不同的作用域或块中，通过 let 重新声明变量是允许的：

let x = 6; // 允许

{

let x = 7; // 允许

}

{

let x = 8; // 允许

}

9》提升：

通过 var 声明的变量会提升到顶端；可以在声明变量之前就使用它

通过 let 定义的变量不会被提升到顶端；在声明 let 变量之前就使用它会导致 ReferenceError，变量从块的开头一直处于“暂时死区”，直到声明为止。

20、js数组：（家里电脑 WebstormProjects/untitled/）

//1、创建数组

//字面量方法：

//存同种类型元素

var cars = ['ss','d','D','true'];

console.log(cars);

//存不同类型的元素

var array1 = ['s',true,12,'dd'];

console.log(array1);

//new创建数组：存不同类型的元素

var newArray = new Array('trr','收到',34);

console.log(newArray);

//2、访问数组元素

var a1 = newArray[0];

console.log(a1);

//3、元素赋值

newArray[0] = '匀速';

console.log(newArray);

//4、访问完整数组

console.log(newArray);

//5、数组是对象

console.log(typeof array1,typeof newArray);

//6、数组元素可以是不同类型的变量;

var func = new Function('boy','girl','console.log(boy,girl);console.log(\'男孩和女孩\',boy,girl);')

var objecrtArray = new Array(Date.now(),func,cars);

console.log(objecrtArray);

//7、数组属性和方法

var x = objecrtArray.length;

var y = objecrtArray.sort();

console.log(x,y)

//8、遍历数组

//8.1 for循环遍历数组

for (i = 0;i < objecrtArray.length;i++){

console.log(objecrtArray[i])

}

//8.2 forEach(func) 为每个数组元素调用函数

var text = '0';

function myFunction(value) {

text += value;

}

objecrtArray.forEach(myFunction);

console.log(text);

//8.3添加数组元素

// push（）

console.log(objecrtArray);

objecrtArray.push('水果');

console.log(objecrtArray);

//index

objecrtArray[objecrtArray.length] = '拧开干妈看穿一切';

console.log(objecrtArray);

//8.3.1添加最高索引的元素可在数组中创建未定义的'洞'

objecrtArray[objecrtArray.length + 1] = '未定义的洞';

console.log(objecrtArray);

//8.4 关联数组：很多编程元素支持命名索引的数组;具有命名索引的数组别称为关联数组

//js不支持命名索引的数组；js只能使用数字索引

//如果在js中使用了命名索引数组，则会将此数组重新定义为标准对象,则所有数组的方法和属性将产生非正确结果(亲测，js索引数组没这些毛病)

var person = [];

person[0] = '人1';

person[1] = '人2';

console.log(person,person instanceof Array,person.length);

person['第三个人'] = '三人成虎';

console.log(person,person instanceof Array,person.length);

//8.5 识别数组 isArray()

var dd = Array.isArray(objecrtArray);

console.log(dd);

21、数组方法：

var array = ['a','b','c'];

//1、合成用逗号分割的字符串

var a1 = array.toString();

console.log(a1);

//2、合成用指定字符分割的字符串

var a2 = array.join();

console.log(a2);

var a3 = array.join('*');

console.log(a3);

var a4 = array.join('');

console.log(a4);

//3、pop() 删除最后一个元素,并返回最后一个元素

var a5 = array.pop()

console.log('a5:'+a5);

//4、push()返回数组长度

var a6 = array.push('push');

console.log('a6:'+a6);

//5、shift() 删除第一个元素，数组元素索引整体变小；并返回删除的元素

var a7 = array.shift();

console.log('a7:'+a7);

//6、unshift() 向数组开头添加元素，返回数组长度

var a8 = array.unshift('unshift');

console.log('a8:'+a8,array);

//7、更改元素

array[0] = '更改第一个元素';

//8、删除元素:delete会产生数组空洞，一般不用delete删除，而用pop或splice

delete array[2];

console.log('删除第三个元素后：',array);

//9、拼接数组splice() 返回新的数组(只返回被删除的元素组成的数组，不包含新添加的元素)；原数组会被改变

var a9 = array.splice(1,1,'splice1','splice2');//删除并添加元素

var ad = ['1','2','3','4','5','6','7'];

var ad1 = ad.splice(1,2,'收到','发');

console.log('a9:'+a9,'ad1:'+ad1,ad);

var a10 = array.splice(1,3);//删除元素

console.log('a10:'+a10);

//10、合并数组concat() 返回一个新数组，原数组不变

var array1 = ['concat1','concat2','concat3'];

var array2 = ['conc1','conc2','conc3'];

var a11 = array.concat(array1,array2);

console.log('a11:'+a11);

//11、剪裁数组 slice() 返回剪裁后的数组;原数组不变

console.log("array:"+array);

var a12 = a11.slice(1,3);

console.log('a12:'+a12,a11);

var a13 = a11.slice(2);//从索引2开始剪裁剩下的数组

console.log('a13:'+a13,a11);

//12、自动toString()

document.getElementsByClassName('hh')[0].innerHTML = array;

document.getElementsByClassName('hhh')[0].innerHTML = array.toString();

22、数组排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];

console.log(fruits);

//1、排序sort()

fruits.sort();

console.log(fruits);

//2、翻转数组

fruits.reverse();

console.log(fruits);

//3、数字排序

var numArray = [21,13,1,3,6,12];

console.log(numArray);

numArray.sort();

console.log(numArray);

//升序

numArray.sort(function (a, b) {

return a - b;

});

console.log(numArray);

//降序

numArray.sort(function (a, b) {

return b - a;

})

console.log(numArray);

//4、查找数组最大、小值

//4.1、排序后查找,效率极低

//4.2、Math.max;Math.min

var max = Math.max.apply(null,numArray);

var min = Math.min.apply(null,numArray);

console.log(max,min);

//4.3、自制方法

//最大值此函数遍历数组，用找到的最高值与每个值进行比较

function myArrayMax(arr) {

var len = arr.length

var max = -Infinity;

while (len--) {

if (arr[len] > max) {

max = arr[len];

}

return max;

}

var maxx = myArrayMax(numArray);

console.log('自制函数max:',maxx);

//最小值此函数遍历数组，用找到的最低值与每个值进行比较

function myArrayMin(arr) {

var len = arr.length

var min = Infinity;

while (len--) {

if (arr[len] < min) {

min = arr[len];

}

return min;

}

var minm = myArrayMin(numArray);

console.log('自制函数min：',minm);

//5、排序对象数组

var cars = [{type:'Volovw',year:2015},{type: 'Saab',year: 2001},{type:'BMW',year:2010}];

//数字排序：根据year

// cars.sort(function (a,b) {

// return a.year - b.year;

// })

cars.sort(function(a, b){return a.year - b.year});

console.log(cars);

/**

* 0: {type: "Saab", year: 2001}

* 1: {type: "BMW", year: 2010}

* 2: {type: "Volovw", year: 2015}

* */

//文字排序：根据type

cars.sort(function (a, b) {

var x = a.type.toLowerCase();

var y = b.type.toLowerCase();

if (x < y){return -1;}

if (x > y){return 1;}

return 0;

});

console.log(cars);

/**

* 0: {type: "BMW", year: 2010}

* 1: {type: "Saab", year: 2001}

* 2: {type: "Volovw", year: 2015}

* */

23、数组迭代：

//1、forEach() 方法为每个数组元素调用一次函数（回调函数）;不产生新数组

var number = [45,4,9,16,25];

console.log(number);

var newArray = [];

number.forEach(function (value, index, array) {

newArray[index] = value + 2;

});

console.log(number,newArray);

//2、map()产生新数组

/**

* map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

* */

var newN = number.map(function (value, index, array) {

return value += 3;

});

console.log(number,newN);

//3、filter() 方法创建一个包含通过测试的数组元素的新数组

var over18 = number.filter(function (value,index,array) {

return value > 18

});

console.log('over18:',over18);

//4、reduce() 返回一个值

/**

* reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

reduce() 方法在数组中从左到右工作。另请参见 reduceRight（）。

reduce() 方法不会减少原始数组

* */

var sum = number.reduce(function (total,value,index,array) {

console.log('total:'+total);

return total + value;

});

console.log(sum);

//5、reduceRight() 与reduce()啥区别

/**

* reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

reduceRight() 方法在数组中从左到右工作。另请参见 reduce（）。

reduceRight() 方法不会减少原始数组

* */

var sumRight = number.reduceRight(function (total,value,index,array) {

return total + value;

});

console.log('sumRight:'+sumRight);

//6、every() 查看是否每个元素都满足条件；返回boolean值

var every = number.every(function (value, index, array) {

return value > 18;

});

console.log(every);

//7、some() 查看是否有元素满足条件；返回boolean值

var some = number.some(function (value, index, array) {

return value > 18;

});

console.log(some);

//8、indexOf() 方法在数组中搜索元素值并返回其位置。

var fruits = ["Apple", "Orange", "Apple", "Mango","Apple"];

var a = fruits.indexOf("Apple");

//9、lastIndexOf() array.lastIndexOf(item, start) start可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头

var b = fruits.lastIndexOf("Apple");

var c = fruits.lastIndexOf("Apple",1);//????不太好使呢，这个方法

console.log(a,b,c);

//10、find() 方法返回通过测试函数的第一个数组元素的值

var finds = number.find(function (value,index,array) {

return value > 18;

});

console.log('find:',finds);

//11、findIndex() 方法返回通过测试函数的第一个数组元素的索引

var findindex = number.findIndex(function (value, index, array) {

return value < 18;

});

console.log(findindex);

24、日期

var d = new Date();

console.log(d);

/**

创建 Date 对象

Date 对象由新的 Date() 构造函数创建。

有 4 种方法创建新的日期对象：

new Date()

new Date(year, month, day, hours, minutes, seconds, milliseconds)

new Date(milliseconds)

new Date(date string)*

* */

var d1 = new Date(2018,11,24,10,33,30,0);

var d2 = new Date(2018,11,24,10,33,30);

var d3 = new Date(2018,11,24,10,33);

var d4 = new Date(2018,11,24,10);

var d5 = new Date(2018,11,24);

var d6 = new Date(2018,11);

var d7 = new Date(2018);//不能神略月份，如果只提供一个参数，则将其视为毫秒

console.log(d1,d2,d3,d4,d5,d6,d7);

//上世纪：一位和两位数年份将被解释为 19xx 年

var d8 = new Date(99,11,24);

var d9 = new Date(9,11,24);

console.log(d8,d9);

//日期字符串 new Date(dateString) 从日期字符串创建一个新的日期对象

var d10 = new Date("October 13, 2014 11:13:00");

console.log(d10);

// new Date(milliseconds) 创建一个零时加毫秒的新日期对象

var d11 = new Date(0);

var d12 = new Date(100000000000);//1970年 1 月 1 日加上100 000 000 000毫秒，大约是 1973 年 3 月 3 日

var d13 = new Date(-100000000000);//1970 年 1 月 1 日减去 100 000 000 000 毫秒大约是 1966 年 10 月 31 日

console.log(d11,d12,d13);

//在 HTML 中显示日期对象时，会使用 toString() 方法自动转换为字符串

d = new Date();

document.getElementById("demo1").innerHTML = d;

// 等同于

document.getElementById("demo2").innerHTML = d.toString();

//toUTCString() 方法将日期转换为 UTC 字符串（一种日期显示标准）。

document.getElementById("demo3").innerHTML = d.toUTCString();

//toDateString() 方法将日期转换为更易读的格式

document.getElementById('demo4').innerHTML = d.toDateString();

25、日期格式：没啥内容；无论输入哪种格式，输出的日期格式一样，JavaScript 默认将输出全文本字符串格式

ISO 日期	"2018-02-19" （国际标准）
短日期	"02/19/2018" 或者 "2018/02/19"
长日期	"Feb 19 2018" 或者 "19 Feb 2019"
完整日期	"Monday February 25 2015"

26、日期获取方法：

/**

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 日至今

* */

var d = new Date();

var d1 = d.getDate();

var d2 = d.getDay();

var d3 = d.getFullYear();

var d4 = d.getHours();

var d5 = d.getMilliseconds();

var d6 = d.getMinutes();

var d7 = d.getMonth();

var d8 = d.getSeconds();

var d9 = d.getTime();

console.log(d,d1, d2, d3, d4, d5, d6, d7, d8, d9)

// Sun Aug 25 2019 17:03:40 GMT+0800 (中国标准时间) 25 0 2019 17 862 3 7 40 1566723820862

/**

getUTCDate() 等于 getDate()，但返回 UTC 日期

getUTCDay() 等于 getDay()，但返回 UTC 日

getUTCFullYear() 等于 getFullYear()，但返回 UTC 年

getUTCHours() 等于 getHours()，但返回 UTC 小时

getUTCMilliseconds() 等于 getMilliseconds()，但返回 UTC 毫秒

getUTCMinutes() 等于 getMinutes()，但返回 UTC 分

getUTCMonth() 等于 getMonth()，但返回 UTC 月

getUTCSeconds() 等于 getSeconds()，但返回 UTC 秒

* */

var dd = new Date();

var dd1 = dd.getUTCDate();

var dd2 = dd.getUTCDay();

var dd3 = dd.getUTCFullYear();

var dd4 = dd.getUTCHours();

var dd5 = dd.getUTCMilliseconds();

var dd6 = dd.getUTCMinutes();

var dd7 = dd.getUTCMonth();

var dd8 = dd.getUTCSeconds();

console.log(dd,dd1,dd2,dd3,dd4,dd5,dd6,dd7,dd8);

// Sun Aug 25 2019 17:03:40 GMT+0800 (中国标准时间) 25 0 2019 9 862 3 7 40

27、日期设置方法：

/**

setDate() 以数值（1-31）设置日

setFullYear() 设置年（可选月和日）

setHours() 设置小时（0-23）

setMilliseconds() 设置毫秒（0-999）

setMinutes() 设置分（0-59）

setMonth() 设置月（0-11）

setSeconds() 设置秒（0-59）

setTime() 设置时间（从 1970 年 1 月 1 日至今的毫秒数）

* */

var d = new Date();

console.log(d);

d.setFullYear(2020);

console.log(d);

d.setFullYear(2020,11,3);

console.log(d);

d.setMonth(11);

console.log(d);

d.setDate(12);

console.log(d);

d.setDate(d.getDate() + 50);

console.log(d);

d.setHours(2);

console.log(d);

d.setMinutes(34);

console.log(d);

d.setSeconds(21);

console.log(d);

//比较日期

var today = new Date();

var someDay = new Date();

someDay.setFullYear(2022);

if (today > someDay){

console.log('今天在2022年之后');

} else {

console.log('今天在2022年之前');

}

28、数学

var a1 = Math.PI;

var a2 = Math.round(1.23);//的返回值是 x 四舍五入为最接近的整数

var a3 = Math.pow(8,2);//Math.pow(x, y) 的返回值是 x 的 y 次幂

var a4 = Math.sqrt(64);//Math.sqrt(x) 返回 x 的平方根

var a5 = Math.abs(-34);//Math.abs(x) 返回 x 的绝对（正）值

var a6 = Math.ceil(8.4);//Math.ceil(x) 的返回值是 x 上舍入最接近的整数

var a7 = Math.floor(4.2);//Math.floor(x) 的返回值是 x 下舍入最接近的整数

var a8 = Math.max(0,23,1,21,-3,4);

var a9 = Math.min(0,23,1,21,-3,4);

var a10 = Math.random();//[0,1)返回介于 0（包括）与 1（不包括）之间的随机数

console.log(a1,a2,a3,a4,a5,a6,a7,a8,a9,a10);

29、随机

// Math.random() 与 Math.floor() 一起使用用于返回随机整数

//返回0~9

var a1 = Math.floor(Math.random() * 10);

console.log(a1);

var a2 = Math.floor(Math.random() * 100)+1;//1~100

console.log(a2);

//一个适当的随机数

function getRndInteger(min,max) {

return Math.floor(Math.random()*(max - min))+min;

}

var num = getRndInteger(2,13);

console.log(num);

30、逻辑

过

31、比较

过

32、条件

过

33、Switch

过

34、Loop For

for循环过

35、Loop While

while循环过

36、Break

过

37、类型转换

// Number() 转换数值，String() 转换字符串，Boolean() 转换布尔值

/**

JavaScript 中有五种可包含值的数据类型：

字符串（string）

数字（number）

布尔（boolean）

对象（object）

函数（function）

有三种对象类型：

对象（Object）

日期（Date）

数组（Array）

同时有两种不能包含值的数据类型：

null

undefined

* */

//1、typeof typeof 运算符不是变量。它属于运算符。运算符（比如 + - * /）没有数据类型。但是，typeof 始终会返回字符串（包含运算数的类型）

typeof "Bill" // 返回 "string"

typeof 3.14 // 返回 "number"

typeof NaN // 返回 "number"

typeof false // 返回 "boolean"

typeof [1,2,3,4] // 返回 "object"

typeof {name:'Bill', age:62} // 返回 "object"

typeof new Date() // 返回 "object"

typeof function () {} // 返回 "function"

typeof myCar // 返回 "undefined" *

typeof null // 返回 "object"

//2、constructor 属性返回所有 JavaScript 变量的构造器函数

"Bill".constructor // 返回 "function String() { [native code] }"

(3.14).constructor // 返回 "function Number() { [native code] }"

false.constructor // 返回 "function Boolean() { [native code] }"

[1,2,3,4].constructor // 返回 "function Array() { [native code] }"

{name:'Bill', age:62}.constructor // 返回" function Object() { [native code] }"

new Date().constructor // 返回 "function Date() { [native code] }"

function(){}.constructor // 返回 "function Function(){ [native code] }"

//3、typeof查看不了具体类型，这时候可以用constructor判断具体类型

function isArray(myArray) {

return myArray.constructor.toString().indexOf("Array") > -1;

}

function isTArray(myArray) {

console.log(myArray.constructor);

return myArray.constructor === Array;

}

var array = ['d',12,true,'33'];

var is = isTArray(array);

console.log(is)

38、位运算

过

39、正则表达式（TODO）

40、异常

41、作用域

42、Hoisting

43、严格模式

44、this关键字

45、Let

46、Const

47、调试

48、

w3c h5 + css + js笔记

猜你喜欢