前端入門

時間  2019-11-14
標籤 前端 入門 简体版
原文   原文鏈接

前端學習

""" wwwh what why where how
一、html: 頁面架構
二、css: 頁面佈局
三、javascript: 頁面交互
四、jquery: js的工具包
五、bootstrap: 快速頁面搭建的框架

前端：寫網頁 - 用戶能看到一切交互頁面 - 網頁、app、小程序...
"""

HTML

"""
一、什麼是html：超文本標記語言
    超文本：文本、圖片、音頻、視頻、超連接
    標記：符號 - 標籤 - 沒有邏輯
    
二、組成：轉義字符、指令、標籤
三、目的：完成頁面架構的搭建 - 用什麼標籤、完成什麼樣的標籤嵌套關係
"""
第一個頁面
<!--註釋：doctype 必須出如今頁面的最上方，規定該文檔採用的html版本類型 -->
<!doctype html>
<!--html語言不區分大小寫-->

<!--頁面標籤：包含全部頁面內容，只有head與body兩個子標籤-->
<html>
    <!--頭標籤：樣式、腳本、後勤操做：頁面編碼、頁面標籤標題圖標-->
    <head>
        <title>第一個頁面</title>
        <meta charset="utf-8">
        <style></style>
        <script></script>
    </head>
    <!--體標籤：頁面顯示內容存放區域、樣式、腳本-->
    <body>
        你好，html &nbsp;&nbsp;&nbsp;&nbsp; 這是個人第一個頁面
        <style></style>
        <script></script>
    </body>
</html>
指令
"""
指令：被<>包裹，以!開頭 - 
    註釋：<!-- --> 
    文檔類型：<!doctype>
"""
轉義字符
"""
轉義字符：被 & ; 包裹，內容爲特殊的字母或數字組成
    <: &lt;
    >: &gt;
    空格：&nbsp;
    版權：&copy;
"""
標籤
"""
標籤：被<>包裹，以字母開頭，能夠包含數字和減號-
    系統標籤：h1~h6 p span div i b a img hr br table form input
    自定義標籤：知足合法命名的全部標籤

註釋：html語言中，系統建議只使用系統標籤，不建議使用自定義標籤
"""

經常使用標籤

基礎
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>標籤</title>
</head>
<body>
    <!-- 一、標題：加粗 -->
    <!--重點：h1標籤的語義：是該頁面的主標題-->
    <h1 title="這是標題">一級標題</h1>
    <h2>二級標題</h2>
    <h6>六級標題</h6>
    正文文本 <br>
    正文文本

    <!--二、段落: 自帶換行，有段落間距-->
    <p>這是一個段落這是一個段落這是一個段落這是一個段落</p>
    <p>這是一個段落這是一個段落這是一個段落這是一個段落</p>

    <!--三、換行標籤-->
    正文文本 <br>
    正文文本 <br>

    <!--自帶換行的文本標籤：h1~h6 p -->
    <!--四、文本類型標籤：不自帶換行的文本標籤 - span i b -->
    <span>span</span>
    <span>span</span>
    <b>加粗標籤</b>
    <b>加粗標籤</b>
    <strong>以加粗做爲強調的強調標籤</strong>
    <strong>以加粗做爲強調的強調標籤</strong>
    <i>斜體標籤</i>
    <i>斜體標籤</i>
    <em>以斜體做爲強調的強調標籤</em>
    <em>以斜體做爲強調的強調標籤</em>
    <br>
    <span>通常用來嵌套其它文本類標籤 上<sup>角標</sup> 下<sub>角標</sub> </span>

    <!--五、超連接標籤-->
    <a href="https://www.baidu.com" target="_blank">前往百度</a>
    <br>

    <!--六、圖片標籤-->
    <!--title：鼠標懸浮的文本提示-->
    <!--alt：img標籤資源加載失敗-->
    <img title="這是二哈" alt="二哈" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2969644141,2516639069&fm=26&gp=0.jpg">

    <!--七、列表標籤: 無序ul>li 有序ol>li -->
    <!--ul>li{第$列}*5-->
    <ul>
        <li>第1列</li>
        <li>第2列</li>
        <li>第3列</li>
        <li>第4列</li>
        <li>第5列</li>
    </ul>

    <!--八、表格標籤 table>tr>th|td -->
    <!--tr:行 th:標題單元格 td:普通單元格 -->
    <!--border:邊框-->
    <!--cellspacing:單元格的間距，最小爲0，
    可是單元格之間是兩條線，能夠用rules="all" 處理成一條線 -->
    <!--cellpadding：單元格的內邊距（文本與標籤的間距）-->
    <table border="1" width="500" height="300" rules="all" cellspacing="0" cellpadding="10">
        <caption>表格標題</caption>
        <thead>
            <tr>
                <!--th{標題}*3-->
                <th>標題</th>
                <th>標題</th>
                <th>標題</th>
            </tr>
        </thead>
        <tbody>
            <!--(tr>td{單元格}*3)*2-->
            <!--rowspan:合併行-->
            <!--colspan:合併列-->
            <tr>
                <td rowspan="2">單元格</td>
                <td colspan="2">單元格</td>
            </tr>
            <tr>
                <!--<td>單元格</td>-->
                <td>單元格</td>
                <td>單元格</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>表尾表尾</td>
                <td>表尾表尾</td>
                <td>表尾表尾</td>
            </tr>
        </tfoot>
    </table>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
表單
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表單標籤</title>
</head>
<body>
    <!--一、form的做用：完成先後臺數據的交互的 - 將用戶錄入的信息提交給後臺 | 文件上傳 -->
    <form action="">
        <p>
            <!--label做爲input的文本解釋標籤，for綁定id-->
            <!--value屬性是表單標籤的內容，就是提交給後臺的-->
            <!--name是提交給後臺的key，value是值-->
            <!--placeholder是文本佔位符-->
            <!--type是決定標籤的類型本質(input|button)-->
            <!--multiple,checked布爾類型屬性，不須要寫值，multiple多選 checked默認激活-->
            <label for="username">帳號：</label>
            <input id="username" type="text" value="Owen" name="usr">
        </p>
        <p>
            <label for="password">密碼：</label>
            <input id="password" type="password" placeholder="請輸入密碼" name="pwd">
        </p>
        <p>
            <input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
        </p>
        <p>
            <input type="file" name="file" multiple>
        </p>
        <p>
            男<input type="radio" value="male" name="sex" checked>
            女<input type="radio" value="female" name="sex">
        </p>
        <p>
            男<input type="checkbox" value="male" name="hobby" checked>
            女<input type="checkbox" value="female" name="hobby" checked>
            哇塞<input type="checkbox" value="other" name="hobby">
        </p>
        <p>
            <button type="button">普通按鈕</button>
            <button type="reset">重置按鈕</button>
            <button type="submit">提交按鈕</button>
        </p>
        <p>
            <textarea cols="30" rows="10"></textarea>
        </p>
        <p>
            <input type="button" value="按鈕" />
            <input type="reset" value="重置" />
            <input type="submit" value="登陸" />
        </p>
    </form>
</body>
</html>
標籤的分類
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>標籤的分類</title>
</head>
<body>
    <h1>標籤的分類</h1>
    <hr>
    <!-- 一、是否自帶換行 -->
    <!--帶換行：h1 p div table form tr ul li -->
    <!--不帶換行：span i b a img input button label textarea-->

    <!-- 二、單雙標籤 -->
    <!--單標籤（主功能）：br hr input img link -->
    <!--雙標籤（主內容）：html head body h1 p span div a label button -->
    <!-- / 表明標籤的結尾，可是單標籤能夠省略 -->
    <div></div>
    <hr />

    <!--三、簡單和組合標籤-->
    <!--組合：ul>li table>tr>td|th form>input -->
</body>
</html>

w3c頁面架構分析

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>頁面架構</title>
</head>
<body>
    <!--
    html學習目的：

    一、何時用什麼標籤
        最內層：h1~h六、p、a、img、input
        外層：ul>li、form、table
        架構：div
    -->

    <!--頁面頭-->
    <div class="header">
        <h1>
            <a href=""></a>
        </h1>
        <form action="">
            <input type="text">
            <button></button>
        </form>
    </div>

    <!--導航欄-->
    <ul class="nav">
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </ul>

    <!--頁面主體-->
    <div class="main">
        <!--.main-left+.main-center+.main-right-->
        <div class="main-left"></div>
        <div class="main-center">
            <div class="main-box box1">
                <h2>領先的 Web 技術教程 - 所有免費</h2>
                <p>在 W3School，你能夠找到你所須要的全部的網站建設教程。</p>
                <p>從基礎的 HTML 到 CSS，乃至進階的 XML、SQL、JS、PHP 和 ASP.NET。</p>
                <p>
                    <b>從左側的菜單選擇你須要的教程！</b>
                </p>
            </div>

            <div class="main-box box2">
                <img src="" alt="">
                <div>
                    <h2></h2>
                    <p></p>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="main-right"></div>
    </div>

    <!--頁面尾部-->
    <div class="footer"></div>
</body>
</html>

CSS

css導讀
"""
一、csss是什麼：級聯樣式表 （Cascading Style Sheet）
二、css屬於標記語言，沒有邏輯
三、css是完成頁面 樣式(張什麼樣) 與 佈局(標籤位置)

四、學習的內容：
    css如何控制html標籤 - 創建聯繫 - css選擇器
    css能夠控制哪些樣式(樣式與佈局)
    css如何導入到html文件中

五、學習目的：
    完成頁面的樣式
"""
css三種引入方式
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css的引入</title>
    <!--二、內聯式-->
    <!--書寫位置:在head標籤中的style標籤內-->
    <!--css語法：css選擇器 { 樣式1; 樣式2; } -->
    <!--優缺點: 可讀性強，有複用性，樣式被html頁面綁定了，不能提供給其它html頁面使用-->
    <style>
        h2 {
            color: red;
            font-size: 100px;
            text-align: center;
        }
    </style>

    <!--三、外聯式-->
    <!--書寫位置:在外部css文件中，在html文件中經過link標籤引入css文件-->
    <!--css語法：css選擇器 { 樣式1; 樣式2; } -->
    <!--優缺點: 可讀性強，有複用性，適合團隊開發(文件級別的複用性)-->
    <link rel="stylesheet" href="css/樣式引入.css">
</head>
<body>
    <!--一、行間式-->
    <!--書寫位置:在標籤的style屬性中書寫樣式-->
    <!--優缺點: 可讀性差，沒有複用性，書寫直接-->
    <h1 style="color: red; font-size: 100px; text-align: center;">css的引入</h1>
    <h1>h1標籤</h1>

    <h2>h2標籤</h2>
    <h2>h2標籤</h2>

    <h3>h3標籤</h3>
    <h3>h3標籤</h3>

    <h4>h4標籤</h4>
    <h4>h4標籤</h4>
</body>
</html>
外部css文件
/* css/樣式引入.css */
h3 {
    color: green;
}
h4 {
    font-size: 50px;
    text-align: center;
}
三種css引入直接的優先級
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css的引入</title>\

    <!--優先級：
    一、內聯與外聯之間沒有優先級區別，因爲html屬於解釋性語言，書寫在下方的會覆蓋上方的樣式
    二、行間式的優先級要高於一切
    -->

</head>
<body>
    <h3>h3標籤</h3>
    <h3>h3標籤</h3>

    <h4>h4標籤</h4>
    <h4 style="font-size: 100px">h4標籤</h4>
</body>

<style>
    h4 {
        color: #ff7800;
        font-size: 20px;
    }
</style>
<link rel="stylesheet" href="css/樣式引入.css">
</html>

css基礎選擇器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css基礎選擇器</title>
    <style>
        /*優先級：能夠從做用範圍來判斷 - 做用範圍越精確，優先級越高 */
        /*一、統配選擇器*/
        * {
            color: pink;
            font-size: 12px;
        }
        /*二、標籤選擇器*/
        h1 {
            font-size: 20px;
        }

        /*三、類選擇器*/
        .h {
            font-size: 30px!important;
        }

        .h2 {
            font-size: 40px;
        }

        .h.h2 {
            font-size: 50px;
        }

        /*四、id選擇器*/
        #hhh {
            font-size: 100px;
        }

        /*優先級：!important > 行間式 > id > class > 標籤 > 統配 */
    </style>
</head>
<body>
    <h1 class="h">1標題</h1>
    <h2 id="hhh" class="h h2" style="font-size: 12px">2標題</h2>
</body>
</html>

div*3 按tab鍵會出現三個div標籤javascript

ul>li*3 按tab鍵以後會出現一個ul標籤內嵌套三個li標籤css

p{內容}*3 按tab鍵後出現三個html

內容前端

(tr>td{內容}*3)*2 按下tab鍵以後會生成一個二行三列的列表java

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