前端知识概述----公司内部的一次分享 分类: JavaScript HTML+CSS 2015-04-16 21:24 2593人阅读 评论(2) 收藏

因为公司内部一个纯后端团队要做一些适合自己团队的web页面,所以就有了这次分享。知识都是很基础,有的知识也只是做了解简单介绍。主要是想让大家对前端有一个基本的了解。现在做一个总结。欢迎大家拍砖。

知识概要

主要知识和分享要点如下的思维导图所示:

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

1)WEB前端是什么?

今天的web前端的重要的组成部分:

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

2)WEB浏览器显示网页的基本流程

注意:图片中的10年前有些夸张,而且那个时候还没有Chrome,只是为了便于理解

①10年前

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

②当今

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

3)XHTML和HTML的区别

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

代码示例:

<!--1.XHTML 标签必须小写-->

<BODY>
<p>大写标签不标准</p>
</BODY> <body>
<p>XHTML标签必须小写</p>
</body>
<!--2.XHTML 属性名必须小写-->
<img SRC="" WIDTH="" />
<img src="" width="" />
<!--3.XHTML 中标记必须严谨嵌套-->
<ul>
<li></li>
<li>
<ul>
<li></li>
</ul>
<li></li>
</ul>
<ul>
<li>严谨嵌套</li>
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
</ul>
<!--4.XHTML 中标记必须封闭-->
<p>你好啊!
<p>我是封闭的标记元素</p>
<!--5.XHTML 即使空元素的标记也必须封闭-->
换行
<br> 水平线
<hr> 换行
<br/> 水平线
<hr/>
<!--6.XHTML 属性值必须使用双引号括起来-->
<p class=nihao>
<p class="nihao"></p>
<!--7.XHTML 属性值必须使用完整形式-->
<input disabled>
<input disabled="" />
<!--8.XHTML 应该区分“内容标记”和“结构标记”-->
<p>
<table></table>
</p>
<table>
<thead></thead>
<p><tbody></tbody></p>
<tr>
<td>
<p>p 标签是内容元素</p>
</td>
</tr>
</tbody>
</table>
<!--标签语义化-->

4)DOCTYPE的种类

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

代码示例:

<!--DOCTYPE的声明种类
在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容
--> <!--html5-->
<!DOCTYPE html> <!--HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!--过渡类型
该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!--允许框架集的使用
该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

5)行内元素和块级元素

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
.dis{
display: inline;
}
.block{
display: block;
}
.spa_{
height:100px;
width:50px;
background-color:#63FF4D;
}
.block_{
height:100px;
width:50px;
background-color:#63FF4D;
}
</style>
</head>
<body>
<div class="block_">nihao</div>
<div>nihao</div>
<div>nihao</div>
<span class="spa_">行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
<div class="dis">nihao</div>
<div class="dis">nihao</div>
<span class="block">行内元素</span>
<span class="block">行内元素</span>
</body> </html>

结果为:

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

6)CSS盒模型

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

代码示例:

<html>
<head>
<style type="text/css">
.box{
border: 5px dashed black;
width:200px;
height: 100px;
padding: 10px 10px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">这是盒模型</div>
<img src="">
</body>
</html>

结果:

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

7)javascript数据类型

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

相关代码:

var a = 'bhj';
var bhg = 'gusjad'; var MYAPP = {
name1:'',
name2:'xiaohua'
} function abc1(){
//函数体
MYAPP.name1 = 'zhiqiang';
console.log(MYAPP.name1); //zhiqiang调用
} var abc2 = function (){
//函数体
name = 'dongge'; //dongge声明
console.log(MYAPP.name1);
}; var abc3 = function(){ //zhiqiang声明调用name
var myname = MYAPP.name2;
console.log(myname);
}; abc1();
abc2();
abc3(); //变量声明提前
var a = 1;
var edf = function(){
a += 1;
console.log(a);
var a = 10;
console.log(a);
};
edf(); //相当于
var a = 1;
var edf = function(){
var a ;
console.log(a);
//忽略掉变量声明和变量赋值之间的有关变量操作的语句
a = 10;
console.log(a);
}; name = 'zhiqiang'; function abc1(){
//函数体 console.log(name); //zhiqiang调用
} var abc2 = function (){
//函数体
name = 'dongge'; //dongge声明
console.log(MYAPP.name1);
}; var abc3 = function(){ //zhiqiang声明调用name
console.log(name);
}; abc1();
abc2();
abc3(); //声明对象
function ProtoPerson(age, name){
this.age=age;
this.name=name;
}
//对象
function ProtoChildren(){}
var person = new ProtoPerson(5, 'xiaohua'); //初始化ProtoPerson对象
ProtoChildren.prototype = new ProtoPerson(); //原型链继承
var childre = new ProtoChildren();
childre.name = 'childre_继承';
console.log(childre.name); var abc = function(data){
console.log(data);
};
abc(); function Objnde(name){
this.name =name;
}
var obj = new Objnde();
console.log(obj.name); var abc = function (){
var a =5;
};
abc();

8)jQuery中的ajax对象

代码:


//jquery对象就是一个js数组
var $html = $('#HGF').val(); //js对象和jquery对象相互转化
var abc =documen.getElementById('aSome');
var abcObj = $(abc); /**
* ajax的post方法
* 没有长度限制
* @type {String}
*/
$.ajax({
type: 'POST',
url: url,
data: {
'ids': ids
},
success: httpRedirect,
error: error,
dataType: 'json',
async: false
}); /**
* GET方法,有长度限制,不安全,但是效率较高
* @type {String}
*/
$.ajax({
type: 'GET',
url: url,
data: {
'ids': ids
},
success: httpRedirect,
error: error,
dataType: 'json',
async: false
}); var httpRedirect = function(data){ //data一般为返回的json数据
}; var error = function(){
//没有执行成功执行的函数
}

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

9)JSON对象

/**
* 声明一个js对象
* @type {Object}
*/
var abc = {
employees: 'nihao',
abcf : 'nihao'
} /**
* 声明一个标准的json对象
* @type {Object}
*/
var abc = {
'employees': 'nihao',
'abcf' : 'nihao'
} /**
* 不标准的json会存在浏览器的兼容问题
* @type {Object}
*/
var abc = {
employees: 'nihao',
abcf : 'nihao',
fre : 'fre',
}
abc.employees;
abc.abcf;

10)HTML5简单介绍

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#test{
height: 100px;
width:200px;
border:1px solid black;
background-color:#69FF4A;
border-radius:25px;
box-shadow:10px 10px 5px #888888;
}
</style>
</head>
<body>
<ul>
<nav>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</nav>
</ul> <div id="test">
<section>
<p>段落元素</p>
<span>行内元素</span>
<span>行内元素</span>
</section>
</div>
</body>
</html>

结果:

前端知识概述----公司内部的一次分享                                                       分类:            JavaScript             HTML+CSS             2015-04-16 21:24    2593人阅读    评论(2)    收藏

版权声明:本文为博主原创文章,未经博主允许不得转载。

上一篇:Jmeter----连接mysql数据库及常见问题处理


下一篇:Leetcode jump Game II