技術文章 » 前端三劍客快速入門（一）

前端三劍客快速入門（一）

2022-10-06 06:01:55

前言：

前端三劍客即HTML、CSS、JavaScript。本文只對其進行簡單介紹，達到簡單WEB程式所需。若想要深入學習，可以檢視W3C教學，其對三者進行了詳細的介紹。

HTML

  1. 簡介：HTML是一種超檔案標示語言，由瀏覽器來解析執行，其作用為編寫網頁的結構。

  2. 常見標籤及程式碼：

  • 第一節：日常標籤
<!-- html語法 -->
<!-- 標籤：開始標籤，結束標籤    -->
<!-- 屬性：寫在標籤內部，進一步描述標籤內容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一個網頁</title>
</head>
<body>
    <div>
        <!-- 標題標籤 -->
        <h1>hello world</h1>
        <h2>hello world</h2>
        <h3>hello world</h3>
        <h4>hello world</h4>
        <h5>hello world</h5>
        <h6>hello world</h6>
    </div>
    <!-- 段落標籤 -->
    <p>這是我的第一個網頁這是我的第一個網頁這是我的第一個網頁這是我的第一個網頁</p>
    <p>這是我的第一個網頁這是我的第一個網頁這是我的第一個網頁這是我的第一個網頁這是我的第一個網頁這是我的第一個網頁</p>
    <!-- 列表標籤 -->
    <!-- 無序列表 -->
    <ul>
        <li>香蕉</li>
        <li>鴨梨</li>
        <li>蘋果</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>香蕉</li>
        <li>鴨梨</li>
        <li>蘋果</li>
    </ol>
    <!-- 超連結標籤 -->
    <a href="http://baidu.com">跳轉到百度</a>
    <img src="coder.jpg" alt="圖片載入失敗">
    <!-- 重要屬性id class -->
    <h1 id="title">hehehe</h1>
    <h1 id="title">hehehe</h1>
    
    <p class="hot">紅</p>
    <p class="hot">黃</p>
    <p class="cool">藍</p>
    <p class="cool">綠</p>
</body>
</html>
  • 第二節：表格和表單
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一個網頁</title>
</head>
<body>
    <!-- 表格元素容器為table -->
    <table border="1">
        <!-- 表頭：thead -->
        <thead>
            <!-- <th colspan="4">學生列表</th> -->
            
        </thead>
        <!-- 表體 -->
        <tbody>
            <tr>
                <td colspan="4">學生列表</td>
            </tr>
            <tr>
                <td rowspan="3">一班</td>
                <td>1</td>
                <td>小紅</td>
                <td>7</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小鹿</td>
                <td>5</td>
            </tr>
            <tr>
                <td>3</td>
                <td>小張</td>
                <td>6</td>
            </tr>
        </tbody>
    </table>
    <!-- 表單容器：form標籤 -->
    <form action="">
        <label for="usename">使用者名稱</label>
        <input id="usename" type="text" placeholder="使用者名稱">
        <label for="password">密碼</label>
        <input id="password" type="password" placeholder="密碼">
        <input name="sex" type="radio">公
        <input name="sex" type="radio">母
        <select name="" id="">
            <option value="">男</option>
            <option value="">女</option>
        </select><br>
        愛好<br>
        <input type="checkbox">足球
        <input type="checkbox">籃球<br>
        <input type="submit" value="登入">
        <input type="button" value="按鈕">
    </form>
</body>
</html>

CSS

  1. 簡介：CSS全稱層疊樣式表，用來控制網頁的樣式，其作用主要是美化網頁。

  2. CSS選擇器與常用屬性及其程式碼

  • 第一節：選擇器型別
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 選擇器 */
        h1{
            color: brown;
            font-size: 12px;
        }
        .test{
            color: blue;
        }
        #name{
            color: purple;
        }
        *{
            color: green;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>

    <h1 class="test">類選擇器</h1>
    <p class="test">這是一個段落，它應該是藍色的。這是一個段落，它應該是藍色的。這是一個段落，它應該是藍色的。</p>

    <span id="name">一個塊，它會是紫色的</span>
</body>
</html>
  • 第二節：選擇器常用屬性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css選擇器常用屬性</title>
    <style>
        .test{
            font-size: 18px;
            color: white;
            background-color: black;
            text-align: center;
            line-height: 100px;
        }
        img{
            width: 500px;
            height: auto;
        }
    </style>
</head>
<body>
   <h1 class="test">hello world</h1>
   <img src="coder.jpg" alt="圖片正在載入ing">
</body>
</html>
  • 第三節：選擇器進階
    層級選擇器和組合選擇器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 層級選擇器  */
        /* .box1 h1{
            color: red;
        } */
        /* 組合選擇器 */
        .box1 h1,.box1 h2{
            color:red;
        }
    </style>
</head>
<body>
    <div class="box1">
        <h1>hello h1</h1>
        <h2>hello h2</h2>
    </div>
    <div class="box2">
        <h1>box2容器</h1>
        <h2>hello world</h2>
    </div>
</body>
</html>

偽類選擇器和偽元素選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 偽類選擇器 */
        /* .box{
            height: 100px;
            width: 100px;
            background-color: red;
        }
        .box:hover{
            background-color: blue;
        } */
        /* 偽元素選擇器 */
        h1::before,h2::after{
            content: "aaaa";
            color:red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <h1>hello h1</h1>
    <h2>heloo h2</h2>
</body>
</html>

選擇器權重

  1. 不同選擇器權重：id（100）>class（10）>element（1）
  2. 相同選擇器：後面的會覆蓋前面的
  3. 層級選擇器：將權重累加比較
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 選擇器權重 */
        /* #hehehe{
            color: red;
        } */
        /* .box1{
            color: blue;
        } */
        /* h1{
            color: green;
        }
        h1{
            color: blue;
        } */
        .box1 #henghengheng{
            color: red;
        }
        .box1 h1{
            color: green;
        }
    </style>
</head>
<body>
    <div class="box1" id="henghengheng">
        <h1 id="hehehe" >hello world</h1>
    </div>
</body>
</html>
  • 設定最高權重
    !important
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 選擇器權重 */
        /* #hehehe{
            color: red;
        } */
        /* .box1{
            color: blue;
        } */
        /* h1{
            color: green;
        }
        h1{
            color: blue;
        } */
        /* 10 + 100 */
        .box1 #hehehe{
            color: red ;
        }
        /* 10 + 1 */
        .box1 h1{
            color: green !important;
        }
    </style>
</head>
<body>
    <div class="box1" id="henghengheng">
        <h1 id="hehehe" >hello world</h1>
    </div>
</body>
</html>

引入CSS的方法

  1. 嵌入樣式
  2. 內聯樣式
  3. 外部樣式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 嵌入樣式 -->
    <style>
       h1{
        color: red;
       }
    </style>
    <!-- 外部樣式 -->
    <link rel="stylesheet" href="style/demo06.css">
</head>
<body>
    <!-- 內聯樣式,行內樣式,權重要比嵌入樣式大 -->
    <h1 style="color: green;">hello world</h1>
    <h1>hello green</h1>
</body>
</html>

後續

因為內容實在是比較多，所以我分開來寫了，CSS還沒寫完，JS也還沒開始。後面還打算寫node和vue，只能說路漫漫其修遠兮，容不得一點懈怠啊！