开发工具与关键技术: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)知名的空元素:
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是:
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
举个例子:
<div class="nav_1">
<ul>
<li><a href="#">主页</a>
<ul>
<li><a href="#">一级栏目</a></li>
<li><a href="#">一级栏目</a></li>
</ul>
</li>
<li><a href="#">音乐</a>
<ul>
<li><a href="#">一级栏目</a></li>
<li><a href="#">一级栏目</a></li>
</ul>
</li>
<li><a href="#">视频</a>
<ul>
<li><a href="#">一级栏目</a></li>
<li><a href="#">一级栏目</a></li>
</ul>
</li>
<li><a href="#">新闻</a>
<ul>
<li><a href="#">一级栏目</a></li>
<li><a href="#">一级栏目</a></li>
</ul>
</li>
<li><a href="#">关于</a>
<ul>
<li><a href="#">一级栏目</a></li>
<li><a href="#">一级栏目</a></li>
</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部分:
<div class="item" id="item1"></div>
<div class="item" id="item2"></div>
输出实现效果:
接下来讨论是JSON是一种轻量级的数据交换格式。
其是基于JavaScript的一个子集,具有数据格式简单,
易于读写,占用空间小的特点。
$(document).ready(function(){
$('form').submit(function() {
$("#result").html(($(this).serialize()));
return false;
});
});
当然在页就绪事件中,为表单提交关联处理代码,
关联submit事件处理器,序列化表单数据操作等等。
输出效果:
jQuery强调的理念是写的少,做的多(write less,do more)。其主要特点有:轻量级、强大的选择器、漂亮的DOM操作封装、可靠的事件处理机制、完善的Ajax处理、出色的浏览器兼容性、链式操作方式、丰富的插件支持、开源产品。
如AJAX可以使网页实现异步更新。意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新等等。
接着就要对数据进行请求:有异步请求和同步请求区别。
- 同步:提交请求→等待服务器处理→处理完毕返回,
- 异步:请求通过事件触发→服务器处理。
结语:发现问题,找出解决的方法就是最大进步。