一.HTML的初始結構
<!DOCTYPE html>
<html lang="en"><head><!-- 設置文本字符 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 設置網頁名 --><title>首頁</title>
</head><body>這是我的first page！
</body></html>
二.HTML中的常用標簽
1. 標題標簽
<h1> 到 <h6>：定義六個級別的標題，<h1> 級別最高，<h6> 級別最低。h1字體大小是32px h4字體大小是16px默認字體大小是16px
2. 段落和換行標簽
<p>：定義段落。
<br>：插入一個簡單的換行符。
3. 鏈接標簽
<a>：定義超鏈接，用于鏈接到其他網頁或網站。
4. 圖像標簽
<img>：定義圖像，src 屬性用于指定圖像的URL。
5. 列表標簽
<ul>：定義無序列表。
<ol>：定義有序列表。
<dl>: 自定義列表
<dt>:自定義列表頭
<dd>:自定義列表項
<li>：定義列表項。
<tr>：定義表格行。
<td>：定義表格數據單元格。
<th>：定義表頭單元格。
6. 表單標簽
<form>：定義HTML表單，用于用戶輸入。
<input>：定義輸入字段，type 屬性用于指定輸入類型（如 text, password, submit 等）。
<textarea>：定義多行文本輸入字段。
<label>：定義 <input> 元素的描述。
<select> 和 <option>：定義下拉列表。
<button>：定義一個點擊按鈕。
7. 語義化標簽
<header>：定義文檔的頭部區域。
<footer>：定義文檔的底部區域。
<article>：定義文檔中的獨立內容區域。
<section>：定義文檔中的節（或區段）。
<nav>：定義導航鏈接的部分。
<aside>：定義頁面的側邊欄內容。
8.格式化標簽
<strong>我變強壯了</strong>
<b>我也可以加粗</b>
<hr>
<em>我傾斜了嗎</em>
<i>我傾斜了嗎</i>
<hr><del>我身上有什么？</del>
<s>我身上有一條線</s>
<hr><ins>臺灣是中國的，日本也是中國的</ins>
<u>臺灣是中國的，日本也是中國的</u>
<hr>100<sub>10</sub>
26<sup>C°</sup>
9. 其他常用標簽
<div>：定義文檔中的區塊或節，常用于結合CSS進行布局和樣式設計。
<span>：對文檔中的行內元素進行分組。
<meta>：提供有關HTML文檔的元數據，如字符編碼、頁面描述、關鍵詞等。
<title>：定義瀏覽器工具欄的標題，當網頁添加到收藏夾時的標題。
<style>：用于包含CSS樣式信息。
<script>：用于嵌入或引用JavaScript代碼。
這些只是HTML5中常用標簽的一部分，實際上HTML5還包含許多其他標簽和屬性，用于構建功能豐富、結構清晰的網頁。
三.部分標簽的使用
1. table標簽
1.1 table標簽的基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>table標簽的使用</title>
</head>
<body><!-- border 邊框cellspacing 格子和格子之間的邊距cellpadding 格子和文字的邊距align="" left, center, rightth 默認字體加粗，內容居中表格的組成caption 標題thead 表頭tr 代表一行th 代表一行中的一個格子tbody 主體部分trtd 代表一行中的一個格子tfoottrtd--><table border="1" cellspacing="0" cellpadding="0"><caption>水果價格列表</caption><thead><tr><th>No</th><th>fruit</th><th>price</th><th>num</th></tr></thead><tbody><tr><td align="center">1001</td><td align="center">apple</td><td align="center">$2</td><td align="center">10</td></tr><tr><td align="center">1002</td><td align="center">pear</td><td align="center">$5</td><td align="center">8</td></tr><tr><td align="center">1003</td><td align="center">strawberry</td><td align="center">$7</td><td align="center">10</td></tr><tr><td>1004</td><td>watermelon</td><td>$1.2</td><td>50</td></tr></tbody><tfoot><tr><td>總金額：</td></tr></tfoot> </table>
</body>
<style></style>
</html>
1.2 table標簽的合并
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table, th, tr, td{text-align: center;}</style>
</head>
<body><table border="1" cellspacing="0" cellpadding="0" width="200" height="200"><tr><td>1</td><td >2</td><td rowspan="2">3</td></tr><tr><td>4</td><td>5</td></tr><tr><td colspan="3">7</td></tr></table></body>
</html>
2. ul, ol, dl 標簽的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表</title>
</head>
<body><script>// 列表 塊級元素// 1.有序列表 ol// 默認顯示 1-n的數字// start="10"// type=""// 2.無序列表 ul 默認是黑點// style="list-style: circle;" 空心的圓// style="list-style:none;"// 3.自定義列表 dl > dt > dd</script><ol start="10"><li>蘋果</li><li>梨子</li><li>草莓</li><li>香蕉</li></ol><br><ul style="list-style: none;"><li>周杰倫</li><li>蔡徐坤</li><li>黎明</li><li>迪麗熱巴</li></ul><!-- t:title --><dl><dt>吃了嗎</dt><dd>吃的包子</dd><dt>今天去哪里玩</dt><dd>哪里都不去</dd></dl>
</body>
</html>
3.label 標簽
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p><!-- label中的for應該與input中的id相關聯 --><!-- 使用單選框時，想要兩個單選框為一組，需要給他們設置相同的name --><label for="username">用戶名： <input type="text" name="" id="username" ></label><label for="nan"><input type="radio" value="男" id="nan" checked name="gender">男</label><label for="nv"><input type="radio" value="女" id="nv" name="gender">女</label></p>
</body>
</html>
label 標簽通常和表單元素一起使用
4.form 表單標簽
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單的使用</title>
</head><body><!-- 表單：數據的入口 --><!-- form表單method="get/post"get:通過url地址傳智，體積小，速度快，不安全，數據格式有限（asc,string）post:通過表單傳值，體積大，速度慢，安全，類型和格式不限制(壓縮包，視頻，音頻，ppt)action="提交的地址"--><form action="" method="get"><p>用戶名<input type="text" placeholder="用戶名" name="username" ></p><p>密 碼<input type="password" name="pwd"></p><p>性別：<!-- 使用lable標簽for屬性應該和input標簽中的id相關聯 --><!-- 使用單選框時選項應該在同一組中（在同一個name屬性中） --><label for="gender1"><input type="radio" id="gender1" name="gender" value="男">男</label><label for="gender2"><input type="radio" id="gender2" name="gender" value="女" checked>女</label></p><p><label for="age">年齡：<input type="number" max="120" min="18" value="20"></label></p><p>愛好：<input type="checkbox" value="錢" name="hobby"> 錢<input type="checkbox" value="黃金" name="hobby"> 黃金<input type="checkbox" value="香車" name="hobby"> 黃金<input type="checkbox" value="美女" name="hobby"> 黃金<input type="checkbox" value="黃金" name="hobby"> 黃金</p><p><label for="city">城市：<select name="" id="city"><option value="請選擇">請選擇</option><option value="長沙">長沙</option><option value="株洲">株洲</option><option value="湘潭">湘潭</option><option value="懷化" selected>懷化</option></select></label></p><p>詳細地址：<textarea rows="5" style="width: 500;"></textarea></p><p><button type="submit">提交</button><button>提交2</button><button type="reset"> 重置</button><!-- <input type="rest" value="重置"> 過時 --><!-- --></p></form></body></html>
注意在form表單中 button按鈕默認為 submit 類型， 即type=“submit”
5.audio 音頻 和 video 視頻
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- autoplay 自動播放controls 控制的界面loop 循環preload 預加載--><!-- 音頻 --><!-- 第一種方式 --><!-- <audio src="file/1.mp3" autoplay controls loop preload="auto"></audio> --><!-- 第二種方式 --><audio autoplay controls loop preload="auto"><source src="file/1.mp3" type="audio/mpeg"><source src="file/1.mp3" type="audio/mpeg"></audio><!-- 視頻 --><video src="file/1.mp3" autoplay controls loop preload="auto"></video><video src=""><source src="file/1.mp3" type="video/mp4"><source src="file/1.mp3" type="video/mp4"></video>
</body></html>
rgba, hsla 和 opacity
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body{height: 100%;width: 100%;margin: 0;padding: 0;}</style>
</head><body><!-- 直接設置會影響子盒子的顏色 --><!-- 彈框，給父盒子設置一個背景色為 rgba() ,子盒子的顏色不會被影響 --><div class="dialog" style="width: 100%;height: 100%; background-color: black; opacity: 0.5;"><div class="content" style="width: 200px;height: 200px;background-color: red;"></div></div><!-- <div class="dialog" style="width: 100%;height: 100%; background-color: rgba(0,0,0,0.5);"><div class="content" style="width: 200px;height: 200px;background-color: red;"></div></div> --><!-- <div style="width: 200px;height: 200px;background-color: hsla(24, 50%, 47%, 0.416);"></div> --></body>
<script>// 1. hex 16進制 0-f// 2. rgb 和 rgba// 3. hsl 和 hsla// hsl(色調0-360，飽和度，亮度)</script></html>
使用opacity給父盒子添加透明度時會影響到子盒子，其他兩個不會
如下圖使用opacity，代碼如上
下圖使用rgba
四. HTML區塊
1.塊級元素
div 定義了文檔的區域，塊級 (block-level)
塊級元素有：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre、header、section、aside、footer等。
2.內聯元素
span 用來組合文檔中的行內元素， 內聯元素(inline)
行內元素：span、img、a、lable、input、abbr（縮寫）、em（強調）、big、cite（引用）、i（斜體）、q（短引用）、textarea、select、small、sub、sup，strong、u（下劃線）、button等。
五.在VS中常用的快捷方式
ctrl + B 折疊菜單shift + alt + F 格式化shiift + alt + 向下箭頭 向下復制一行ctrl + z 撤銷ctrl + v 粘貼ctrl + c 復制ctrl + x 剪切crtl + k, ctrl + 0 全部折疊ctrl + k, ctrl + j 全部展開快速生成帶有標簽的類名 標簽名.類名 如 img.price快速生成標簽 如 ul>li{$}*3
![[Python] 操作redis使用pipeline保證原子性](http://pic.xiahunao.cn/[Python] 操作redis使用pipeline保證原子性)
