HTML基礎快速入門筆記

akie_384發表於2021-01-02
HTML筆記

基礎標籤

在這裡插入圖片描述
其中<hr>有格式color,如 color = ‘red’
有width如width = 200(畫素px) 或者width = 50%(比例)
以及 rglin = ‘left’ (right,center)
還有size，高度，如size = ‘10’

格式標籤

<b>加粗
<i>斜體
<center>居中(不贊成使用)
<font>定義文字格式有
1.color 定義顏色
(1) color = ‘red’
(2) color = rgb(數值1,數值2,數值3) 紅綠藍三原色調色數值取值範圍0-255(不推薦)
(3)color = #00FF00 同(2)不過是16進位制的比例
2.face定義字型如 face = "楷體’
3.size定義大小如size = ‘5’

html特殊字符集

比如以下
在這裡插入圖片描述
在這裡插入圖片描述
完整參考https://www.w3school.com.cn/tags/html_ref_entities.html

圖片標籤

< img src = "./image/picture1" alt ="好看小姐姐" >

這樣就可以匯入電腦的照片，嘻嘻嘻
在這裡插入圖片描述
在這裡插入圖片描述
屬性有height，width，align常用

列表標籤

無序列表
<ul>定義無序列表
<li>定義列表專案
type可以定義無序列表的表頭形狀有square，circle，disc

<ul type="disc">
    <li>睜開眼睛</li>
    <li>洗漱</li>
    <li>穿衣服</li>
    <li>穿鞋</li>
    <li>出門</li>
</ul>

<ol>定義有序列表
<li>定義列表專案同上
type可設定有序的序號型別如ABC，123，I, II, III, IV
start可設定起點序號

<ol type=A start="2">
    <li>睜開眼睛</li>
    <li>洗漱</li>
    <li>穿衣服</li>
    <li>穿鞋</li>
    <li>出門</li>
</ol>

執行結果
在這裡插入圖片描述

連結標籤

<a>定義超連結，可跳轉
href屬性是最關鍵的屬性，是規定指定的連結的URL
target可以實現在何處開啟，比如target = “_blank” 就是跳轉到新的一個標籤頁
而target = "_self"就是不開啟新的標籤頁在本頁跳轉
herf也可以指定郵件例如

<a href = "mailto:2427398850@qq.com">聯絡我</a><br>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>連結標籤</title>
</head>
<body>
    <a href = 'http://www.baidu.com'>點我</a><br>
    <a href = 'http://www.baidu.com' target="_blank">點我</a><br>
    <a href = 'http://www.baidu.com' target="_self">點我</a><br>
    <a href = "./5_列表標籤.html">列表標籤</a><br>
    <a href = "mailto:2427398850@qq.com">聯絡我</a><br>
    <a href = "http://www.csdn.net"><img src="./image/picture02.png"></a>
</body>
</html>

在這裡插入圖片描述
可以看到不同的效果

表格標籤

在這裡插入圖片描述

<tanble>標籤建立表格定義表格
<tr>表格中的行
<td>表格中的單元格 （tr 和 td 都可以有自己屬性color和align顏色和對齊方式）

  1. coslpan 規定單元格可橫跨的列數
  2. rowspan 規定單元格可橫跨的行數

<th>表格的表頭單元格
cellpadding規定單元邊沿與其內容之間的空白
cellspacing規定單元格之間的空白
bordoder規定表格邊框的寬度
width規定表格的寬度
bgcolor背景顏色
align對齊格式

主要程式碼:

<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#9f32f0" align = "center">
    <tr>
        <th>編號</th>
        <th>姓名</th>
        <th>成績</th>
    </tr>
    <tr>
        <td>1</td>
        <td>A</td>
        <td>89</td>
    </tr>
    <tr>
        <td>2</td>
        <td>B</td>
        <td>96</td>
    </tr>

</table>
</body>

執行結果為：
在這裡插入圖片描述

<caption>定義表格標題
<thead>表示表頭
<tbody>表示表體
<tfoot>表示表尾（三者沒啥改變性作用但是增加可讀性和css一起用）
對單元格進行合併操作以及單元格的對齊方式後

body部分程式碼：

<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#9f32f0" align = "center">
    <caption>學生資訊表</caption>
    <tr align = "center">
        <th>編號</th>
        <th>姓名</th>
        <th>成績</th>
    </tr>
    <tr align = "center">
        <td rowspan="2">1</td>
        <td>A</td>
        <td>89</td>
    </tr>
    <tr align = "center">
        <td>B</td>
        <td>96</td>
    </tr>
    <tr align = "center">
        <td>3</td>
        <td colspan="2">C</td>
    </tr>

</table>
</body>

執行結果為
執行結果

表單標籤

在這裡插入圖片描述
post請求到的username和password可以在F12裡面的network裡的header裡面的最下面找到

程式碼例子如下

<body>

    <form action="#" method="get">
        使用者名稱:<input name="username"><br>
        密碼:<input name="password"><br>
        <input type="submit" value="登入">
    </form>
</body>

執行結果如下
在這裡插入圖片描述
在這裡插入圖片描述

表單項標籤

在這裡插入圖片描述

<body>

<form action="#" method="get">
    <label for="username">使用者名稱</label>:<input type="text" name="username" placeholder="請輸入使用者名稱" id="username"><br>
    <label for="password">密碼</label>:<input type="password" name="password" placeholder="請輸入密碼" id="password"><br>
    <label>性別</label>:<input type="radio" name = "gender" value="male"> 男
    <input type="radio" name = "gender" value="female"> 女<br>
    <br>
    愛好:<input type="checkbox" name="hobby" value="shopping">購物
    <input type="checkbox" name="hobby" value="java">JAVA
    <input type="checkbox" name="hobby" value="game">遊戲
    <br>
    <input type="submit" value="登入">
</form>
</body>

在這裡插入圖片描述
在這裡插入圖片描述

<body>

    <form action="#" method="get">
        <label for="username">使用者名稱</label>:<input type="text" name="username" placeholder="請輸入使用者名稱" id="username">
        <br>
        <label for="password">密碼</label>:<input type="password" name="password" placeholder="請輸入密碼" id="password">
        <br>
        <label>性別</label>:<input type="radio" name = "gender" value="male"> 男
        <input type="radio" name = "gender" value="female"> 女<br>
        <br>
        愛好:<input type="checkbox" name="hobby" value="shopping">購物
        <input type="checkbox" name="hobby" value="java">JAVA
        <input type="checkbox" name="hobby" value="game">遊戲
        <br>
        取色器:<input type="color" name="color">
        <br>
        生日:<input type="date" name = "birthday">
        <br>
        生日:<input type="datetime-local" name = "birthday">
        <br>
        郵箱:<input type="email" name="email">
        <br>
        年齡:<input type="number" name="age">
        <br>
        圖片:<input type="file" name="picture">
        <br>
        隱藏域:<input type="hidden" name="id" value="1234">
        <br>
        <input type="submit" value="登入">
        <br>
        <input type="image" src="../html/image/picture02.png" width="120" height="150">


    </form>
</body>

在這裡插入圖片描述
下面是一個註冊介面的例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊頁面</title>
</head>
<body>
    <form action="#" method="get">
    <table align="center" width="30%" cellpadding="0" cellspacing="0" border="1">
        <tr>
            <td>使用者名稱</td>
            <td><input type="text" name="username" placeholder="請輸入使用者名稱"></td>
        </tr>
        <tr>
            <td>密碼</td>
            <td><input type="password" name="password" placeholder="請輸入密碼"></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="email" name="email" placeholder="請輸入郵箱"></td>
        </tr>
        <tr>
            <td>姓名</td>
            <td><input type="text" name="name" placeholder="請輸入姓名"></td>
        </tr>
        <tr>
            <td>手機號</td>
            <td><input type="number" name="phoneNumber" placeholder="請輸入手機號"></td>
        </tr>
        <tr>
            <td>性別</td>
            <td><input type="radio" name="gender" value="male">男
                <input type="radio" name="gender" value="female">女</td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td><input type="date" name="birthday" ></td>
        </tr>
        <tr>
            <td>驗證碼</td>
            <td><input type="text" name="checkCode" placeholder="請輸入驗證碼"></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value="註冊"></td>
        </tr>

    </table>
    </form>
</body>
</html>

在這裡插入圖片描述

相關文章