web前端学习笔记
一、html
htyper text markup language 即超文本标记语言 超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 标记语言: 标记（标签）构成的语言. 网页==html文档，由浏览器解析，用来展示的 静态网页：静态的资源，如xxx.html
动态网页：html代码是由某种开发语言根据用户请求动态生成的
标签:
标签的属性:
<!doctype html>标签:w3c的解析渲染页面标准
head标签:
<meta>
每个主要版本ie新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为ie的特色，其中
一个风险就是旧版本网站无法正确的显示。
为了将这个风险降到最低，ie6允许网页开发人员选择ie编译和显示他们网页的方式。"quirks mode"为预设，这会
使页面以旧版本浏览器的视点显示，"standards mode"(也称为"strict mode")特点是支持业界标准最为完善。
然而要利用这个增强的支持功能，网页必须包含恰当的<!doctype>指令。
若一个网页没有包含<!doctype>指令，ie6会将它以quirks mode显示。若网页包含有效的<!doctype>指令但浏
览器无法辨识，ie6会将它以ie6 standards mode显示。因为少数网站已经包含<!doctype>指令，兼容性模式的
切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。
随著时间经过，更多网站开始使用standards mode。它们也开始使用ie6的特性和功能来检测ie。举例来说，ie6
不支持universal selector(即css之全局选择器 * {})，一些网站便使用它来针对ie做特定的对应。
当 ie7增加了对全域选择器的支持，那些依赖ie6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对ie的
特定对应无法应用于ie7，造成这些网站便无法如他们预期的显示。由于<!doctype>只支持两种兼容性模式，受到影
响的网站拥有者*更新他们的网站使其能支持ie7。
ie8 比之前的任何版本浏览器都更支持业界标准，因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮
助减轻所有问题，ie8引入文件兼容性的概念，使你能选择你的网页设计要对应的特定ie版本。文件兼容性在ie8增加
了一些新的模式，这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示，你可以更新
你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉ie8如何依照旧版本浏览器
编译你的页面。
这能让你选择将你的网站更新支持ie8新特点的时机。
当 internet explorer 8 遇到未包含 x-ua-compatible 标头的网页时，它将使用 <!doctype> 指令来确
定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 internet explorer 8 将以 ie5 模式
（quirks 模式）显示该网页。 <title>sb</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>
body标签:
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题. <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>: 加粗标签. <strike>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 <div><span>
块级标签：<p><h1><table><ol><ul><form><div>
内联标签：<a><input><img><sub><sup><textarea><span>
block（块）元素：
inline元素：
特殊字符
< >；"；©®
图形标签：
超链接标签<a>：
href:要连接的资源路径 格式如下: href="http://www.baidu.com"
target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.
name: 定义一个页面的书签.
用于跳转 href : #id.（锚）
超链接标签(锚标签)
href:要连接的资源路径 格式如下: href="http://www.baidu.com" target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容. name: 定义一个页面的书签. 用于跳转 href : #id.（锚）
列表标签:
表格标签
<table>
五 表格标签: <table>
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<th>: table header <tbody>(不常用): 为表格进行分区.六 表单标签<form>
表单用于向服务器传输数据。
表单能够包含 ，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含、select、和 。
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> 标签的属性和对应值
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都好使.
<select> 下拉选标签属性
<textarea> 文本域
name: 表单提交项的键.
cols: 文本域默认有多少列
rows: 文本域默认有多少行
<label>
<label for="www">姓名</label>
<input id="www" type="text">
<fieldset>
<fieldset>
<legend>登录</legend>
<input type="text">
</fieldset>
二、css
css是cascading style sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。
引入方式:
1.行内式
<p style="background-color: rebeccapurple">hello yuan</p>
2.嵌入式
<head>
<meta charset="utf-8">
<title>title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>3 链接式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.导入式
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>css的选择器:
＊ ： 通用元素选择器，匹配任何元素 * { 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; }
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; }
嵌套规则：
块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列
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;}
伪类(pseudo-classes)
css伪类是用来给选择器添加一些特殊效果。
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代码; }
: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}
css优先级和继承:
css优先级，是指css样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是： 1 内联样式表的权值最高 style=""-------------------1000；
2 统计选择符中的id属性个数。 #id －－－－－－－－－－－－－100 3 统计选择符中的class属性个数。 .class －－－－－－－－－－－－－10 4 统计选择符中的html标签名个数。 p
－－－－－－－－－－－－－-1
继承是css的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代.
有一些属性不能被继承，如：border, margin, padding, background等。
常用属性:
<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')">如果将背景属性加在body上，要给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片；
外边距和内边:
float属性:
文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
只有绝对定位absolute和浮动float才会脱离文档流。
浮动的表现
定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）
注意 float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
清除浮动：
在非ie浏览器（如firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的css处理，就叫css清除浮动。
clear语法： clear : none | left | right | both 取值： none : 默认值。允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
position(定位):
1 static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
2 position: relative／absolute
relative 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
absolute 绝对定位。
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后top、right、bottom、left用百分比宽度表示。
对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。
position:fixed
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
仅使用margin属性布局绝对定位元素:
margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
三、javascript
javascript 实现是由以下 3 个不同部分组成的：
ecmascript 标准描述了以下内容：
语法、类型 、语句 、关键字 、保留字 、运算符 、对象 (封装 继承 多态) 基于对象的语言.使用对象。
undefined 类型 undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。 当函数无明确返回值时，返回的也是值 "undefined"; null 类型 另一种只有一个值的类型是 null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ecmascript 把它们定义为相等的。 尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。 var person=new person() var person=null
javascript属于松散类型的程序语言 变量在声明的时候并不需要指定数据类型 变量只有在赋值的时候才会确定数据类型 表达式中包含不同类型数据则在计算过程中会强制进行类别转换 数字 + 字符串：数字转换为字符串 数字 + 布尔值：true转换为1，false转换为0 字符串 + 布尔值：布尔值转换为字符串true或false
逻辑 and 运算符(&&)
逻辑 and 运算的运算数可以是任何类型的，不止是 boolean 值。
如果某个运算数不是原始的 boolean 型值，逻辑 and 运算并不一定返回 boolean 值：
如果某个运算数是 null，返回 null。
如果某个运算数是 nan，返回 nan。
如果某个运算数是 undefined，返回undefined。
逻辑 or 运算符(||)
与逻辑 and 运算符相似，如果某个运算数不是 boolean 值，逻辑 or 运算并不一定返回 boolean 值异常处理
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
注：主动抛出异常 throw error('xxxx')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>
作用域链(scope chain)：
在javascript中，函数也是对象，实际上，javascript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供javascript引擎访问的内部属性。其中一个内部属性是[[scope]]，由ecma-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。
bom对象：
bom（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 bom，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
window对象
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setinterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearinterval() 取消由 setinterval() 设置的 timeout。
settimeout() 在指定的毫秒数后调用函数或计算表达式。
cleartimeout() 取消由 settimeout() 方法设置的 timeout。
scrollto() 把内容滚动到指定的坐标。
上一篇： EffectiveC++笔记 第4章
下一篇： Bootstarp