一、标签的认识
<font color="red" size=7>大家好</font>
注释 <!-- -->
<!-- 粗体-->
<b>粗</b>
<strong>粗</strong>(有强调的作用，搜索优先率高，也就是seo优化)
<!-- 斜体-->
<i>斜</i>
<em>斜</em>(有强调的作用，搜索优先率高)
<!-- 下划线-->
<u>下划</u>(少用，用户容易与链接混淆)
<!-- 删除线-->
<del>删除</del>
<strike>删除</strike>
<s>删除</s>
<!-- 标签的嵌套-->
<del><b><em><u>嵌套</u></em></b></del>
<!-- 标题-->
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
在一行内显示的标签叫行内标签，独占一行的标签叫块标签或者块元素
单标签：
<br>，换行
<hr>，换行，还会有一条分割线
<area>
空格
段落：
<p>块元素，可以包含任意标签</p>
<小于号，>大于号
<a href="http://baidu.com" target="_blank" title="this is a link">百度</a>
(target的四个属性：top,parent,self,blank)
./链接到本目录下 ../链接到上级目录下
a链接的四个属性：name,target,href,title
<a name="top"></a>
<a href="#top">顶部</a>
head标签：
keywords关键字，description描述，robots检索选择，title标题
body标签：
<a href="http://baidu.com"><img src="./a.jpg" title="this is an image" alt="这是一张图片" width=200 border=0 usemap="#mymap"></a>
(给图片加链接，在IE上浏览图片会出现边框，解决问题可以加border=0)（当页面出现错误时，alt会进行友好提示）
<map name="mymap">
<area shape="rect" coords="204,158,304,168" href="http://baidu.com">
</map>
get通过地址栏提交，信息有限，且不安全，最多2M，
常用的是post传递方式
<form action="form.php" method="post">
user:<input type="text" name="user"><br>
password:<input type="password" name="pass"><br>
sex:男：<input type="radio" name="sex" value="man">
女：<input type="radio" name="sex" value="woman"><br>
likes:学习:<input type="checkbox" value="study" name="like[]">
睡觉:<input type="checkbox" value="sleep" name="like[]">
吃饭:<input type="checkbox" value="eat" name="like[]"><br>
省份：<select name="sf" multiple size=3>(用于多选)
<option>请选择省份</option>
<option>山西</option>
<option>北京</option>
</select><br>
个人介绍：<textarea name="info" rows=10 cols=50> </textarea><br>(区域内会识别空格)
<input type="hidden" name="hid" value="abcd">(隐藏域)
上传头像：<input type="file" name="files">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</form>
<frameset rows="*,*" cols="*,*">(不能和body共存，分成几个窗口，就要有几<frame>相对应，对搜索引擎的优化不好)
<frame src="http://baidu.com">
<frame src="1.html">
<frame>
<frame>
</frameset>
<frameset rows（行）="20%,*">(条理清楚，方便用户的浏览习惯，可以在本页面跳转，一般在后台用)
<frame noresize src="top.html">
<frameset cols（列）="20%,*">
<frame noresize src="menu.html">
<frame src="main.html">
</frameset>
</frameset>
<body>
<div>
</div>
<iframe src="http"//baidu.com"></iframe>（新建一个窗口）(规律性不好)
</body>
二、多种样式
行内样式：
<em style="color:red;font-size:20px;font-style:normal">斜体</em>(必须加单位)(优先级最高)
嵌入式
(嵌入式与外部样式表，谁位置靠后，就引用谁的样式，并没有优先级高低之差)
<style>
strong{
color:blue;font-size=20px;
}
</style>
<strong>粗体</strong>
外部样式表
<link rel="stylesheet" href="1.css">
（行内样式，嵌入样式，外部样式，导入样式表）
padding:0;margin:0; 边框为0
外部样式表引用时html:<link href="1.css" rel="stylesheet">
@import url(base.css); css引入另一个css
css里边的注释 /* */
继承样式的优先级是最低的，其次是自己默认的样式，其次是*，其次是标签选择器，其次是类名选择器（前边加点），其次是id选择器（前边加#）
交叉选择器（ul.one）大于类名选择器
后代选择器，父加空格 组合选择器，用逗号隔开
a:link和a:visited慎用，hover一般只作用于a，作用于其他的兼容有问题
p:first-line{font-size:2em;}(也是一种伪类)
三、块元素和行内元素
图片是典型的行内块元素，表单里边的每一个控件也是行内块元素
块元素：独占一行，且可以设置宽高
行内元素：在一行内显示，不可以设置宽高
span是行元素的代表，div是块元素的代表
<style>
body{
font-family:黑体 宋体 微软雅黑；
font-size:2em;
font-weight:normal/bold;
font-style:italic;
font-variant:small-caps;（大写，normal就是小写）
text-decoration:none;
}
div{ font-family:微软雅黑；
}
</style>
border:1px solid red;
line-height:（用于一行文字的居中，多行的话就是控制行间距）
letter-spacing:10px（控制文字与文字之间的距离）
text-indent:2em用于首行缩进
四、浮动
盒子分为内容、边框、内边距和外边距四个元素，外边距可以设置负数
width:auto （自动的）
行内元素是有内边距的，外边距只能设置左右，不能设置上下
行元素默认没有宽高
一个子元素在父元素中水平居中：margin:0 auto;（设定一个块元素居中）
浮动：float，有两个值：left和right
有默认的内边距：body\p\ul\li\h1\input\form
去掉边距：list-style:none
margin可以设置负值，padding不可以设置负值。
行内元素的margin值，只有左右，没有上下的值。
display:block;让元素具有块特性，display:inline;可以让块级元素变为行内元素。
display:inline-block;指定元素兼有块级和行级元素的特性，即在行内显示但是可以设定宽高。
body,u,li,p{
padding:0px;margin:0px;list-style:none;}
行内元素在父元素中居中：在body中设置text-align="center"
给链接去下划线，加其他属性
a{text-decoration:none;color:#000;font-size:13px;line-height:30px;
}
放上去的背景色高度设置
a{display:block;float:left;padding:0 20px;
}
opacity:0.9;设置图片透明度
一行内的元素对齐：vertical-align
display:none;;inline;block;inline-block(inline-block在IE6上不显示)
overflow:visible;hidden;auto;scroll（对超出容器内容作出选择，常用的是hidden）
IE6下边的双倍边距问题：给浮动元素加display:inline（给子元素加浮动和margin-left之后）
父元素中的子元素浮动，当子元素增多时，让它将父元素撑开，正常显示：overflow:hidden或者<div style="clear:both"></div>（清除浮动）
在一行之内，只要有一个元素浮动，就要让其他的元素都浮动，不然就不会在一行内显示。
五、定位
定位：默认的文档流，也叫静态定位static、相对定位relative、绝对定位absolute、固定定位
相对定位：position:relative;left:100px;相对于自己当前的位置移动
绝对定位：position:absolute;left:100px;top:100px;不管父元素是谁，相对于浏览器左上角定位
给一个元素绝对定位，相对于具有定位属性的父元素，如果父元素没有定位属性的话，会找爷爷，一直往上找，最后到body，z-index的值越大，越在最前显示
只要给一个元素指定了一个定位属性，它就会脱离平面，下边的元素就会当他不存在而挤上去
相对定位最多的应用是用于给他的子元素进行绝对定位
固定定位fixed是相对于body即浏览器定位，其他定位会根据他来定位，但是在IE6下不能用
cursor:pointer光标放上去变手型
<script src="js.js"></script>
设置文字域不可拖动：textarea{
resize:none;}
resize:both;vertical
background-image:url(1.jpg);
background-repeat:no-repeat;repeat-x;repeat-y;
background-position:10px 20px;(背景定位)
图片经营技术：spring
background red:url(1.jpg) no-repeat 10px 20px;
png是一种无损压缩格式，用于许多小图，且支持透明度，jpg是一种有损压缩，不支持透明度，用于一些大图压缩
border-radius:20px;设置圆角
六、响应式
<style>@media screen and (min-width:1100px){} 与max-width</style>
box-sizing:border-box;
*{box-sizing:border-box;}
.contains{height:100%;overflow:hidden;}
@media screen and (min-width:1100px)
{
.contains{min-width:1000px;}
.box{width:1000px;height:100%;margin:0 auto;}
.table{width:100%;height:100%;overflow:hidden;}
.table big1{width:8.33333333333%;height:100%;float:left;}
.table big2{width:16.6666666667%;height:100%;float:left;}
.table big3{width:25%;height:100%;float:left;}
.table big4{width:33.3333333333%;height:100%;float:left;}
.table big5{width:41.6666666667%;height:100%;float:left;}
.table big6{width:50%;height:100%;float:left;}
.table big7{width:58.3333333333%;height:100%;float:left;}
.table big8{width:66.6666666667%;height:100%;float:left;}
.table big9{width:75%;height:100%;float:left;}
.table big10{width:83.333333333%;height:100%;float:left;}
.table big11{width:91.666666667%;height:100%;float:left;}
.table big12{width:100%;height:100%;float:left;}
}
@media screen and (max-width:1100px)
{
.contains{min-width:800px;}
.box{width:800px;height:100%;margin:0 auto;}
.table{width:100%;height:100%;overflow:hidden;}
.table small1{width:8.33333333333%;height:100%;float:left;}
.table small2{width:16.6666666667%;height:100%;float:left;}
.table small3{width:25%;height:100%;float:left;}
.table small4{width:33.3333333333%;height:100%;float:left;}
.table small5{width:41.6666666667%;height:100%;float:left;}
.table small6{width:50%;height:100%;float:left;}
.table small7{width:58.3333333333%;height:100%;float:left;}
.table small8{width:66.6666666667%;height:100%;float:left;}
.table small9{width:75%;height:100%;float:left;}
.table small10{width:83.333333333%;height:100%;float:left;}
.table small11{width:91.666666667%;height:100%;float:left;}
.table small12{width:100%;height:100%;float:left;}
}
七、javascript
javascript分三部分：ECMAscript语法\DOM文档对象模型\BOM浏览器对象模型
javascript是一种弱类型语言，比较松散，运行环境是浏览器，前端交互；java是一种强类型语言，结构严谨，企业开发、嵌入式开发
经常用的浏览器：IE6-11，火狐，谷歌
嵌入式脚本：
<script>alert(1);</script>
外部引用：
<link rel="stypesheet" href="">
<script src="1.js"></script>
//行注释
/* */块注释
三个输出工具：
1、alert("……");
2、var num=prompt("请输入数字",0); 对话框，输入接口
var num1=prompt("请输入第二个数字",0);
alert(num-num1);
3、document.write("……");
console.log(123); 在控制台输出
变量是用来存储数据的
定义变量用var
检测数据类型用typeof alert(typeof num);
数据类型：
一、初始类型（定长的，加快运行速度，存储在栈里）
1、字符串：用引号引起来的都是字符串（单双引号可以互相嵌套）
2、数值类型：16进制0xff 科学计数法var num=10e+10; alert(num);
3、布尔类型：两个值，一个真一个假
4、undefined类型：他的值是undefined，类型也是undefined
5、null（先占位，即将用；清空数值）
二、引用类型
object(class)
运算符：（一到五重要常用）
一、算术运算符
+ - * / % var++ var-- ++var --var
二、比较运算符（输出结果都是布尔值true或false）
> < >= <= == === != !==
三、逻辑运算符
与或非 && || ！
四、赋值运算符
= += -= *= /= %=
五、三元运算符
var 变量=Boolean expression？条件为真的值：条件为假的值
例如：
var num1=prompt();
var num2=prompt();
var num=num1>num2?60:25;
alert(num);
六、一元运算符
typeof + - delete new ++ --
七、特殊运算符
( ) ,
javascript代码放置方式：
一、嵌入式
二、外部引用
三、重定向时
四、在标签里写，需要和事件配合的写
流程控制：
条件结构，也叫分支结构（if else和switch case,break,default）：单路分支、双路分支、多路分支、嵌套分支
循环语句：
if else判断某个范围之内的值
switch case对于有多少种结果已经确定
while不确定要循环多少次
for明确知道要循环多少次
parseInt
循环结构：
一层循环、二层循环
跳转语句：
continue跳过当前的继续循环
break直接跳出本循环
作业：//判断及格与否、表格隔行换色、计算器、九九乘法表、杨辉三角、买书、百行百列
八、函数
关键字function 函数名（）{函数体}
函数名（）；
定义函数时定义的参数叫形参，调用时传入的参数叫实参
形参个数大于实参时，多出来的形参值就是默认的undifined
实参个数大于形参时，用arguments来获取
function定义的函数放在任何位置都可以被解析到，匿名函数必须先定义再调用，函数也是一个对象
定义函数：三种方式
用关键字定义，用变量定义
调用函数：三种方式
全局变量：在函数最外层定义的变量，可以在页面的任何地方访问到，拥有全局的作用域
局部变量：只在函数体内起作用，用完即删掉，节省内存
所有的变量定义时都要加var，不然全局和局部变量会互相影响
递归函数：自己去调用自己
回调函数：
function aa(3){
if(num>0){ function aa(2){
if(num>0){ function aa(1){
if(num>0){ function aa(0){
if(num>0){
aa(--num);
}document.write(0);
}
}document.write(num);
}
}document.write(num);
}
}document.write(num);
}
数组：一组或一系列相关的数据
函数的数据类型是function，是一种特殊的对象
数组的数据类型是object，也是一种特殊的对象
初始类型的赋值是传值，如：var a=3;var b=a;则b=3,a=3
引用类型的赋值是传址，如：var a=[1,2,3];var b=a;b.pop();则b=[1,2]，a=[1,2]（pop是删除数组中的最后一个值）
parseInt、parseFloat解析字符串，从左到右解析符合规范的
instanceof判断对象 arr instanceof Array判断arr是不是Array类型
slice数组中取值，截取
substring不支持负数
Math.random随机取数
str.charAt(num)返回字符串中指定位置的字符
str.charCodeAt(num)返回字符串中指定位置字符的UniCode编码
String.fromCharCode(num)根据给定的Unicode编码返回对应的字符
str.indexOf("")、str.lastIndexOf("")返回字符串中某个字符首次/最后出现的位置
Math.PI
Math.sin(弧度); 90*Math.PI/180（90度的弧度）
一个半径就是一个弧度
window.screenLeft在火狐下不能用，适合IE
window.screenX || window.screenLeft 解决兼容性
地址栏：协议，域名/主机端口号：默认8080，路径，查询字符串
javascript运行机制：单线程异步机制，回调函数最后执行
getElementsByClassName在IE9以下的IE浏览器都不能识别
window的集合：frames
document的集合：all、forms、anchors、images、links
获得标签上的不是自带的属性：2种方法：
1、getAttribute("属性名 ");
2、getAttributeNode("属性名 ").nodeValue;
web1.0时代，用于展示
web2.0时代，更注重人机交互
web3.0时代，随时随地可以用各种移动端交互
变量名与函数名不能重复
js解析过程
1、把页面内容预解析到内存中
2、解析script标签对，把其中的变量抓到内存当中（var、function）
number.tofixed(2) 保留2位小数
对象.textContent 获取纯文本（火狐下）
对象.innerHTML 获取包含标签的所有内容（IE下）
获取非标准属性 对象.getAttribute("class");
事件流：冒泡型，由里向外，最确定的向不确定的运行
捕获型，由外向里，最不确定的向确定的扩散，在IE上只会冒泡型的，在火狐下都会执行
火狐下ev.target IE下ev.src
360极速模式跟谷歌内核一样，兼容模式是IE内核
var ev=document.event||e;
获取滚轮滚动的方向：
IE ev.wheelDelta 上120，下-120
FF ev.detai 上-3， 下3
jquery
一、$接收的参数
1、函数 $（function(){}）
2、空值返回的是一个空的jquery $()
3、可以传入任何的css选择器 $("")
4、可以传入一个原生对象
var div=document.getElementsByTagName("div")[0];
$(div).click();
5、可以传入html标签，新创建一个指定的元素
$("<div style='width:200px;height:200px;border:1px solid red'></div>").appendTo(document.body);
remove把内存也删了，再访问不到，detach只是删除视觉，内存还在，下边还会访问到数据
clone(true) 把样式和内容一起复制
事件流做可编辑的表格，也就是事件委派
谷歌下边document.body
火狐下边document.documentElement
我的密钥：X2PRYLlAGMGBPhV6TbRUw8gp
IE6下边不识别最小宽度
关于垂直居中可以使用在CSS中代码为：
position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;
网友评论