因为公司内部一个纯后端团队要做一些适合自己团队的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) 收藏的更多相关文章

  1. Ubuntu 字体修改以及字体的相关知识 分类： ubuntu 2014-06-19 21:46 81人阅读 评论(0) 收藏

    Ubuntu chrome 字体修改 打开任意一张含有输入框的网页,比如Google首页,然后右键点击"搜索框"会拉出一个菜单,我们这样选: 拼音检查选项==>语言设置==& ...

  2. 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏

    引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

  3. 【C#小知识】C#中一些易混淆概念总结（二）--------构造函数，this关键字，部分类，枚举 分类： C# 2014-02-03 01:24 1576人阅读 评论(0) 收藏

    目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 继上篇对一些C#概念问题进行细节的剖析以后,收获颇多.以前,读书的时候,一句话一掠而 ...

  4. 【C#小知识】C#中一些易混淆概念总结（八）---------解析接口 分类： C# 2014-02-18 00:09 2336人阅读 评论(4) 收藏

     这一篇主要来解析关于面向对象中最总要的一个概念--接口. 对于接口来说,C#是有规定使用Interface关键字来声明接口.它的声明是和类一致的.可以说接口就是一个特殊的抽象类.如下代码: cl ...

  5. ETL概述 分类： H2_ORACLE 2013-08-23 10:36 344人阅读 评论(0) 收藏

    转自:http://blog.csdn.net/leosoft/article/details/4279536 ETL,Extraction-Transformation-Loading的缩写,中文名 ...

  6. 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 ...

  7. 【从0到1学Web前端】javascript中的ajax对象（一） 分类： JavaScript 2015-06-24 10:18 754人阅读 评论(1) 收藏

    现在最流行的获取后端的(浏览器从服务器)数据的方式就是通过Ajax了吧.今天就来详细的来学习下这个知识吧.如果使用ajax来访问后段的数据,浏览器和浏览器端的js做了那些工作呢?我做了一个图,请大家看 ...

  8. 【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位) 分类： HTML+CSS 2015-05-29 23:01 842人阅读 评论(0) 收藏

    引子: 开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕? 看下面的html代码: <body> <div id="father-body"&g ...

  9. 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. ...

随机推荐

  1. 20155218 2016-2017-2 《Java程序设计》第6周学习总结

    20155218 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 Java将输入/输出抽象化为串流,数据有来源及目的地,衔接两者的是串流对象. dump()方 ...

  2. Android中的Service 与 Thread 的区别[转]

    很多时候,你可能会问,为什么要用 Service,而不用 Thread 呢,因为用 Thread 是很方便的,比起 Service 也方便多了,下面我详细的来解释一下. 1). Thread:Thre ...

  3. Tensorflow从源代码编译2

    https://blog.csdn.net/qq_37674858/article/details/81095101 https://blog.csdn.net/yhily2008/article/d ...

  4. afx_msg解释

    以前一直不知道AFX_MSG是什么意思,只是觉得它应该是个消息映射函数,但是具体代表什么意思,会返回一个什么样的值是一点都不清楚,今天查了下资料,把查到的东西放这,以免以后忘了还得再查. 在头文件(D ...

  5. Java Socket重要参数讲解

    (转自http://www.cnblogs.com/ggjucheng/archive/2012/01/06/2314679.html) ( http://docs.oracle.com/javase ...

  6. hdu 1284 钱币兑换

    题目 我们用dp[n]表示用这些硬币组成n的方法总数.... 然后随着硬币种类的增加来更新dp[]的值,也就是最外面的一层循环for(i :1-->3)开始初始化的时候没有硬币,然后新来了面值为 ...

  7. 绩效沟通的best原则

    绩效沟通-BEST原则 BEST原则指在进行绩效/IDP面谈的时候按照以下步骤进行: 案例:小赵经常在制作标书时候犯错误 Behavior description 描述行为 小赵,8月6日,你制作的标 ...

  8. Linux下的ICMP反弹后门：PRISM

    搜索的时候无意中看见的这款基于ping的ICMP后门.于是到作者的github上看看,居然是阴文的,为了过级,只能强忍着看了,学生狗伤不起.还好比较简单易懂,正如简介说的一样:“PRISM is an ...

  9. PHP编译安装完成之后没有'php.ini'文件的处理方法

    在我们编译安装PHP的时候,编译安装完成是不会自动生成php.ini文件的,所以需要我们手动生成. 1.通过命令行确定php.ini文件的位置 php -r "phpinfo();" ...

  10. Python学习-28.Python中的列表切片

    在实际的业务过程中,经常有这么一个操作:取一个列表的一部分进行操作,而不影响原来的列表.也就是将原来的列表复制一个部分副本并对其进行操作. 举个完整例子: list = ['a','b','c','d ...