你的位置:首页 > 网页设计

[网页设计]基础问题整理


 

!!

utf8_unicode_ci和utf8_general_ci

计算运行时间(性能)

width: 100%的应用

nth-child和nth-of-type的区别

document.addEventListener

offsettop的问题

在手机上测试网页遇到的问题

什么是Unicode,什么是UTF-8

手机屏幕分辨率和手机浏览器分辨率

 

!!

类型转换  将对应的类型转换为boolean型

!!b指的是将b转换为boolean值  去两次非是因为将b转换位boolean值后取了一次非,所以得到的值正好相反,再取一次反回来

utf8_unicode_ci和utf8_general_ci

具体的说:

1、对于一种语言仅当使用utf8_unicode_ci排序做的不好时,才执行与具体语言相关的utf8字符集校对规则。例如,对于德语和法语,utf8_unicode_ci工作的很好,因此不再需要为这两种语言创建特殊的utf8校对规则。

2、utf8_general_ci也适用与德语和法语,除了‘?’等于‘s’,而不是‘ss’之外。如果你的应用能够接受这些,那么应该使用 utf8_general_ci,因为它速度快。否则,使用utf8_unicode_ci,因为它比较准确。

用一句话概况上面这段话:utf8_unicode_ci比较准确,utf8_general_ci速度比较快。通常情况下 utf8_general_ci的准确性就够我们用的了,在我看过很多程序源码后,发现它们大多数也用的是utf8_general_ci,所以新建数据 库时一般选用utf8_general_ci就可以了

计算运行时间(性能)

使行属性标签既可以设置宽高,又可居中

===============================

span{

width:85px;

height:24px;

display: inline-block;

}

//父级

#main span{

Width: 100%;

text-align: center;

}

nth-child和nth-of-type的区别

els:nth-child(n)

1.往上找父级

2.父级下的第n个元素若为els======选中

els:nth-of-type(n)

往上找父级,父级下的第n个els元素=======被选中

<div> 

<ul > 

<p>zero</p> 

<li>one</li> 

<li>two</li> 

</ul> 

</div> 

上面这个例子,.demo li:nth-child(2)选择的是<li>one</li>节点,而.demo li:nth-of-type(2)则选择的是<li>two</li>节点。

document.addEventListener

1.冒泡和下沉

document.addEventListener("事件名称", 函数, false);

addEventListener里最后一个参数决定该事件的响应顺序;

-----如果为true事件执行顺序为

addEventListener -> 标签的onclick事件 -> document.onclick  (下沉)

-----如果为false

标签的onclick事件 -> document.onclick -> addEventListener  (冒泡)

 

理解为其他代码的调用入口

2.解决让一个js事件执行多个函数

document.onclick=function (){

 alert('a');

}

document.onclick=function (){

 alert('b');

}

--->只输出b

******************

document.addEventListener("click", function (){

 alert('a');

}, false);

document.addEventListener("click",function (){

 alert('b');

},false);

--->输出a,b

3.总结

true 的触发顺序总是在 false 之前;

如果多个均为 true,则外层的触发先于内层;

如果多个均为 false,则内层的触发先于外层。

 


 

响应顺序:

白块:2

绿块:1

黄块:3

 

白块:1

绿块:2

黄块:3

 

白块:3

绿块:2

黄块:1

 

白块:2

绿块:3

黄块:1

相关资料:js之事件冒泡和事件捕获

offsettop的问题

1.父级边框不算

2.offsettop是相对 relative 的定位

在手机上测试网页遇到的问题

1.首先关闭电脑上的防火墙

2.看看机器上是否有些什么杀毒软件,我遇到的也是这样,我机器上有一个偌顿(ESET),关闭上面的防火墙设置

3.看看你的电脑上是否允许访问80端口

什么是Unicode,什么是UTF-8

什么是Unicode

Universal Multiple-Octet Coded Character Set,简称UCS.

Unicode(统一码、万国码、单一码)是一种在计算机上使用的字符编码.

Unicode是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案。Unicode用数字0-0x10FFFF来映射这些字符,最多可以容纳1114112个字符,或者说有1114112个码位。码位就是可以分配给字符的数字。UTF-8、UTF-16、UTF-32都是将数字转换到程序数据的编码方案。

中文范围 4E00-9FBF

 

什么是UCS-2、UCS-4

UCS-2用两个字节编码,UCS-4用4个字节编码。

UCS-2也称为基本多文种平面。

UCS-2转换到UCS-4只是简单的在前面加2个字节0。

 

什么是UTF-8

UTF是“UCS Transformation Format”的缩写,可以翻译成Unicode字符集转换格式.

Unicode编码(十六进制) 

UTF-8 字节流(二进制)

000000 - 00007F

0xxxxxxx

000080 - 0007FF

110xxxxx 10xxxxxx

000800 - 00FFFF

1110xxxx 10xxxxxx 10xxxxxx

010000 - 10FFFF

11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

UTF-8的特点是对不同范围的字符使用不同长度的编码。

对于0x00-0x7F之间的字符,UTF-8编码与ASCII编码完全相同。UTF-8编码的最大长度是4个字节。从上表可以看出,4字节模板有21个x,即可以容纳21位二进制数字。Unicode的最大码位0x10FFFF也只有21位。

手机屏幕分辨率和手机浏览器分辨率

手机屏幕分辨率

做手机应用时:

@media screen and (min-device-width:640px) and (max-device-width:960px)

手机浏览器分辨率

@media screen and (min-width:320px) and (max-width:480px)

 

document.write("浏览器分辨率是"+document.documentElement.clientWidth+"*"+document.documentElement.clientHeight ); 

document.write("屏幕分辨率是"+window.screen.width+"*"+window.screen.height);