前端知识概述----公司内部的一次分享 分类： JavaScript HTML+CSS 2015-04-16 21:24 2593人阅读 评论(2) 收藏
因为公司内部一个纯后端团队要做一些适合自己团队的web页面，所以就有了这次分享。知识都是很基础，有的知识也只是做了解简单介绍。主要是想让大家对前端有一个基本的了解。现在做一个总结。欢迎大家拍砖。
知识概要
主要知识和分享要点如下的思维导图所示：
1）WEB前端是什么？
今天的web前端的重要的组成部分：
2）WEB浏览器显示网页的基本流程
注意：图片中的10年前有些夸张，而且那个时候还没有Chrome，只是为了便于理解
①10年前
②当今
3)XHTML和HTML的区别
代码示例：
<!--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的种类
代码示例：
<!--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)行内元素和块级元素
<!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>结果为：
6)CSS盒模型
代码示例：
<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>结果：
7)javascript数据类型
相关代码：
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(){
//没有执行成功执行的函数
}
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) 收藏的更多相关文章
- Ubuntu 字体修改以及字体的相关知识 分类： ubuntu 2014-06-19 21:46 81人阅读 评论(0) 收藏
Ubuntu chrome 字体修改 打开任意一张含有输入框的网页,比如Google首页,然后右键点击"搜索框"会拉出一个菜单,我们这样选: 拼音检查选项==>语言设置==& ...
- 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏
引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...
- 【C#小知识】C#中一些易混淆概念总结（二）--------构造函数，this关键字，部分类，枚举 分类： C# 2014-02-03 01:24 1576人阅读 评论(0) 收藏
目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 继上篇对一些C#概念问题进行细节的剖析以后,收获颇多.以前,读书的时候,一句话一掠而 ...
- 【C#小知识】C#中一些易混淆概念总结（八）---------解析接口 分类： C# 2014-02-18 00:09 2336人阅读 评论(4) 收藏
这一篇主要来解析关于面向对象中最总要的一个概念--接口. 对于接口来说,C#是有规定使用Interface关键字来声明接口.它的声明是和类一致的.可以说接口就是一个特殊的抽象类.如下代码: cl ...
- ETL概述 分类： H2_ORACLE 2013-08-23 10:36 344人阅读 评论(0) 收藏
转自:http://blog.csdn.net/leosoft/article/details/4279536 ETL,Extraction-Transformation-Loading的缩写,中文名 ...
- Rightmost Digit(快速幂+数学知识OR位运算） 分类： 数学 2015-07-03 14:56 4人阅读 评论(0) 收藏
C - Rightmost Digit Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit ...
- 【从0到1学Web前端】javascript中的ajax对象（一） 分类： JavaScript 2015-06-24 10:18 754人阅读 评论(1) 收藏
现在最流行的获取后端的(浏览器从服务器)数据的方式就是通过Ajax了吧.今天就来详细的来学习下这个知识吧.如果使用ajax来访问后段的数据,浏览器和浏览器端的js做了那些工作呢?我做了一个图,请大家看 ...
- 【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位) 分类： HTML+CSS 2015-05-29 23:01 842人阅读 评论(0) 收藏
引子: 开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕? 看下面的html代码: <body> <div id="father-body"&g ...
- OC基础知识总结 分类： ios学习 OC 2015-06-26 17:58 58人阅读 评论(0) 收藏
//OC: Objective-C, 面向对象的C语言 //OC与C的区别 //1.OC是C的超集, C语言的所有语法都可以在OC中使用 //2.OC是面向对象 //3.OC是一门运行时语言 //4. ...
随机推荐
- C#基础：在using中创建对象
在using中创建的对象的类必须是实现了IDispose接口的类,示例代码如下: static void Main(string[] args) { Method(); Console.WriteLi ...
- hdu 4996 1~n排列LIS值为k个数
http://acm.hdu.edu.cn/showproblem.php?pid=4996 直接贴bc题解 按数字1-N的顺序依次枚举添加的数字,用2N的状态保存在那个min数组中的数字,每次新添加 ...
- Android SQLiteOpenHelper Sqlite数据库升级onUpgrade
Android Sqlite数据库升级,在Android APP开发之中,非常常见: 在确定原来的数据库版本号之后,在原来数据库版本号+1,就会执行onUpgrade方法,进行数据库升级操作: 在on ...
- Android adb获取屏幕分辨率
获取Android设备屏幕分辨率,可以采用最快捷的方式,使用ADB命令获取即可: 打印详细方式: adb shell dumpsys window displays 执行结果: Dump time : ...
- C# 委托和事件，简单示例说明问题
先看看示例效果 按照国际惯例,得先说说概念. 委托(C# 编程指南) 事件(C# 编程指南) 以上内容来自MSDN. 委托源码 [委托] 概念和代码都有了.剩下的就是应用了,要是只知道概念不会用,那还 ...
- Asp .Net Core网页数据爬取笔记
突然要用到地区数据,想到以前用python的Scrapy框架写过一个爬虫,于是打算直接去国家统计局把最新的地区数据抓取回来.本想只需要copy一下以前的代码,就可以得到新鲜出炉的数据,谁知打开以前的项 ...
- CentOS ASP.NET Core Runtime Jexus跨平台布署
.net core 开源和跨平台,能布署到当前主流的Windows,Linux,macOS 系统上.本篇我们将在 Linux 系统上使用 ASP.NET Core Runtime 和 Jexus 布署 ...
- electron-vue 开发环境搭建(Windows环境)
1.安装 Node.js,一切都基于这个.安装完成后,终端输入 node -v 验证. 2.建立自己的项目目录,然后进入目录. 安装 vue-cli ,终端输入 npm install -g vue- ...
- C#Winfrom Listview数据导入Excel
需引用 public void ExportToExecl() { System.Windows.Forms.SaveFileDialog sfd = new SaveFileDialog(); sf ...
- C#通过rdp账密直接打开远程桌面
思路是首先新建一个vbs脚本,再创建一个bat脚本,再创建rdp文件,运行顺序是vbs->bat->rdp.rdp文件里面包含远程电脑的账密和其它信息,这样就可以不用再输入账密,而在程序里 ...