前端知识概述----公司内部的一次分享

水深无声 2022-08-07 14:53 267阅读 0赞

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

## **知识概要** ##

主要知识和分享要点如下的思维导图所示：  
![这里写图片描述][20150416204810416]

## **1）WEB前端是什么？** ##

今天的web前端的重要的组成部分：  
![这里写图片描述][20150416205728754]

## **2）WEB浏览器显示网页的基本流程** ##

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

**①10年前**  
![这里写图片描述][20150416210052961]

**②当今**  
![这里写图片描述][20150416210251659]

## **3)XHTML和HTML的区别** ##

![这里写图片描述][20150416210548769]  
*代码示例：*

<BODY>
        <p>大写标签不标准</p>
    </BODY>
    
    <body>
        <p>XHTML标签必须小写</p>
    </body>
    
    <img SRC="" WIDTH="" />
    <img src="" width="" />
    
    <ul>
        <li></li>
        <li>
            <ul>
                <li></li>
            </ul>
            <li></li>
    </ul>
    <ul>
        <li>严谨嵌套</li>
        <li>
            <ul>
                <li></li>
            </ul>
        </li>
        <li></li>
    </ul>
    
    <p>你好啊！
        <p>我是封闭的标记元素</p>
        
        换行
        <br> 水平线
        <hr> 换行
        <br/> 水平线
        <hr/>
        
        <p class=nihao>
            <p class="nihao"></p>
            
            <input disabled>
            <input disabled="" />
            
            <p>
                <table></table>
            </p>
            <table>
                <thead></thead>
                <p><tbody></tbody></p>
                    <tr>
                        <td>
                            <p>p 标签是内容元素</p>
                        </td>
                    </tr>
                </tbody>
            </table>

## **4)DOCTYPE的种类** ##

![这里写图片描述][20150416210630886]

代码示例：

<!DOCTYPE html>
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

## **5)行内元素和块级元素** ##

![这里写图片描述][20150416210840725]

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

结果为：  
![这里写图片描述][20150416211136743]

## **6)CSS盒模型** ##

![这里写图片描述][20150416211111016]

代码示例：

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

结果：  
![这里写图片描述][20150416211213884]

## **7)javascript数据类型** ##

![这里写图片描述][20150416211455222]  
![这里写图片描述][20150416211526922]  
![这里写图片描述][20150416211436983]  
![这里写图片描述][20150416211646357]  
![这里写图片描述][20150416211707589]  
![这里写图片描述][20150416211553080]  
![这里写图片描述][20150416211754685]  
![这里写图片描述][20150416211628867]  
![这里写图片描述][20150416211658569]  
![这里写图片描述][20150416211714185]  
![这里写图片描述][20150416211726462]  
相关代码：

## **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(){
        //没有执行成功执行的函数
    }

![这里写图片描述][20150416211921078]  
![这里写图片描述][20150416211755899]

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

结果：

![这里写图片描述][20150416212300758]

[20150416204810416]: /images/20220805/0ebb038a0ce849d9bfad45c2080ad797.png
[20150416205728754]: /images/20220805/4b724639525048f99f7fd1fbcbe9a8f2.png
[20150416210052961]: /images/20220805/33fc488002f547bc893b66fee3c17293.png
[20150416210251659]: /images/20220805/0ef6e506232a4f21bc92b0d14c1a130d.png
[20150416210548769]: /images/20220805/13260f0aff414c60b31f2784c6071875.png
[20150416210630886]: /images/20220805/0fd7d8f43cf04a2e87741414ee1d2f68.png
[20150416210840725]: /images/20220805/0198a59669ba451aaa84e959ae501477.png
[20150416211136743]: /images/20220805/49c0171834d241079c728b5cbc6612af.png
[20150416211111016]: /images/20220805/116867968b9b4e8ab7a2f7b98bfc89cc.png
[20150416211213884]: /images/20220805/206ac321d3324b98a871748761ae3e3f.png
[20150416211455222]: /images/20220805/86a4708f714d4e51b7b559c2baef2da6.png
[20150416211526922]: /images/20220805/7cabf0c96bbb48789e4db1bfa47b68ac.png
[20150416211436983]: /images/20220805/022452afbcdf403b8a2e2100e0f0542c.png
[20150416211646357]: /images/20220805/9cea79a0b14c4ffe898bf8ea244a0be5.png
[20150416211707589]: /images/20220805/b870d412d835403dab0e4f16427234be.png
[20150416211553080]: /images/20220805/5c012fbb3bb5469492f464724f3ef5dd.png
[20150416211754685]: /images/20220805/d4d064888cd64078a156b2cd05f6f796.png
[20150416211628867]: /images/20220805/5fb4ea70a0d94f8db784e4d1e6e240a8.png
[20150416211658569]: /images/20220805/667388474e00473b8bcd711f87e69ddb.png
[20150416211714185]: /images/20220805/f44614db02064fc3a649dcb8d44d37fd.png
[20150416211726462]: /images/20220805/76e1fa7147db464d8477f05f469267e5.png
[20150416211921078]: /images/20220805/dcf6b9ca51be4ada80900725448e9a3d.png
[20150416211755899]: /images/20220805/253b44bb895941798a9c941a06ebe6e2.png
[20150416212300758]: /images/20220805/7bce717aed6b489bbc6106b501b1a979.png