因为公司内部一个纯后端团队要做一些适合自己团队的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. 学习前端的菜鸡对JS的call,apply,bind的通俗易懂理解

       call,apply,bind 在JavaScript中,call.apply和bind是Function对象自带的三个方法,都是为了改变函数体内部 this 的指向.            a ...

  2. 初识Java ThreadLocal

    转载自:https://www.cnblogs.com/dreamroute/p/5034726.html ThreadLocal翻译成中文比较准确的叫法应该是:线程局部变量. 这个玩意有什么用处,或 ...

  3. java程序设计基本概念 jvm

    JVM (1)对于字符串:其对象的引用都是存储在栈中的,如果是编译期已经创建好(直接用双引号定义的)的就存储在常量池中,如果是运行期(new出来的)才能确定的就存储在堆中.对于equals相等的字符串 ...

  4. iOS平台设置系统状态栏（通知栏、顶部状态栏）样式背景颜色或透明

    5+App开发 状态栏 配置系统状态栏样式 iOS平台可支持对系统状态栏样式的配置,在应用manifest.json文件的plus->distribute->apple下添加UIStatu ...

  5. tensorflow1.12 cuda10 cudnn7

    https://download.csdn.net/download/giselite/10909984 https://blog.csdn.net/chary8088/article/details ...

  6. day02(继承，重写，this，super，final，抽象类)

    继承 概述:日常生活中儿女总会继承长辈的遗产,java语言也是.通过继承多种实物之间形成一种关系. 特点: ①一个类只能继承一个父类 ②一个父类可以有多个子类 ③可以多层继承(a类继承b类   C类继 ...

  7. php学习之路-笔记分享20150327

    由于公司需要,不得已是php也学习并用了段时间做了两个项目,现也分享出笔记.需要源文档的留下邮箱,.

  8. 关于Windbg Local kernel debugging for Win7

    在使用Windbg的时候,如果在Win7上使用Kernel Debug时候会弹出下面的对话框: 在这个对话框中所描述的信息中我们可以看到这么一段话: “Local kernel debugging i ...

  9. 学习Spring Data JPA

    简介 Spring Data 是spring的一个子项目,在官网上是这样解释的: Spring Data 是为数据访问提供一种熟悉且一致的基于Spring的编程模型,同时仍然保留底层数据存储的特​​殊 ...

  10. TSQL--查找连续登陆用户

    --========================================== 需求:有一个用户登陆日志表,记录用户每次登陆时间,然后想查找用户按天连续登陆的情况,找出每次连续登陆的最早时间 ...