前端疑问和解答总结

开发工具与关键技术：DW 前端

作者：陈芝番

撰写时间：2019.5.3

对于Doctype作用，之前有些混淆，就是严格模式与混杂模式，

它们的区别：

1）<!DOCTYPE> 是位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

2）严格模式的排版和JavaScript运作模式是以该浏览器支持的最高标准运行。

3）在混杂模式中，页面以宽松的向后兼容的方式显示。

4）DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

有哪些行内元素？有哪些块级元素？有哪些空(void)元素？

1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如：

div默认display属性值为“block”，称为“块级”元素；

span默认display属性值为“inline”，是“行内”元素。

2）行内元素有：a b span img input select strong

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

3）知名的空元素：

鲜为人知的是：

举个例子：

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

输出效果图：

还需要知道有哪些选择符，而且那些属性可以继承等等。

id选择器（# myid）
类选择器（.myclassname）
标签选择器（div、h1、p）
相邻选择器（h1 + p）
子选择器（ul < li）
后代选择器（li a）

前端页面分三层：结构层、表示层、行为层，当然盒模型会影响CSS处理。

一个简单例子：

CSS部分：

.item {

float: left;

width: 100px;

height: 100px;

background: blue;

}

#item1 {

margin-left: 0;

}

#item2 {

margin-left: 200px;

}

HTML部分：

输出实现效果：

接下来讨论是JSON是一种轻量级的数据交换格式。

其是基于JavaScript的一个子集，具有数据格式简单，

易于读写，占用空间小的特点。

$(document).ready(function(){

$('form').submit(function() {

$("#result").html(($(this).serialize()));

return false;

});

当然在页就绪事件中，为表单提交关联处理代码，

关联submit事件处理器，序列化表单数据操作等等。

输出效果：

jQuery强调的理念是写的少，做的多(write less，do more)。其主要特点有：轻量级、强大的选择器、漂亮的DOM操作封装、可靠的事件处理机制、完善的Ajax处理、出色的浏览器兼容性、链式操作方式、丰富的插件支持、开源产品。

如AJAX可以使网页实现异步更新。意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新等等。

接着就要对数据进行请求：有异步请求和同步请求区别。

同步：提交请求→等待服务器处理→处理完毕返回，
异步：请求通过事件触发→服务器处理。

结语：发现问题，找出解决的方法就是最大进步。

前端疑问和解答总结

猜你喜欢