2024/11/4日工作總結

张黎健發表於2024-11-04

學習html基礎知識:

基礎標籤:

點選檢視程式碼
<!--html5 標識-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--頁面的字符集-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>我是標題 h1</h1>
<h2>我是標題 h2</h2>
<h3>我是標題 h3</h3>
<h4>我是標題 h4</h4>
<h5>我是標題 h5</h5>
<h6>我是標題 h6</h6>

<hr>
<!--
    html表示顏色:
        1.英文單詞
        2.rgb(1,2,3)取值範圍:0-255
        3.#值1值2值3,範圍:00-FF
-->
<font face="楷體" size="5" color="#ffc0cb">石家莊鐵道大學</font>

<hr>

據中央氣象臺網站訊息,未來三天,受強冷空氣影響,長江中下游以北地區有大風降溫天氣,內蒙古東部、黑龍江、西藏南部等地有雨雪天氣,<br>
關注對交通運輸、農牧業生產等的影響,建議做好防寒保暖、設施農業和臨時搭建物的防風加固;3日早晨至上午,華北、黃淮等地有霧霾天氣,關注對交通和人體健康等的影響;海南島2日晚至5日有較強降雨,注意防範降雨疊加效應。<br>

<p>
據中央氣象臺網站訊息,未來三天,受強冷空氣影響,長江中下游以北地區有大風降溫天氣,內蒙古東部、黑龍江、西藏南部等地有雨雪天氣,
</p>
<p>
關注對交通運輸、農牧業生產等的影響,建議做好防寒保暖、設施農業和臨時搭建物的防風加固;3日早晨至上午,華北、黃淮等地有霧霾天氣,關注對交通和人體健康等的影響;海南島2日晚至5日有較強降雨,注意防範降雨疊加效應。
</p>

建議做好防寒保暖<br>

<b>建議做好防寒保暖</b><br>
<i>建議做好防寒保暖</i><br>
<u>建議做好防寒保暖</u><br>

<center>
<b>建議做好防寒保暖</b>
</center>

</body>
</html>

圖片、音訊、影片標籤:

點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
    路徑:
        1.絕對路徑:完整路徑
        2.相對路徑:相對位置關係
            xxx/html/02-圖片音訊影片.html
            xxx/html/a.jpg
                ./a.jpg & a.jpg

            xxx/html/02-圖片音訊影片.html
            xxx/html/img/a.jpg
                ./img/a.jpg

            xx/html/02-圖片音訊影片.html
            xxx/img/a.jpg
                ../img/a.jpg
-->
<img src="../img/a.png" width="200" height="280">
<img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.neU_lyZXZpazGKjZXAlGywHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" width="200" height="280">

<audio src="b.mp3" controls></audio>

<video src="c.mp4" controls width="500" height="300"></video>

</body>
</html>

超連結標籤:

點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
    _self:當前頁面開啟(預設值)
    _blank:新建空白頁面
-->
<a href="https://www.itcast.cn" target="_blank">快點我</a>


</body>
</html>

列表標籤:

點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ol>
    <li>咖啡</li>
    <li>茶</li>
    <li>牛奶</li>
</ol>

<ol type="a">
    <li>咖啡</li>
    <li>茶</li>
    <li>牛奶</li>
</ol>

<ul>
    <li>咖啡</li>
    <li>茶</li>
    <li>牛奶</li>
</ul>


</body>
</html>

表格標籤:

點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1" cellspacing="0" width="500">
    <tr align="center">
        <th>序號</th>
        <th>logo</th>
        <th>品牌名稱</th>
        <th>企業名稱</th>
    </tr>
    <tr align="center">
        <td>010</td>
        <td><img src="../img/a.png" width="60" height="50"></td>
        <td>三隻松鼠</td>
        <td>三隻松鼠</td>
    </tr>
    <tr align="center">
        <td>009</td>
        <td><img src="../img/a.png" width="60" height="50"></td>
        <td>優衣庫</td>
        <td>優衣庫</td>
    </tr>
    <tr align="center">
    <td>008</td>
    <td><img src="../img/a.png" width="60" height="50"></td>
    <td>小米</td>
    <td>小米科技有限公司</td>
</tr>


</table>

<br>
<hr>
<br>

<table border="1" cellspacing="0" width="500">
    <tr align="center">

        <th colspan="2">logo</th>
        <th>品牌名稱</th>
        <th>企業名稱</th>
    </tr>
    <tr align="center">
        <td>010</td>
        <td><img src="../img/a.png" width="60" height="50"></td>
        <td>三隻松鼠</td>
        <td>三隻松鼠</td>
    </tr>
    <tr align="center">
        <td rowspan="2">009</td>
        <td><img src="../img/a.png" width="60" height="50"></td>
        <td>優衣庫</td>
        <td>優衣庫</td>
    </tr>
    <tr align="center">
        <td>008</td>
        <td><img src="../img/a.png" width="60" height="50"></td>
        <td>小米</td>
    </tr>


</table>


</body>
</html>

佈局標籤:

點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>

</body>
</html>

表單標籤:

點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<!--
    action:指定表單資料提交的URL
        *還必須指定name屬性
    method:表單提交方式
        1.get:預設值
            *請求引數拼接在url後面
            *url長度有限
        2.post:
            *在http請求協議的
-->
    <form action="#" method="post">
        <input type="text" name="username">
        <input type="submit">
    </form>


</body>
</html>

表單項標籤:

點選檢視程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <form action="#" method="post">
        <input type="hidden" name="id" value="123">

        <label for="username">使用者名稱:</label>
        <input type="text" name="username" id="username"><br>

        <label for="password">密碼:</label>
        <input type="text" name="password" id="password"><br>

        性別:
        <input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
        <input type="radio" name="gender" value="2" id="female"><label for="female">女</label>
        <br>

        愛好:
        <input type="checkbox" name="hobby" value="1">旅遊
        <input type="checkbox" name="hobby" value="2">電影
        <input type="checkbox" name="hobby" value="3">遊戲
        <input type="checkbox" name="hobby" value="4">烹飪
        <br>

        頭像:
        <input type="file"><br>

        城市:
        <select name="city">
            <option value="beijing">北京</option>
            <option>上海</option>
            <option>廣州</option>
        </select>
        <br>

        <label>
            個人描述:
            <textarea cols="20" rows="5" name="desc"></textarea>
        </label>
        <br>

        <br>
        <input type="submit" value="免費註冊">
        <input type="reset" value="重置">
        <input type="button" value="一個按鈕">



    </form>


</body>
</html>