web前端学习笔记

一、HTML

标签:

由一对尖括号包裹的单词构成标签不区分大小写标签分为两部分: 开始标签和结束标签. 两个标签之间的部分我们叫做标签体. 自闭和标签.例如:

标签可以嵌套.但是不能交叉嵌套.

标签的属性:

以键值对形式出现的. 例如 name="alex" 只能出现在开始标签或自闭和标签中. 属性名字全部小写. *属性值必须使用双引号或单引号包裹例如 name="alex" 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

标签:W3C的解析渲染页面标准

head标签:

name属性主要用于描述网页 http-equiv，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，

注意：X-UA-Compatible

非meta标签

body标签:

基本标签

块级标签：

内联标签：_{^{
 
block（块）元素：
<div>
总是在新行上开始； 
</div>
<div>
宽度缺省是它的容器的100%，除非设定一个宽度； 
</div>
<div>
它可以容纳内联元素和其他块元素。
</div>
inline元素：
和其他元素都在一行上；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素
特殊字符
 < >；"；©®
<h6>图形标签：</h6>
src: 要显示图片的路径. 
alt: 图片没有加载成功时的提示. 
title: 鼠标悬浮时的提示信息. 
width: 图片的宽 
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
<h6>超链接标签<a>：</h6>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_0ba491d9-83b5-4e6d-a92a-a10d28d1c98a" alt="" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" width="0" height="0"><img class="code_img_opened" id="code_img_opened_0ba491d9-83b5-4e6d-a92a-a10d28d1c98a" alt="" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" width="0" height="0">
<div class="cnblogs_code_hide" id="cnblogs_code_open_0ba491d9-83b5-4e6d-a92a-a10d28d1c98a">
<pre></pre>
 
</div>
 超链接标签(锚标签)
</div>
<h6>列表标签:</h6>
<ul>: 无序列表 
 <ol>: 有序列表 <li>:列表中的每一项. 
<dl> 定义列表 <dt> 列表标题 <dd> 列表项
<h6>表格标签</h6>
<h6><table></h6>
<h6>五表格标签: <table></h6>
<div class="cnblogs_code">
<pre>border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素百分比.（最好通过css来设置长宽）

<tr>: table row

<th>: table head cell

<td>: table data cell

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

<th>: table header <tbody>(不常用): 为表格进行分区.</pre>
</div>
<h6>六表单标签<form></h6>
 表单用于向服务器传输数据。
 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
 表单还可以包含textarea、select、fieldset和 label 元素。
1.表单属性
　　HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
 action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
 method: 表单的提交方式 post/get 默认取值就是 get（信封）
 get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
 post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
 get/post是常见的两种请求方式.
2.表单元素
<input> 标签的属性和对应值
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_ed6d4061-87ed-49b3-97a5-d084326a7082" alt="" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" width="0" height="0">
<img class="code_img_opened" id="code_img_opened_ed6d4061-87ed-49b3-97a5-d084326a7082" alt="" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" width="0" height="0">
<div class="cnblogs_code_hide" id="cnblogs_code_open_ed6d4061-87ed-49b3-97a5-d084326a7082">
<pre>type: text 文本输入框

password 密码输入框

radio 单选框

checkbox 多选框

submit 提交按钮

button 按钮(需要配合js使用.) button和submit的区别？

file 提交文件：form表单需要加上属性enctype="multipart/form-data"

name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客
户端编程，而在css和javascript中使用的
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

?12345type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值

checked: radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.</pre>
</div>

</div>
 <select> 下拉选标签属性
 
<textarea> 文本域
<pre>name: 表单提交项的键. 
cols: 文本域默认有多少列 
rows: 文本域默认有多少行</pre>
 <label>
 
<code><label </code><code>for</code><code>=</code><code>"www"</code><code>>姓名<</code><code>/</code><code>label></code>
<code><</code><code>input</code> <code>id</code><code>=</code><code>"www"</code> <code>type</code><code>=</code><code>"text"</code><code>></code>
<fieldset>
 
<code><fieldset></code>
<code> </code><code><legend>登录<</code><code>/</code><code>legend></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code><code>></code>
<code><</code><code>/</code><code>fieldset></code>

<code> </code>
<code> </code>
<h1><code>二、CSS</code></h1>
<code>CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。</code>
 
引入方式:
1.行内式
<div class="cnblogs_code">
<pre><p style="background-color: rebeccapurple">hello yuan</p></pre>
</div>
2.嵌入式
<div class="cnblogs_code">
<pre><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head></pre>
</div>
3 链接式
<div class="cnblogs_code">
<pre><link href="mystyle.css" rel="stylesheet" type="text/css"/></pre>
</div>
4.导入式
<div class="cnblogs_code">
<pre><style type="text/css">

@import"mystyle.css"; 此处要注意.css文件的路径

</style></pre>
</div>
 
css的选择器:
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_8daebd9b-6b24-4134-8e7b-902b00f8308d" alt="" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" width="0" height="0">
<img class="code_img_opened" id="code_img_opened_8daebd9b-6b24-4134-8e7b-902b00f8308d" alt="" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" width="0" height="0">
<div class="cnblogs_code_hide" id="cnblogs_code_open_8daebd9b-6b24-4134-8e7b-902b00f8308d">
<pre>＊：通用元素选择器，匹配任何元素 * { margin:0; padding:0; }

E ：标签选择器，匹配所有使用E标签的元素 p { color:green; }

.info和E.info: class选择器，匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }

#info和E#info id选择器，匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; }</pre>
</div>
基础选择器
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_fd8456ae-5260-469b-8c1f-39c131963029" alt="" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" width="0" height="0">
<img class="code_img_opened" id="code_img_opened_fd8456ae-5260-469b-8c1f-39c131963029" alt="" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" width="0" height="0">
<div class="cnblogs_code_hide" id="cnblogs_code_open_fd8456ae-5260-469b-8c1f-39c131963029">
<pre>E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 div,p { color:#f00; }

E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 li a { font-weight:bold;
E > F 子元素选择器，匹配所有E元素的子元素F div > p { color:#f00; }

E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F div + p { color:#f00; }</pre>
</div>
组合选择器
</div>
嵌套规则：
<code></code>
<code></code>
<code>块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt li内可以包含div 块级元素与块级元素并列、内联元素与内联元素并列</code>
<code> </code>
<code></code>
<div class="cnblogs_code">
<code><img class="code_img_closed" id="code_img_closed_b7b131ff-eeb7-4c36-900e-46f346703263" alt="" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" width="0" height="0"><img class="code_img_opened" id="code_img_opened_b7b131ff-eeb7-4c36-900e-46f346703263" alt="" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" width="0" height="0"></code>
<div class="cnblogs_code_hide" id="cnblogs_code_open_b7b131ff-eeb7-4c36-900e-46f346703263">
<code></code>
<pre><code>E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }

E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}

E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}

E[attr=val] 匹配属性值中包含指定值的每个元素 div[class="test"]{background:#ffff00;}</code></pre>
<code> </code>
</div>
<code> 属性选择器</code>
</div>
<code></code>
<code> </code>
<code></code>
<h6><code>伪类(Pseudo-classes)</code></h6>
<code></code>
<code>CSS伪类是用来给选择器添加一些特殊效果。</code>
<code></code>
<code> </code>
<code></code>
<div class="cnblogs_code">
<code></code>
<pre><code>a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

伪类选择器 : 伪类指的是标签的不同状态:

a ==> 点过状态没有点过的状态鼠标悬浮状态激活状态

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

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

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

a:active {color: #0000FF} / 选定的链接 / 格式: 标签:伪类名称{ css代码; }</code></pre>
<code></code>
</div>
<code></code>

<div class="cnblogs_code">
<pre>:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容

p:before 在每个 <p> 元素的内容之前插入内容
p:before{content:"hello";color:red}
p:after 在每个 <p> 元素的内容之前插入内容
p:after{ content:"hello"；color:red}
</pre>
</div>
<h6> </h6>
<h6>css优先级和继承:</h6>
CSS优先级，是指CSS样式在浏览器中被解析的先后顺序。
<div class="cnblogs_code">
<pre>样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""-------------------1000；</pre>
<pre>2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p</pre>
<pre>－－－－－－－－－－－－－-1</pre>
</div>
 
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代.
有一些属性不能被继承，如：border, margin, padding, background等。
 
常用属性:
<div class="cnblogs_code">
<pre><div style="color:blueviolet">ppppp</div>

font-size: 20px/50%/larger

font-family:'Lucida Bright'

font-weight: lighter/bold/border/

<h1 style="font-style: oblique">sb</h1>

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')"></pre>
</div>
如果将背景属性加在body上，要给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片；
<h6>外边距和内边:</h6>

<a href="http://img.e-com-net.com/image/info8/f9d9432ff20d4c7da506d09e217014d4.jpg" target="_blank"><img width="650" height="392" alt="web前端学习笔记_第1张图片" src="http://img.e-com-net.com/image/info8/f9d9432ff20d4c7da506d09e217014d4.jpg" style="border:1px solid black;"></a>
 
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离； 
Border(边框) 围绕在内边距和内容外的边框。
Content(内容) 盒子的内容，显示文本和图像。
float属性:block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。
 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
只有绝对定位absolute和浮动float才会脱离文档流。float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)
<h6>浮动的表现</h6>
 定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）
注意 float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
<h6>清除浮动：</h6>
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
<div class="cnblogs_code">
<pre>clear语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。</pre>
</div>
 
 
position(定位):
<h6>1 static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。</h6>
<h6>2 position: relative／absolute</h6>
 relative 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
 
<h6> absolute 绝对定位。</h6>
 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
 对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
 
 总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。
<h6>position:fixed</h6>
 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
<h6>仅使用margin属性布局绝对定位元素:</h6>
margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
 
<h1>三、JavaScript</h1>
JavaScript 实现是由以下 3 个不同部分组成的：
 
核心（ECMAScript）
ECMAScript 标准描述了以下内容：
 语法、类型、语句、关键字、保留字、运算符、对象 (封装继承多态) 基于对象的语言.使用对象。
 文档对象模型（DOM） Document object model (整合js，css，html)浏览器对象模型（BOM） Broswer object model（整合js和浏览器）Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.
<div class="cnblogs_code">
<pre>Undefined 类型
Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
当函数无明确返回值时，返回的也是值 "undefined";
Null 类型
另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。
var person=new Person()
var person=null</pre>
</div>
<div class="cnblogs_code">
<pre>JavaScript属于松散类型的程序语言
变量在声明的时候并不需要指定数据类型
变量只有在赋值的时候才会确定数据类型
表达式中包含不同类型数据则在计算过程中会强制进行类别转换

数字 + 字符串：数字转换为字符串
数字 + 布尔值：true转换为1，false转换为0
字符串 + 布尔值：布尔值转换为字符串true或false</pre>
</div>
<div class="cnblogs_code">
<pre>逻辑 AND 运算符(&&)

逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。

如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：

如果某个运算数是 null，返回 null。
如果某个运算数是 NaN，返回 NaN。
如果某个运算数是 undefined，返回undefined。

逻辑 OR 运算符(||)

与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值</pre>
</div>
<div class="cnblogs_code">
<pre>异常处理

try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

注：主动抛出异常 throw Error('xxxx')</pre>
</div>
<div class="cnblogs_code">
<pre>11种内置对象

包括：

Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object

简介：

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是通过对象实现的
复制代码

<script language="javascript">
var aa=Number.MAX_VALUE;
//利用数字对象获取可表示最大数
var bb=new String("hello JavaScript");
//创建字符串对象
var cc=new Date();
//创建日期对象
var dd=new Array("星期一","星期二","星期三","星期四");
//数组对象
</script>

</pre>
</div>
 
<h6>作用域链(Scope Chain)：</h6>
 在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。
 
BOM对象：
BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
 
<pre>window对象
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.</pre>
<div class="cnblogs_code">
<pre>alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。</pre>
</div>
 
<h6>History 对象属性</h6>
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
<div class="cnblogs_code">
<pre>length 返回浏览器历史列表中的 URL 数量。
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面</pre>
</div>
 
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
<div class="cnblogs_code">
<pre>location.assign(URL)
location.reload()
location.replace(newURL)//注意与assign的区别</pre>
</div>
 
DOM对象(DHTML)
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：
W3C DOM 标准被分为 3 个不同的部分：核心 DOM - 针对任何结构化文档的标准模型XML DOM - 针对 XML 文档的标准模型HTML DOM - 针对 HTML 文档的标准模型 XML DOM？－－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
 
DOM 节点：
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：整个文档是一个文档节点(document对象)每个 HTML 元素是元素节点(element 对象)HTML 元素内的文本是文本节点(text对象)每个 HTML 属性是属性节点(attribute对象)注释是注释节点(comment对象)
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。在节点树中，顶端节点被称为根（root）每个节点都有父节点、除了根（它没有父节点）一个节点可拥有任意数量的子同胞是拥有相同父节点的节点
访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：
页面查找：通过使用 getElementById() 方法通过使用 getElementsByTagName() 方法通过使用 getElementsByClassName() 方法通过使用 getElementsByName() 方法
<div class="cnblogs_code">
<pre><script>

var div1=document.getElementById("div1");

////支持;
// var ele= div1.getElementsByTagName("p");
// alert(ele.length);
////支持
// var ele2=div1.getElementsByClassName("div2");
// alert(ele2.length);
////不支持
// var ele3=div1.getElementById("div3");
// alert(ele3.length);
////不支持
// var ele4=div1.getElementsByName("yuan");
// alert(ele4.length)

</script></pre>
</div>
 
HTML DOM Event(事件)：
HTML 4.0 有能力使 HTML 事件触发浏览器中的动作（action）
<div class="cnblogs_code">
<pre>onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。

onfocus 元素获得焦点。 //练习：输入框
onblur 元素失去焦点。应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown 某个键盘按键被按下。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开

onselect 文本被选中。
onsubmit 确认按钮被点击。</pre>
</div>
 
<div class="cnblogs_code">
<pre><script>
function change() {
var img=document.createElement("img");//<img src="">
// img.setAttribute("src","123.png");
img.src="123.png";

var ele=document.getElementsByTagName("p")[0];
var father=document.getElementsByClassName("div3")[0];
father.replaceChild(img,ele);
}
function add() {
var ele=document.createElement("p");//<p>
ele.innerHTML="hello p";

ele.style.color="red";
ele.style.fontSize="10px";

var father=document.getElementsByClassName("div1")[0];
father.appendChild(ele); //父节点来调用
}
function del() {
var father=document.getElementsByClassName("div1")[0];
var sons=father.getElementsByTagName("p")[0];
father.removeChild(sons) ; //父节点来调用
}
</script></pre>
</div>
<div class="cnblogs_code">
<pre>改变 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML ，innerText。

改变 CSS 样式

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";<br> .style.fontSize=48px

改变 HTML 属性

elementNode.setAttribute(name,value)

elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

创建新的 HTML 元素

createElement(name)

删除已有的 HTML 元素

elementNode.removeChild(node)

关于class的操作

elementNode.className

elementNode.classList.add

elementNode.classList.remove</pre>
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_7fcb046b-1774-47d8-b24b-9fce87259374" alt="" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" width="0" height="0">
<img class="code_img_opened" id="code_img_opened_7fcb046b-1774-47d8-b24b-9fce87259374" alt="" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" width="0" height="0">
<div class="cnblogs_code_hide" id="cnblogs_code_open_7fcb046b-1774-47d8-b24b-9fce87259374">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<input type="text" id="search" value="请输入用户名" onfocus="f1()" onblur="f2()">

<script>
var ele=document.getElementById("search");
function f1() {
if(ele.value="请输入用户名"){
ele.value="";
}
}
function f2() {
if(!ele.value.trim())
ele.value="请输入用户名"
}
</script>
</body>
</html></pre>
</div>
搜索框
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_4a5d2d69-159e-414f-8e32-9b6e5c6fad05" alt="" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" width="0" height="0">
<img class="code_img_opened" id="code_img_opened_4a5d2d69-159e-414f-8e32-9b6e5c6fad05" alt="" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" width="0" height="0">
<div class="cnblogs_code_hide" id="cnblogs_code_open_4a5d2d69-159e-414f-8e32-9b6e5c6fad05">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
height: 1800px;
background-color: white;
}
.shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.3 ;
}
.model{
width: 200px;
height: 200px;
background-color: bisque;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.hide{
display: none;
}
</style>
</head>
<body>

<div class="content">
<button onclick="show()">show</button>
</div>
<div class="shade hide"></div>

<div class="model hide">
<button>show</button>
</div>

<script>
function show() {
var ele_shade=document.getElementsByClassName("shade")[0];
var ele_model=document.getElementsByClassName("model")[0];

ele_shade.classList.remove("hide")
ele_model.classList.remove("hide")
}
</script>
</body>
</html></pre>
</div>
对话框
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_7c8326d9-5c39-4321-90a5-a4ab5cbf5e01" alt="" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" width="0" height="0">
<img class="code_img_opened" id="code_img_opened_7c8326d9-5c39-4321-90a5-a4ab5cbf5e01" alt="" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" width="0" height="0">
<div class="cnblogs_code_hide" id="cnblogs_code_open_7c8326d9-5c39-4321-90a5-a4ab5cbf5e01">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="selectAll()">全选</button>
<button onclick="Cancel()">取消</button>
<button onclick="reverse()">反选</button>
<table border="1px">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr><tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
<script>
function selectAll() {
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++ ){
var input=inputs[i];
input.checked=true;
}
}
function Cancel(){
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++ ){
var input=inputs[i];
input.checked=false;
}
}
function reverse() {
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++ ){
var input=inputs[i];
input.checked=!input.checked;//取反

// if (input.checked){
// input.checked=false;
// }else {
// input.checked=true;
// }
}
}
</script>
</body>
</html></pre>
</div>
正反选
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_5d0b57ae-0115-4c98-9766-c4a06f4f5a67" alt="" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" width="0" height="0">
<img class="code_img_opened" id="code_img_opened_5d0b57ae-0115-4c98-9766-c4a06f4f5a67" alt="" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" width="0" height="0">
<div class="cnblogs_code_hide" id="cnblogs_code_open_5d0b57ae-0115-4c98-9766-c4a06f4f5a67">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="provinces">
<option value="">请选择省份</option>



</select>
<select id="citys">
<option value="">请选择城市</option>
</select>
<script>
data={"河北省":["石家庄","廊坊"],"河南省":["石家庄","廊坊"],"河西省":["石家庄","廊坊"]};
var pro_ele=document.getElementById("provinces");
var city_ele=document.getElementById("citys");

//动态添加省份
for (var i in data){
var ele=document.createElement("option");
ele.innerHTML=i;
pro_ele.appendChild(ele)
}
pro_ele.οnchange=function () {
console.log(this.selectedIndex);//options的索引
console.log(this.options[this.selectedIndex]);//options标签

var citys=data[this.options[this.selectedIndex].innerHTML];

city_ele.options.length=1;
for(var i=0; i<citys.length;i++){
var ele=document.createElement("option");
ele.innerHTML=citys[i];
city_ele.appendChild(ele)
}

}
</script>
</body>
</html></pre>
</div>
二级联动
</div>
 
<h1>四、Jquery</h1>
jQuery由美国人John Resig创建
一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择
 
 
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
<div class="cnblogs_code">
<pre>$("#test").html()
//意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

// 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;

//虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

//约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML</pre>
</div>
jquery的基础语法：$(selector).action()
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_e63ad5d5-8a5b-45e6-9680-26718f76dc05" alt="" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" width="0" height="0">
<img class="code_img_opened" id="code_img_opened_e63ad5d5-8a5b-45e6-9680-26718f76dc05" alt="" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" width="0" height="0">
<div class="cnblogs_code_hide" id="cnblogs_code_open_e63ad5d5-8a5b-45e6-9680-26718f76dc05">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title>

<style>
.menu{
height: 500px;
width: 30%;
background-color: gainsboro;
float: left;
}
.content{
height: 500px;
width: 70%;
background-color: rebeccapurple;
float: left;
}
.title{
line-height: 50px;
background-color: #425a66;
color: forestgreen;}

.hide{
display: none;
}

</style>
</head>
<body>

<div class="outer">
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>

</div>
<div class="content"></div>

</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(".item .title").click(function () {
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");

// $(this).next().removeClass("hide");
// $(this).parent().siblings().children(".con").addClass("hide");
})
</script>

</body>
</html></pre>
</div>
左侧菜单
</div>
 
<div class="cnblogs_code">
<pre><input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

<script>

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。

// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// false

// ---------手动选中的时候attr()获得到没有意义的undefined-----------
// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// true

console.log($("#chk1").prop("checked"));//false
console.log($("#chk2").prop("checked"));//true
console.log($("#chk1").attr("checked"));//undefined
console.log($("#chk2").attr("checked"));//checked
</script>

attr和prop</pre>
</div>
 
<div class="cnblogs_code">
<pre>//创建一个标签对象
$("<p>")

//内部插入

$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");

//外部插入

$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");

//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

$("").empty()
$("").remove([expr])

//复制

$("").clone([Even[,deepEven]])</pre>
</div>
<div class="cnblogs_code">
<pre>CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])</pre>
</div>
<div class="cnblogs_code">
<pre>页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})

事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。

// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
// $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
// click事件；

[selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件；如：

//$('ul li').on('click', function(){console.log('click');})的绑定方式和
//$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
//li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的

//但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
//li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件

[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)</pre>
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_0ca98a11-91d3-4cb1-9af0-811603b08e44" alt="" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" width="0" height="0">
<img class="code_img_opened" id="code_img_opened_0ca98a11-91d3-4cb1-9af0-811603b08e44" alt="" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" width="0" height="0">
<div class="cnblogs_code_hide" id="cnblogs_code_open_0ca98a11-91d3-4cb1-9af0-811603b08e44">
<pre><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;color: white;">
标题
</div>
<div style="height: 300px;">
内容
</div>
</div>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script>
$(function(){
// 页面加载完成之后自动执行
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
// 原始鼠标横纵坐标位置
var ord_x = _event.clientX;
var ord_y = _event.clientY;

var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;

$(this).bind('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;

var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);

$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');

})
}).mouseup(function(){
$(this).unbind('mousemove');
});
})
</script>
</body>
</html></pre>
</div>
面板拖动
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_5ef79df7-d3e8-45e3-a6bf-442bc6fb19f4" alt="" src="http://img.e-com-net.com/image/info8/b8d97b5613f94ed2ba791cad57d0b2ed.gif" width="0" height="0">
<img class="code_img_opened" id="code_img_opened_5ef79df7-d3e8-45e3-a6bf-442bc6fb19f4" alt="" src="http://img.e-com-net.com/image/info8/2f88dd3f1cd145f59c0e47b51acdbd4b.gif" width="0" height="0">
<div class="cnblogs_code_hide" id="cnblogs_code_open_5ef79df7-d3e8-45e3-a6bf-442bc6fb19f4">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<SCRIPT src="jquery-3.4.1.js"></SCRIPT>
</head>
<body>
<div>hello</div>

<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>
<button onclick="f3()">切换</button>

<script>
function f1() {
$("div").show(1000)
}
function f2() {
$("div").hide(1000)
}
function f3() {
$("div").toggle(1000)
}

</script>
</body>
</html></pre>
</div>
动画效果
</div>
 
 
<div class="cnblogs_code">
<pre><script>

$.extend(object) //为JQuery 添加一个静态方法。
$.fn.extend(object) //为JQuery实例添加一个方法。

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
console.log($.min(3,4));

//-----------------------------------------------------------------------

$.fn.extend({
"print":function(){
for (var i=0;i<this.length;i++){
console.log($(this)[i].innerHTML)
}

}
});

$("p").print();
</script></pre>
</div>
 
定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方，要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。
 
 
 







</div>
转载于:https://www.cnblogs.com/bind/p/11566718.html
</div>
</div>
</div>
</div>
</div>

<div id="SOHUCS" sid="1288294034439217152"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js"></script>

<div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
</div>
<div class="col-md-3">
<div class="row" id="ad">

<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_1"> </div>
</div>

<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_2"></div>
</div>

<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(web前端学习笔记)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1755621366918299648.htm"
title="Web前端学习笔记" target="_blank">Web前端学习笔记</a>
jusw123456
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>文章目录HTML+CSS系列学习笔记①之拨云见日1、什么是HTML、CSS？2、VSCode编译器（宇宙第一编译器）3、五大浏览器4、深入了解网站开发5、web前端的三大核心技术6、HTML基本结构和属性7、HTML初始代码8、HTML注释9、标题与段落10、文本修饰标签11、引入文件的地址路径12、图片标签13、跳转链接14、跳转锚点15、特殊符号16、列表标签17、表格标签18、表格属性19、</div>
</li>
<li><a href="/article/1730023698154467328.htm"
title="web前端学习笔记之Node.js" target="_blank">web前端学习笔记之Node.js</a>
偷到月亮了吗.
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">学习笔记</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>文章目录01浏览器中的JavaScript运行环境02什么是Node.js03安装Node.js04使用Node运行JS代码05fs模块文件操作05.1什么是fs模块05.2读取指定文件内容fs.readFile()05.3写入文件内容fs.writeFile()05.4fs-整理成绩案例05.5fs-路径动态拼接问题05.6fs-使用注意事项06path模块路径操作06.1path模块是什么06</div>
</li>
<li><a href="/article/1729450369001533440.htm"
title="Web前端学习笔记（1）" target="_blank">Web前端学习笔记（1）</a>
周日happy
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>文章目录一、第一部分1.1内容一Web前端导入二、第二部分2.1内容一HTML和CSS的定义三、第三部分3.1内容一宇宙第一编译器VsCode3.2内容二快捷键的使用四、第四部分4.1内容一Chrome浏览器4.2内容一五大浏览器五大浏览器的介绍五、第五部分5.1内容一深入了解网站开发5.2内容二JV与HTML与CSS的关系第六部分6.1内容一web的三大核心技术6.2内容二结构,样式,行为七、第</div>
</li>
<li><a href="/article/1727698718527926272.htm"
title="Web前端学习笔记13：JavaScript_作用域_预解析_对象_内置对象_数据类型" target="_blank">Web前端学习笔记13：JavaScript_作用域_预解析_对象_内置对象_数据类型</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>文章目录JavaScript基础第05天笔记1-作用域1.1作用域概述1.2全局作用域1.3局部作用域1.4jS没有块级作用域4-预解析5-对象5.1对象的相关概念5.2创建对象的三种方式利用字面量创建对象利用newObject创建对象利用构造函数创建对象5.3遍历对象JavaScript基础第06天笔记1-内置对象1.1内置对象1.2查文档1.3Math对象1.4日期对象1.5数组对象创建数组的</div>
</li>
<li><a href="/article/1727599197663866880.htm"
title="Web前端学习笔记" target="_blank">Web前端学习笔记</a>
DAOkonglong
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>Web前端学习笔记目录Web前端学习笔记前言一、拨开云雾见天日，守得云开见月明1.1.1什么是HTML和CSS1.1.2VSCode编辑器1.1.3深入了解网站开发（部分）1.1.4Web前端三大核心技术1.1.5HTML基本结构和属性1.1.6HTML的初始代码1.1.7HTML中的注释1.1.8HTML语义化1.1.9HTML标签的使用标题标签段落标签文本修饰标签图片标签和图片属性跳转链接跳转</div>
</li>
<li><a href="/article/1726118648759791616.htm"
title="Web前端学习笔记" target="_blank">Web前端学习笔记</a>
.徐十三.
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/1.htm">Web前端基础</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
<div>HTML学习day01一、了解软件架1.C/S2.B/S3.B/S软件的优缺点二、HTMLHTML标签相关1.HTML标签2.HTML标签大小写问题3.HTML标签属性4.HTML颜色值的设置5.HTML注释6.HTML代码格式7.HTML实体字符HTML主体结构三、head标签中常用的标签一、了解软件架1.C/S1）C客户端（client）/S服务器（server）2）特点：a:C/S软件通常需</div>
</li>
<li><a href="/article/1721218555329982464.htm"
title="Web前端学习笔记——VueJS-APP案例" target="_blank">Web前端学习笔记——VueJS-APP案例</a>
唯恋殊雨
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/WEB%E5%89%8D%E7%AB%AF/1.htm">WEB前端</a>
<div>源代码下载将项目源码托管到oschina中点击头像->修改资料->SSH公钥如何生成SSH公钥创建自己的空仓储，使用gitconfig--globaluser.name"用户名"和gitconfig--globaluser.email@.com来全局配置提交时用户的名称和邮箱使用gitinit在本地初始化项目使用touchREADME.md和touch.gitignore来创建项目的说明</div>
</li>
<li><a href="/article/1707779528044130304.htm"
title="Web前端学习笔记——Canvas 02" target="_blank">Web前端学习笔记——Canvas 02</a>
唯恋殊雨
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/canvas/1.htm">canvas</a>
<div>三、canvas进阶3.1Canvas颜色样式和阴影3.1.1设置填充和描边的颜色（掌握）fillStyle:设置或返回用于填充绘画的颜色strokeStyle:设置或返回用于笔触的颜色以上两个值都可以接受颜色名,16进制数据，rgb值，甚至rgba.一般先进行设置样式然后进行绘制。例如：ctx.strokeStyle="red";ctx.strokeStyle="#ccc";ctx.stroke</div>
</li>
<li><a href="/article/1705387560714448896.htm"
title="Web前端学习笔记09：移动web开发流式布局_flex布局" target="_blank">Web前端学习笔记09：移动web开发流式布局_flex布局</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a>
<div>文章目录移动web开发流式布局1.0移动端基础1.1浏览器现状1.2手机屏幕的现状1.3移动端调试方法2.0视口2.1布局视口layoutviewport2.3理想视口idealviewport2.4meta标签3.0二倍图3.2背景缩放background-size4.0移动开发选择和技术解决方案4.2移动端技术解决方案4.3移动端大量使用CSS3盒子模型box-sizin4.4移动端特殊样式5</div>
</li>
<li><a href="/article/1698053315415322624.htm"
title="Web前端学习笔记14： Web APIs_DOM_元素_事件_排他操作_自定义属性_节点操作" target="_blank">Web前端学习笔记14： Web APIs_DOM_元素_事件_排他操作_自定义属性_节点操作</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>文章目录day01-WebAPIs1.1.WebAPI介绍1.1.1API的概念1.1.2WebAPI的概念1.1.3API和WebAPI总结1.2.DOM介绍1.2.1什么是DOM1.2.2.DOM树1.3.获取元素1.3.1.根据ID获取1.3.2.根据标签名获取元素1.3.3.H5新增获取元素方式1.3.4获取特殊元素（body，html）1.4.事件基础1.4.1.事件概述1.4.2.事件</div>
</li>
<li><a href="/article/1684793846820581376.htm"
title="Web前端学习笔记6（align-items，align-content，flex-flow，flex，align-self，order）" target="_blank">Web前端学习笔记6（align-items，align-content，flex-flow，flex，align-self，order）</a>
rootting
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>align-items让子盒子沿侧轴来对齐侧轴居中对齐：align-items:center;拉伸，子盒子不要给高度：align-items:stretch;div{display:flex;width:800px;height:400px;background-color:pink;flex-direction:column;/默认主轴为x轴/justify-content:center;/</div>
</li>
<li><a href="/article/1669463824899596288.htm"
title="Web前端学习笔记06：CSS_浮动_清除浮动_Photoshop 切图_定位" target="_blank">Web前端学习笔记06：CSS_浮动_清除浮动_Photoshop 切图_定位</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a>
<div>文章目录1.浮动(float)目标1.1CSS布局的三种机制1.2为什么需要浮动？1.3什么是浮动(float)作用语法1).浮动口诀之浮2).浮动口诀之漏3).浮动口诀之特1.4浮动(float)小结1.5浮动(float)的应用（重要）浮动和标准流的父盒子搭配浮动应用案例导航栏案例1.6浮动(float)的扩展1).浮动元素与父盒子的关系2).浮动元素与兄弟盒子的关系2.清除浮动2.1为什么要</div>
</li>
<li><a href="/article/1669463825461633024.htm"
title="Web前端学习笔记07：CSS_高级技巧_定位" target="_blank">Web前端学习笔记07：CSS_高级技巧_定位</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>文章目录CSS高级技巧1.元素的显示与隐藏1.1display显示（重点）1.2visibility可见性(了解)1.3overflow溢出(重点)1.4显示与隐藏总结2.CSS用户界面样式2.1鼠标样式cursor2.2轮廓线outline2.3防止拖拽文本域resize2.4用户界面样式总结3.vertical-align垂直对齐3.1图片、表单和文字对齐3.2去除图片底侧空白缝隙4.溢出的文</div>
</li>
<li><a href="/article/1645905195399471104.htm"
title="Web前端学习笔记02：HTML常用标签_标签属性_路径_表格" target="_blank">Web前端学习笔记02：HTML常用标签_标签属性_路径_表格</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>文章目录1.HTML常用标签1.1排版标签1）标题标签h(熟记)2）段落标签p(熟记)3）水平线标签hr(认识)4）换行标签br(熟记)5）div和span标签(重点)排版标签总结1.2文本格式化标签(熟记)1.3标签属性1.4图像标签img(重点)1.5链接标签(重点)1.6注释标签团队约定2.路径(重点、难点)相对路径绝对路径3.今日总结4.综合案例：圣诞5.@拓展阅读5.1锚点定位（难点）5</div>
</li>
<li><a href="/article/1644514418194702336.htm"
title="Ajax笔记" target="_blank">Ajax笔记</a>
肥宅洛夫特斯基
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">web前端学习笔记</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a>
<div>title:Ajaxcategories:web前端学习笔记date:2022-03-0115:27:51tags:什么是AJAX？AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用AJAX）如果需要更新内容，必</div>
</li>
<li><a href="/article/1642848242590867456.htm"
title="web前端学习笔记——列表" target="_blank">web前端学习笔记——列表</a>
eliauk-123
<a class="tag" taget="_blank" href="/search/html%2Bcss/1.htm">html+css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%88%97%E8%A1%A8/1.htm">列表</a>
<div>对于一些内容相似、结构相似、样式相似的内容使用列表结构进行搭建一、无序列表标签：ulli（嵌套关系，ul>li）ul：unorderedlist,表示一个无序列表的大结构li：listitem，列表项，定义无序列表内的某一项列表项1列表项2列表项3列表项4效果：注：一个列表中可以有任意个列表项ul内部只能嵌套li，并且li标签不能脱离ul单独书写li标签是一个容器级标签，可以放置任何内容li标签之</div>
</li>
<li><a href="/article/1642847220623532032.htm"
title="Web前端学习笔记——HTML" target="_blank">Web前端学习笔记——HTML</a>
宇宙☆空间站
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>web前端开发基础第一章——HTML传送门：第二章：CSS|第三章：html5和CSS3|第四章：Javascript（part1）|第四章：Javascript（part2）目录web前端开发基础第一章——HTML概述一、html标题标签二、html段落标签、换行标签与字符实体1.html段落标签2.html换行标签3.html字符实体三、html块标签、含样式的标签1.html块标签2.含样式</div>
</li>
<li><a href="/article/1640750344369659904.htm"
title="【Web前端学习笔记】第三章 JavaScript常见使用方法" target="_blank">【Web前端学习笔记】第三章 JavaScript常见使用方法</a>
阿达斯加
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">学习笔记</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>【Web前端学习笔记】第三章JavaScript常见使用方法文章目录【Web前端学习笔记】第三章JavaScript常见使用方法前言一、JavaScript是什么？二、JavaScript特点三、JavaScript常见使用方法变量数据类型运算符各种语句方法/函数DOM文档对象模型NaNJavaScript对象分类BOM浏览器对象模型DOM文档对象模型三、前端MVC设计模式四、Vue总结前言本文记</div>
</li>
<li><a href="/article/1626809347923300352.htm"
title="Web前端学习笔记，学习路线图，完整前端自学教程+工具+框架" target="_blank">Web前端学习笔记，学习路线图，完整前端自学教程+工具+框架</a>
web前端01

<div>问题釐清什麽是＂滚动条＂？滚动条指的是下图右侧被红线框起来的部分：在这里我还是要推荐下我自己建的web前端开发学习群：731669587，群里都是学web前端开发的，如果你正在学习前端，小编欢迎你加入，今天分享的这个案例已经上传到群文件，大家都是软件开发党，不定期分享干货（只有前端软件开发相关的），包括我自己整理的一份2018最新的前端进阶资料和高级开发教程，欢迎进阶中和进想深入前端的小伙伴。只要</div>
</li>
<li><a href="/article/1594199081457131520.htm"
title="Web前端学习笔记" target="_blank">Web前端学习笔记</a>
rrrrrhhh
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>[声明]学习于【千锋教育_Web前端最全教程从入门到精通（HTML+CSS全套）-哔哩哔哩】1,了解HTML,CSS1.1什么是HTtMLHTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。[1</div>
</li>
<li><a href="/article/1543741475790065664.htm"
title="Web前端学习笔记15：Web前端开发：jQuery总结" target="_blank">Web前端学习笔记15：Web前端开发：jQuery总结</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>文章目录day01-jQuery1.1.jQuery介绍1.1.1JavaScript库1.1.2jQuery的概念1.1.3jQuery的优点1.2.jQuery的基本使用1.2.1jQuery的下载1.2.2.体验jQuery1.2.3.jQuery的入口函数1.2.4.jQuery中的顶级对象$1.2.5.jQuery对象和DOM对象1.2.6.jQuery对象和DOM对象转换1.3.jQu</div>
</li>
<li><a href="/article/1533244436778086400.htm"
title="Web前端学习笔记" target="_blank">Web前端学习笔记</a>
努力提升的小宇同学
<a class="tag" taget="_blank" href="/search/%E5%B0%8F%E5%AE%87%E7%9A%84%E7%AC%94%E8%AE%B0/1.htm">小宇的笔记</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>Web前端学习笔记2020-9-3整理2019-9月-19学完作者:小宇HTML基础知识互联网中的三大基石Html(HyperTextMarkupLanguage)超文件标记语言Http(HyperTextTransferProtocol)超文本传输协议Url(UniformResourceLocator)统一资源定位符HTML、CSS、JS之间的关系如果说HTML是肉身、CSS就是皮相、Java</div>
</li>
<li><a href="/article/1533036655148036096.htm"
title="Web前端学习笔记11：JavaScript_注释_输入输出_变量_数据类型_关键字_保留字_运算符_流程控制" target="_blank">Web前端学习笔记11：JavaScript_注释_输入输出_变量_数据类型_关键字_保留字_运算符_流程控制</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>文章目录JavaScript基础第01天1-编程语言1.1编程1.2计算机语言1.3编程语言1.4翻译器1.5编程语言和标记语言区别总结2-计算机基础2.1计算机组成2.2数据存储2.3数据存储单位2.4程序运行3-初始JavaScript3.1JavaScript是什么3.2JavaScript的作用3.3HTML/CSS/JS的关系3.4浏览器执行JS简介3.5JS的组成**ECMAScrip</div>
</li>
<li><a href="/article/1451202150871941120.htm"
title="Web前端学习笔记20：Vue_路由_Vue Router_模块化的分类_babel_webpack_Element-UI" target="_blank">Web前端学习笔记20：Vue_路由_Vue Router_模块化的分类_babel_webpack_Element-UI</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>文章目录第一阶段学习1.路由的概念2.前端路由的初体验3.VueRouter简介4.VueRouter的使用步骤(★★★)5.嵌套路由，动态路由的实现方式A.嵌套路由的概念(★★★)B.动态路由匹配(★★★)7.命名路由以及编程式导航A.命名路由：给路由取别名B.编程式导航(★★★)8.实现后台管理案例(★★★)第二阶段学习1.模块化的分类A.浏览器端的模块化B.服务器端的模块化C.ES6模块化2</div>
</li>
<li><a href="/article/1385392096483037184.htm"
title="Web前端学习笔记：HTML5四部曲之二——HTML5块级标签、行级标签、结构标签" target="_blank">Web前端学习笔记：HTML5四部曲之二——HTML5块级标签、行级标签、结构标签</a>
余欲与鱼语渔

<div>1.块级标签与行级标签块级标签行级标签自动换行，前后隔一行不会自动换行，从左往右依次显示宽度默认是100%宽度由文字内容撑开可以设置宽度、高度、边距等属性不能设置上述属性标题、段落、列表、分区…图片、超链接2.块级标签块级标签，此类标签在网页中显示为块，一般独占一行。新的块级标签将从新的一行开始排列，它可以容纳内联元素和其他块级元素。2.1标题标签：＜h1＞＜/h1＞…＜h6＞＜/h6＞一级标题二</div>
</li>
<li><a href="/article/1356936467116535808.htm"
title="Web前端学习笔记——关于React" target="_blank">Web前端学习笔记——关于React</a>
是纽扣也是烤奶

<div>React：是一个声明式，高效且灵活的用于构建用户界面的JavaScript库。作用：可以将一些简短、独立的代码片段组合成复杂的UI界面即“组件”。特点：数据驱动视图原则创建react项目：在命令行下使用以下命令：create-react-app项目文件夹名称进入项目文件夹：cd项目文件夹名称开启服务：npmstart注意：遇到“Pleaseremoveanyglobalinstallswitho</div>
</li>
<li><a href="/article/1455405875568095232.htm"
title="web前端学习笔记——html5和CSS3" target="_blank">web前端学习笔记——html5和CSS3</a>
ujung_S2
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>web前端开发基础第三章——html5和CSS3传送门：第一章：HTML|第二章：CSS|第四章：Javascript（part1）|第四章：Javascript（part2）目录web前端开发基础第三章——html5和CSS3一、HTML5新增标签新增语义标签音频视频二.HTML5新增表单控件三、CSS权重四、CSS3新增选择器五、CSS3圆角、rgbaCSS3圆角rgba（新的颜色值表示法）六</div>
</li>
<li><a href="/article/1356577801397940224.htm"
title="Web前端学习笔记——CSS" target="_blank">Web前端学习笔记——CSS</a>
ujung_S2
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>web前端开发基础第二章——CSS传送门：第一章：HTML|第三章：html5和CSS3|第四章：Javascript（part1）|第四章：Javascript（part2）目录web前端开发基础第二章——CSS概述一、css基本语法及页面引用1.css基本语法2.css页面引入方法：二、css文本设置三、css颜色表示法四、css选择器1.标签选择器2.id选择器3.类选择器（应用最多）4.层</div>
</li>
<li><a href="/article/1356936339186069504.htm"
title="Web前端学习笔记——CSS部分" target="_blank">Web前端学习笔记——CSS部分</a>
是纽扣也是烤奶

<div>关于CSSCSS：用于描述页面展示的语言。CSS规则=选择器+声明块例如：选择器：选中元素，确定样式范围。选择器类型：基础选择器：复杂选择器：选择器权重值：声明冲突：同一样式（同一属性不同值）多次应用到同一元素。层叠：解决声明冲突的过程，即浏览器自动处理（权重计算）。比较重要性（由高到低）：作者样式表中的！important样式>作者样式表的普通样式>浏览器默认样式表中的样式（作者样式表：开发者书</div>
</li>
<li><a href="/article/1356936338758250496.htm"
title="Web前端学习笔记——HTML部分" target="_blank">Web前端学习笔记——HTML部分</a>
是纽扣也是烤奶

<div>关于HTMLHTML（HyperTextMarkupLanguage）：超文本标记语言。HTML的作用：由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，用于定义页面结构。元素=起始标签+元素内容+结束标签+[标签属性]标签属性=属性名称+属性值；属性分类：全局属性：所有标签通用。局部属性：某些标签所特有的。对于布尔属性，只有两种状态即不写或者取值只能为其属性名。（在HT</div>
</li>
<li><a href="/article/50.htm"
title="java封装继承多态等" target="_blank">java封装继承多态等</a>
麦田的设计者
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/encapsulatopn/1.htm">encapsulatopn</a>
<div> 最近一段时间看了很多的视频却忘记总结了，现在只能想到什么写什么了，希望能起到一个回忆巩固的作用。
 1、final关键字
 译为：最终的
 &</div>
</li>
<li><a href="/article/177.htm"
title="F5与集群的区别" target="_blank">F5与集群的区别</a>
bijian1013
<a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%BE%A4/1.htm">集群</a><a class="tag" taget="_blank" href="/search/F5/1.htm">F5</a>
<div> http请求配置不是通过集群，而是F5；集群是weblogic容器的，如果是ejb接口是通过集群。
 F5同集群的差别，主要还是会话复制的问题，F5一把是分发http请求用的，因为http都是无状态的服务，无需关注会话问题，类似</div>
</li>
<li><a href="/article/304.htm"
title="LeetCode[Math] - #7 Reverse Integer" target="_blank">LeetCode[Math] - #7 Reverse Integer</a>
Cwind
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a>
<div>原题链接：#7 Reverse Integer

要求：
按位反转输入的数字
例1：输入 x = 123, 返回 321
例2：输入 x = -123, 返回 -321

难度：简单

分析：
对于一般情况，首先保存输入数字的符号，然后每次取输入的末位（x%10）作为输出的高位（result = result*10 + x%10）即可。但</div>
</li>
<li><a href="/article/431.htm"
title="BufferedOutputStream" target="_blank">BufferedOutputStream</a>
周凡杨

<div> 首先说一下这个大批量，是指有上千万的数据量。
 例子：
 有一张短信历史表，其数据有上千万条数据，要进行数据备份到文本文件，就是执行如下SQL然后将结果集写入到文件中！
 select t.msisd</div>
</li>
<li><a href="/article/558.htm"
title="linux下模拟按键输入和鼠标" target="_blank">linux下模拟按键输入和鼠标</a>
被触发
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>查看/dev/input/eventX是什么类型的事件， cat /proc/bus/input/devices
设备有着自己特殊的按键键码，我需要将一些标准的按键，比如0－9，X－Z等模拟成标准按键，比如KEY_0,KEY-Z等，所以需要用到按键模拟，具体方法就是操作/dev/input/event1文件，向它写入个input_event结构体就可以模拟按键的输入了。

linux/in</div>
</li>
<li><a href="/article/685.htm"
title="ContentProvider初体验" target="_blank">ContentProvider初体验</a>
肆无忌惮_
<a class="tag" taget="_blank" href="/search/ContentProvider/1.htm">ContentProvider</a>
<div>ContentProvider在安卓开发中非常重要。与Activity，Service，BroadcastReceiver并称安卓组件四大天王。
在android中的作用是用来对外共享数据。因为安卓程序的数据库文件存放在data/data/packagename里面，这里面的文件默认都是私有的，别的程序无法访问。
如果QQ游戏想访问手机QQ的帐号信息一键登录，那么就需要使用内容提供者COnte</div>
</li>
<li><a href="/article/812.htm"
title="关于Spring MVC项目（maven）中通过fileupload上传文件" target="_blank">关于Spring MVC项目（maven）中通过fileupload上传文件</a>
843977358
<a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a><a class="tag" taget="_blank" href="/search/%E4%BF%AE%E6%94%B9%E5%A4%B4%E5%83%8F/1.htm">修改头像</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6/1.htm">上传文件</a><a class="tag" taget="_blank" href="/search/upload/1.htm">upload</a>
<div>Spring MVC 中通过fileupload上传文件，其中项目使用maven管理。

1.上传文件首先需要的是导入相关支持jar包：commons-fileupload.jar,commons-io.jar
因为我是用的maven管理项目，所以要在pom文件中配置（每个人的jar包位置根据实际情况定）

</div>
</div>
</footer>

<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>

</body>

</html>}}