前端笔记

HTML 版本特点:

HTML5: 



HTML4.01:

单标记必须闭合 -> 比如
必须写成

单属性必须添加属性值 -> 必须写为

标记和属性必须使用小写 都是错的,必须携程

属性的属性值必须使用""



JavaScript

标识符:变量、函数、属性的名字或者函数的参数。ECMAScript标识符采用驼峰大小写格式,也就是第一个字母小写,剩下的每个单词的首字母大写。



要在整个脚本中启用严格模式,可以在顶部添加如下代码“use strict"

如果在函数内部的上方包含这条编码提示,也可以指定函数在严格模式下运行

function doSomething(){
    "use strict";
}


关键字:break doinstanceof typeof caseelse newvar

catchfinally returnvoid continue for switch while

debuggerfunction thiswith defaultif throwdelete

intry


保留字:abstract enumint shortbollean exportinterface static

byteextends longsuper charfinal nativesychronized

classfloat packagethrows constgoto privatetransient

debuggerimplements protectedvolatile doubleimport public


第五版把在非严格模式下运行时的保留字缩减为下列这些

classenum extendssuper

在严格模式下,第五版还对以下保留字施加了限制

implementspackage publicinterface privatestatic letprotected

yield



简单数据类型(也称为基本数据类型): Undefined, Null, Bolean, Number, String

复杂数据类型: Object



各种类型转换为Boolean规则

数据类型 转换为true的值转换为false的值

Boolean truefalse

String 任何非空字符串""(空字符串)

Number 任何非零数字值(包括无穷大)0

Object 任何对象null

Undefined n/aundefined



由于保存浮点数值需要的内存空间是保存整数值的两倍,因此ECMASscipt会不失时机地将浮点数值转换为零数值。显然,如果小数点后面没有跟任何数字,那么这个数字就可以作为整数值来保存。同样的,如果浮点数值本身表示的就是一个整数(如1.0)那么该值也会被转换为整数

var floatNum1 = 1;	// 小数点后面没有数字--解析为1
var floatNum2 = 10.0	// 整数--解析为10



在默认情况下,ECMAScript会将那些小数点后面带有6个零以上的浮点数值转换为以e表示法表示的数值(例如0.0000003会被转换为3e-7)



NaN与任何值都不相等,包括NaN本身




有3个函数可以把非数值转换为数值:Number()、parseInt()和parseFloat()。第一个函数,即转型函数Number()可以用于任何数据类型,而另两个函数则专门用于把字符串转换成数值
Number()函数的转换规则如下。
    如果是Boolean值,true和false将分别被转换为1和0。
    如果是数字值,只是简单的传入和返回。
    如果是null值,返回0。
    如果是undefined,返回NaN。
    如果是字符串,遵循下列规则:
    如果字符串中只包含数字(包括前面带正号或负号的情况),则将其转换为十进制数值,即"1"会变成1,"123"会变成123,而"011"会变成11(注意:前导的零被忽略了);
    如果字符串中包含有效的浮点格式,如"1.1",则将其转换为对应的浮点数值(同样,也会忽略前导零);
    如果字符串中包含有效的十六进制格式,例如"0xf",则将其转换为相同大小的十进制整数值;
    如果字符串是空的(不包含任何字符),则将其转换为0;
    如果字符串中包含除上述格式之外的字符,则将其转换为NaN。




var text = "This is the letter sigma: \u03a3."; 
这个例子中的变量text有28个字符,其中6个字符长的转义序列表示1个字符。任何字符串的长度都可以通过访问其length属性取得,例如:alert(text.length); // 输出28 



在不知道要转换的值是不是nullundefined的情况下,还可以使用转型函数String(),这个函数能够将任何类型的值转换为字符串



Object类型所具有的任何属性和方法也同样存在于更具体的对象中
Object的每个实例都具有下列属性和方法:
constructor:保存着用于创建当前对象的函数。对于前面的例子而言,构造函数(constructor)就是Object()
hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。其中,作为参数的属性名(propertyName)必须以字符串形式指定(例如:o.hasOwnProperty("name"))
isPrototypeOf(object):用于检查传入的对象是否是传入对象的原型(第5章将讨论原型)。
propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in语句(本章后面将会讨论)来枚举。与hasOwnProperty()方法一样,作为参数的属性名必须以字符串形式指定。
toLocaleString():返回对象的字符串表示,该字符串与执行环境的地区对应
toString():返回对象的字符串表示。
valueOf():返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。




逻辑与操作可以应用于任何类型的操作数,而不仅仅是布尔值。在有一个操作数不是布尔值的情况下,逻辑与操作就不一定返回布尔值;此时,它遵循下列规则
如果第一个操作数是对象,则返回第二个操作数 
如果第二个操作数是对象,则只有在第一个操作数的求值结果为true的情况下才会返回该对象
如果两个操作数都是对象,则返回第二个操作数 
如果有一个操作数是null,则返回null
如果有一个操作数是NaN,则返回NaN
如果有一个操作数是undefined,则返回undefined




与ECMAScript中的其他操作符一样,当关系操作符的操作数使用了非数值时,也要进行数据转换或完成某些奇怪的操作。以下就是相应的规则
    如果两个操作数都是数值,则执行数值比较。
    如果两个操作数都是字符串,则比较两个字符串对应的字符编码值。
    如果一个操作数是数值,则将另一个操作数转换为一个数值,然后执行数值比较。
    如果一个操作数是对象,则调用这个对象的valueOf()方法,用得到的结果按照前面的规则执行比较。如果对象没有valueOf()方法,则调用toString()方法,并用得到的结果根据前面的规则执行比较。
    如果一个操作数是布尔值,则先将其转换为数值,然后再执行比较


var result = "23" < 3; //false 

此时,字符串"23"会被转换成数值23,然后再与3进行比较,因此就会得到合理的结果。在比较数值和字符串时,字符串都会被转换成数值,然后再以数值方式与另一个数值比较


var result = "a" < 3; // false,因为"a"被转换成了NaN 




在转换不同的数据类型时,相等(==)和不相等(!=)操作符遵循下列基本规则: 
    如果有一个操作数是布尔值,则在比较相等性之前先将其转换为数值——false转换为0,而true转换为1;
    如果一个操作数是字符串,另一个操作数是数值,在比较相等性之前先将字符串转换为数值;
    如果一个操作数是对象,另一个操作数不是,则调用对象的valueOf()方法,用得到的基本类型值按照前面的规则进行比较;

这两个操作符在进行比较时则要遵循下列规则。
    null和undefined是相等的。
    要比较相等性之前,不能将null和undefined转换成其他任何值。
    如果有一个操作数是NaN,则相等操作符返回false,而不相等操作符返回true。重要提示:即使两个操作数都是NaN,相等操作符也返回false;因为按照规则,NaN不等于NaN。
    如果两个操作数都是对象,则比较它们是不是同一个对象。如果两个操作数都指向同一个对象,则相等操作符返回true;否则,返回false。




with语句的作用是将代码的作用域设置到一个特定的对象中。
with语句的语法如下:


with (expression) statement; 

定义with语句的目的主要是为了简化多次编写同一个对象的工作,如下面的例子所示

var qs = location.search.substring(1); 
var hostName = location.hostname; 
var url = location.href; 

上面几行代码都包含location对象。如果使用with语句,可以把上面的代码改写成如下所示:

with(location){ 
    var qs = search.substring(1); 
    var hostName = hostname; 
    var url = href; 
} 

在这个重写后的例子中,使用with语句关联了location对象。这意味着在with语句的代码块内部,每个变量首先被认为是一个局部变量,而如果在局部环境中找不到该变量的定义,就会查询location对象中是否有同名的属性。如果发现了同名属性,则以location对象属性的值作为变量的值。(不建议使用)




switch语句在比较值时使用的是全等操作符,因此不会发生类型转换(例如,字符串"10"不等于数值10)。



实际上,在函数体内可以通过arguments对象来访问这个参数数组,从而获取传递给函数的每一个参数

function doAdd() { 
	if(arguments.length == 1) { 
		alert(arguments[0] + 10); 
	} else if (arguments.length == 2) { 
		alert(arguments[0] + arguments[1]); 
	} 
} 
doAdd(10); //20 
doAdd(30, 20); //50 

另一个与参数相关的重要方面,就是arguments对象可以与命名参数一起使用,如下面的例子所示:

function doAdd(num1, num2) { 
	if(arguments.length == 1) { 
		alert(num1 + 10); 
	} else if (arguments.length == 2) { 
		alert(arguments[0] + num2); 
	} 
} 

关于arguments的行为,还有一点比较有意思。那就是它的值永远与对应命名参数的值保持同步。


使用CSS样式的方式
内链式样式表:
嵌入式样式表:需要将样式放在中
引入式样式表:



选择器优先级 id>class>html



子类: body div{   }
多个选择器: div,p,a{  }



css颜色:
{color:red;}
{color:#f00;}
{color:rgb(255,0,0);}
{color:rgba(255,0,0,1);}最后一位为透明度(0-1)



font-size
px:设置一个固定值
%:父元素字体的百分比
larger:比父元素更大
smaller:比父元素更小
inherit:和父元素相同


{background-image:url(image/bg.gif)}



background:背景颜色,url地址,重复,位置
background:#f60 url(images/bg,jpg) no-repeat top center



横向排列
text-align:left;
text-align:center;
text-align:right;



文本行高
line-height:10%; /*基于字体大小的百分比行高*/
line-height:20px; 


首行缩进
text-indent:10%; /*父元素的百分比*/
text-indent:20px;
text-indent:inherit;  /*继承父元素*/



字符间距
letter-spacing:normal;
letter-spacing:-10px;
letter-spacing:inherit;  /*继承父元素*/





单词间距
word-spacing:normal;
word-spacing:px;
word-spacing:inherit;/*继承父元素*/



文字方向
direction:ltr;/*从左到右*/
direction:rtl;/*从右到左*/
direction:inherit;/*继承父元素*/


文本大小写
text-transform:none;
text-transform:capitalize;/*每个单词首字母大写*/
text-transform:uppercase;/*都大写*/
text-transform:lowercase;/*都小写*/
text-transform:inherit;


盒子模型
padding会增加容器自身的宽高


定位方式position
relative正常定位,根据当前位置
absolute根据父元素进行定位
fixed根据浏览器窗口进行定位
static没有定位
inherit继承 


内联元素宽高不起作用


即便子元素的z-index小于父元素,子元素也不会显示在父元素的后面


在浮动后紧邻的元素会受到浮动的影响,跑到浮动元素的后面
清除浮动clear:both;
为了消除浮动元素带来的影响,也可以在浮动元素后添加个无内容的元素,在该元素上设置clear:both;


判断IE

不等于:
小于:
大于:
小于等于:
大于等于:
大于和小于之间:
或:
仅:



去掉所有元素的margin和padding
*{margin:0;padding:0}





HTML5中新的网页结构
header元素表示页面中的一个区域或者整个页面的标题


nav元素表示页面中的导航链接部分
article元素表示页面中的一块与上下文不相关的独立内容,比如一片文章中的文章

section表示页面中的一块内容区块,比如章节的页眉、页脚等等。也可以和hn(h1,h2...)等一起使用,标识出文档的结构

aside元素表示article元素的内容之外的,和内容相关的辅助信息
footer元素表示页面或者是页面中的一块区域的页脚,比如存放文件的创建时间、作者、联系方式等等



和其他不相关的独立内容用article
一块内容的不同部分分块用section,section中要有标题
内容的附属部分,比如广告,引用放在aside中




nav元素的使用场合
1.传统的导航条2.侧边栏导航3.内页导航4.翻页操作




time元素










在元素里面包含了pubdate属性的话,就是表示当前文章的发布时间   




hgroup元素是将标题和他的子标题进行分组的元素。hgroup元素一般会把h1-h6的元素进行分组,比如在一个内容区块的标题和他的子标题算是一组
通常情况下,文章只有一个主标题的时候,是不需要hgroup的

   

asda


   

asdas







address元素用来在页面中呈现联系信息,包括文档的作者、邮箱、地址、电话信息等。
address元素还用来展示和文章的相关的联系人的所有联系信息




figure元素是一种元素的组合,带有可选标题。figure元素用来在表示页面上一块独立的内容,如果将他从网页上删除不给我们的网页造成影响
figcaption元素表示figure元素的标题,它属于figure元素,figcaption元素必须书写在figure元素内部,可以写在figure元素内其他元素前面或后面。一个figure元素内最多只允许放置一个figcaption元素

   
   
   
   
image










details元素是一种标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性,当该值为true时,
该元素内部的子元素应该被展开显示。当该元素属性值为false时,其内部的子元素应被收缩起来不显示。该属性的默认值为false,当页面打开
其内部的子元素应处于收缩状态。
summary元素从属于detail元素,用鼠标点击summary元素的内容文字时,details元素中的其他所有从属元素将会展开或者收缩。如果details
元素内没有summary元素,浏览器会提供默认的文字以供点击,例如“details”。目前只有Chrome支持 






mark元素表示页面中需要突出显示或高亮显示的,对于当前用户具有参考价值作用的一段文字。通常在引用原文时使用mark元素,目的是引起读者的注意
mark元素是对原文内容有补充作用的一个元素,他应该用在一段原文作者不认为重要的,但是现在为了原文作者不相关的其他目的而需要突出显示或者
高亮显示的文字上面。 mark元素最主要的目的就是吸引当前用户的注意。 mark元素除了高亮显示之外,还有一个作用就是在引用原文时,为了某种特殊的目的
而把作者没有表示出来的内容重点表示出来




progress元素代表一个任务的完成进度,这个进度可以是不确定的,表示进度正在进行,但不清楚这个还有多少工作量没有完成,也可以用0到某个最大数字
(比如100)之间的数字来表示准确的进度情况(比如百分比)
该元素具有两个表示当前任务完成情况的属性,value属性表示已经完成了多少工作量,max属性表示总共又多少工作量。工作量的单位是随意的,不指定的
属性只能指定为有效的浮点数,value属性必须大于0,且小于或等于max的属性,max的属性必须大于0






在html5中废除的元素
1.能使用CSS代替的元素
basefont,big,center,font,s,strike,tt,u
2.不再使用frame框架




html5大纲
关于HTML的大纲编排,我们可以划分为“显示编排”和“隐式编排”两种
1.显示编排是指明确使用section元素进行分块来创建网页文档,每个内容区块内使用标题(h1-h6)
2.隐式编排就是我们不适用section元素进行明确的区块划分,而是根据我们写的(h1-h6,hgroup)元素进行自动
创建区块,因为html5分析器可以根据不同级别的标题判断出对应的内容区块
3.标题分级:不同的标题有不同的级别,在(h1-h6)中,h1的级别最高,而h6的级别最低。所以在隐式编排的
情况下就会按照一下规则生成
1)如果出现新的标题比上一个标题级别低,那么将会生成下级内容区块
2)如果新出现的标题比上面出现的一个标题级别高,或者两者级别相同,那么就生成新的内容区块
4不同的内容区块可以使用相同级别的标题,父内容区块与子内容区块都可以使用相同级别的h1标题


   

网页大纲编写实战


   


   

       

文章主标题


       

文章子标题


   

   

文章正文


   

       

文章评论列表:


       

           

评论标题A


           

评论内容A


       

       

           

评论标题B


           

评论标题B


       

   



    麦子学院版权所有


你可能感兴趣的:(FrontEnd)