HTML与CSS基础详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ALSNEI/article/details/69958745

HTML篇

如何区分html和html5?
①文档声明

html5的文档声明为<!DOCTYPE html>
html的文档声明为<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

②语义化的标签

html5新标签
<header> 、<nav>、<article>、<aside>、<footer>..
html没有结构语义化标签
 <div id="header"></div>

③HTML5新的API功能

canvas、svg、vedio、audio...

2.css选择符有哪些？哪些属性可以继承？优先级算法如何计算？css3新增伪类有哪些？
①标签选择符、类选择符、ID选择符、包含选择符、通配选择符、选择符分组、标签指定式选择符、组合选择符
②CSS中可以和不可以继承的属性
③

！important的权值最高
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1

④

:root
:nth-child(n)
:nth-of-type(n)
:target
:enabled
:disabled
:checked
:not
...

3.如何居中div?如何居中一个浮动元素？
①

父级：text-align:center
div:margin:0 auto

②
方法1：（用于未知子元素宽度）
父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%。
方法2：（用于已知子元素宽度）
子元素向左移动50%，margin-left设置为负的元素宽度的一般
4.px和em的区别？

1. em的值并不是固定的； 
2. em会继承父级元素的字体大小。
3. px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的

5.同步和异步的区别？

javascript 异步表示async，指：代码执行不按顺序，‘跳过’执行，待其他某些代码执行完后，再来执行，称为“异步”。

javascript同步表示sync，指：代码依次执行。

6.什么是盒子模型？

内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性。但是IE盒子模型的content部分包括padding、border。一般情况下，为了能够兼容多个浏览器，我们使用标准盒子模型，只需加上DOCTYPE声明

JS篇

(function(){
    var a = b = 5;
})();
console.log(b);
结果输出什么？
//5

for(var i = 0;i<5;i++){
    setTimeout(function(){
    console.log(i);
    },1000);
}
结果输出什么？
5个5

3.什么是NaN，它的类型是什么？怎么测试一个值是否等于NaN？

①NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
②数值类型
③isNaN() 全局函数来判断一个值是否是 NaN 值

4.下面代码输出什么？为什么？

console.log(1+"2"+"2");                 //122
console.log(1++"2"+"2");                //32
console.log(1+-"1"+"2");        //02
console.log(+"1"+"1"+"2");              //112
console.log("A"-"B"+"2");       //NaN2
console.log("A"-"B"+2);             //NaN

javascript里如果一个对象和String进行"+"运算, 优先当作字符串的连接操作. 如果另外一个对象不是String那么转换为String再连接
于是1+"2"时会把1转换为"1", 最后得到"12"
而+"2"和-"2"只能当作正负号, 于是转换为Number
"A"-"B"减法运算只能对Number运算所以会先把字符串转换为Number, 因为"A"和"B"不是能转换为数字的字符串, 于是得到NaN

5.下面两个函数的返回值一样吗？为什么？

function fool()
{
    return{
    bar:"hello"
    };
}
function foo2()
{return
{
bar:"hello"
};
}

fool()返回对象{bar:"hello"}
foo2()返回undefined
在编程语言中，基本都是使用分号（;）将语句分隔开，这可以增加代码的可读性和整洁性。而在JS中，如若语句各占独立一行，通常可以省略语句间的分号（;），JS 解析器会根据能否正常编译来决定是否自动填充分号：