Web前端开发学习笔记

一、标签的认识

<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>

&nbsp;? 空格

段落：

<p>块元素，可以包含任意标签</p>

&lt;小于号，&gt;大于号

<a 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 ><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" >

</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"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;

?著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,128评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,316评论 3赞 388
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事?！?“怎么了？”我有些...
    开封第一讲书人阅读 159,737评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,283评论 1赞 287
  • ?港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,384评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,458评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,467评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,251评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,688评论 1赞 306
  • ?护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,980评论 2赞 328
  • ?白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,155评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,818评论 4赞 337
  • ?日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,492评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,142评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,382评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,020评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,044评论 2赞 352

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,460评论 1赞 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,747评论 1赞 92
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称： 工作地点 岗位名...
    lilyping阅读 1,849评论 0赞 1
  • 现在是换高挡，通往罗马的时期（2017）。
    Stan森阅读 205评论 0赞 0
  • 1、已知一个列表，求列表中心元素 list= [45,55,55,66]i= len(list)/ 2j= int...
    d_d_z阅读 261评论 0赞 0