前端知識概述----公司內部的一次分享 分類： JavaScript HTML+CSS 2015-04-16 21:24 2593人閱讀 評論(2) 收藏

時間  2019-11-17
標籤 前端 知識 概述 公司 內部 一次 分享 分類 javascript html+css html css 閱讀 評論 收藏 欄目 JavaScript 简体版
原文   原文鏈接

由於公司內部一個純後端團隊要作一些適合本身團隊的web頁面，因此就有了此次分享。知識都是很基礎，有的知識也只是作了解簡單介紹。主要是想讓你們對前端有一個基本的瞭解。如今作一個總結。歡迎你們拍磚。javascript

知識概要

主要知識和分享要點以下的思惟導圖所示：
這裏寫圖片描述css

1）WEB前端是什麼？

今天的web前端的重要的組成部分：
這裏寫圖片描述html

2）WEB瀏覽器顯示網頁的基本流程

注意：圖片中的10年前有些誇張，並且那個時候尚未Chrome，只是爲了便於理解前端

①10年前
這裏寫圖片描述html5

②當今
這裏寫圖片描述java

3)XHTML和HTML的區別

這裏寫圖片描述
代碼示例：jquery

<!--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的種類

這裏寫圖片描述

代碼示例：web

<!--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>

結果爲：
這裏寫圖片描述ajax

6)CSS盒模型

這裏寫圖片描述

代碼示例：json

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

結果：

這裏寫圖片描述

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程