前端笔记

最新推荐文章于 2023-04-23 10:27:05 发布

weixin_35264169

最新推荐文章于 2023-04-23 10:27:05 发布

阅读量254

点赞数

分类专栏：前端文章标签：前端 html css javascript

本文链接：https://blog.csdn.net/weixin_35264169/article/details/82949785

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML

所有浏览器的兼容性：

/*不同浏览器，默认margin、padding不同，都设置为0，是为了所有浏览器的兼容性*/

/*如果写成“*”，先将常用的标签设置为0，然后遇到每个标签就加进来，

写法：（此方法慎用，此代码会轮询所有的标签，可能会增加网页加载的压力）

* {

margin: 0px;

padding: 0px;

}

/*按以下写法，遇到一个标签就加入到这里*/

body,div,p,ul,li,dl,dt,dd,h1,a{

margin: 0px;

padding: 0px;

}

块状元素：

可以设置宽高

可以设置水平居中，margin: 0 auto

容器型元素

内联元素：

不可以设置宽高

不可以设置水平居中，margin: 0 auto

不是容器型元素

设置一个导航栏用ul li，具体用法参见练习代码

设置一个可点击图片：

a标签设置display：block，成为块状元素，设置宽高

a标签内部放一个img标签，display：block，设置宽高

line-height: ?px;用于设置将块状元素在垂直方向铺满，如有文字会垂直居中，如果将文字大小设为100%，会撑满整个块状元素的空间

text-align: center;文字水平居中

margin:20px 0;/*往外挤空间*/，padding:20px 0;/*往内挤空间*/，根据具体的场景选择用哪个

#nav li .nav_active{

background: linear-gradient(to bottom,#EEEEEE,#555555);

*background: #999999;

技巧：

对于ie6来说：

第一行linear-gradient不支持，所以使用可支持的*设置background: #999999

对于chrome来说：

第一行linear-gradient支持，使用不支持的*防止被第二行覆盖

}

元素设置为块状元素后，在没有设置高度的情况下，不会进行自适应的计算，这时，内部的子元素设置为float属性后，脱离了文档流，导致父容器高度变为0，

使用overflow: hidden原意为隐藏溢出，这里可以将所有的子元素的浮动，并计算自适应高度，因为父容器没有设置高度，所以不会裁剪，解决（如果父容器设置了高度，将溢出的部分裁剪掉）

当前后两个元素都有float属性，且top-left不为零时，ie6有double margin left的bug

在前面那个元素使用display: inline解决

此处使用margin，不用padding，因为如果使用padding，需要重新设置line-height，使其垂直居中：

#left_article h1{

margin:20px 0;/*往外挤空间*/

}

#left_article p{

margin:10px;/*往外挤空间*/

margin-top: 0;

font-size: 14px;

text-indent: 1em;/*一单位em等于一个单位font-size的值(14px)*/

line-height: 200%;/*设置行高*/

}

Css hack

利用同一种语法，在不同浏览器上的效果不一样，来达到适配性

#div1{

width: 200px;

height: 200px;

background: #000;

}

/*对于其他浏览器，加了important，优先级最高，显示为红色

*对于ie6浏览器，无法识别！，所以显示为蓝色

/*写法一：*/

#div1{

background: #F00!important;/*其他浏览器*/

background: #00F;/*for IE6 only*/

}

/*写法二：*/

#div2{

background: #F00;/*其他浏览器*/

*background: #00F;/*for IE6 only*/

}

</style>

百变空间的轮播图

<body>

<!--快捷写法：光标发在行尾，按tab就可以了

div#banner>ul>(li>img[src=img/banner$.jpg])*6

-->

<ul>

</ul>

</div>

</body>

Javscript

是一门解释性语言，运行慢，但可以跨平台，只支持单线程，分异步、同步线程

变量：

可以这样定义一个变量：

a = 1;

变量的命名规则：

实验JavaScript的数据类型

var iNum=Number.MAX_VALUE

document.write('Number.MAX_VALUE = ' + iNum + '<br>');

var iNum=Number.MIN_VALUE

document.write('Number.MIN_VALUE = ' + iNum + '<br>');

var iNum=Number.POSITIVE_INFINITY

document.write('Number.POSITIVE_INFINITY = ' + iNum + '<br>');

var iNum=Number.MAX_VALUE/.1

document.write('Number.MAX_VALUE/.1 = ' + iNum + '<br>');

var iNum=Number.MAX_VALUE*1.1

document.write('Number.MAX_VALUE/.1 = ' + (iNum == Number.POSITIVE_INFINITY) + '<br>');

//等号的优先级高于==

var iNum=Number.MAX_VALUE*1.1

document.write('Number.MAX_VALUE/.1 = ' + isFinite(iNum) + '<br>');

document.write('Number.MAX_VALUE/.1 = ' + isFinite(5) + '<br>');

iNum = NaN//不是数字类型

document.write('NaN == NaN = ' + (iNum == iNum) + '<br>');

iNum = NaN//不是数字类型

document.write('isNaN(iNum) = ' + (isNaN(iNum)) + '<br>');

var sToken = 'hello "shen"\'xianjie\' world!'

document.write('sToken = ' + (sToken) + '<br>');

var sToken2 = sToken.concat(' abc ','abc ','abc ','abc ')

document.write('sToken2 = ' + (sToken2) + '<br>');

document.write('sToken2长度 = ' + (sToken2.length) + '<br>');

sToken = 'hello world!'

var iLength = sToken.indexOf('w')

document.write('sToken.indexOf = ' + (iLength) + '<br>');

document.write('sToken.charAt = ' + (sToken.charAt(iLength)) + '<br>');

document.write('sToken.substring = ' + (sToken.substring(0,iLength+1)) + '<br>');

var str = 'skjkfk shen fdkfsl gdslkgs xian dflsdkjsdf jie';

var iStart = str.indexOf(' ')

if(iStart != -1){

iEnd = str.indexOf(' ',iStart+1)

if(iEnd != -1){

document.write('result = ' + str.substring(iStart+1,iEnd) + '<br>');

}

//boolean

var bCheck = 12 == 2;

document.write('boolean = ' + bCheck + '<br>');

//udefined

var oTemp;

document.write('oTemp = ' + oTemp + '<br>');

//typeOf

var oTemp = 1;