HTML常用標籤
<strong>需要加粗的文字<strong>
<br>換行
<hr>分割線
<!-- 我是 HTML 註釋 -->
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<p>段落標籤</p>
<em>傾斜標籤</em>
<ins>下劃線</ins>
<del>刪除線</del>
<!-- <img src="圖片的 URL" alt="圖片無法載入的描述" title="圖片的描述" width="寬度" height="高度"> -->
<img src="圖片的 URL" alt="圖片無法載入的描述" title="圖片的描述" width="100" height="100" />
<!--<a href="https://www.baidu.com" target="屬性設定為_blank新視窗開啟">跳轉到百度</a> -->
<a href="https://www.baidu.com" target="_blank">跳轉到百度</a>
<!-- src= 音訊的url，controls="控制檯" loop="迴圈播放" autoplay = 自動播放 -->
<audio src="音訊的 URL" controls="controls" loop="loop" autoplay></audio>
<!-- src= 影片的 URL，controls="控制檯" loop="迴圈播放" autoplay = 自動播放 muted=靜音播放 -->
<video src="影片的 URL" muted></video>
<ul>
<li>無序列表</li>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
<ol>
<li>有序列表</li>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
<dl>
<dt>列表標題</dt>
<dd>列表描述 / 詳情</dd>
</dl>
<!-- 跨行合併，保留最上單元格，新增屬性 rowspan
跨列合併保留最左單元格，新增屬性 colspan -->
<table border="1">
<tr>
<th>姓名</th>
<th>語文</th>
<th>數學</th>
<th>總分</th>
</tr>
<tr>
<td>張三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
<tr>
<td>總結</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>
<form action="提交地址" method="post">
<!-- 經驗：用 label 標籤繫結文字和表單控制元件的關係，增大表單控制元件的點選範圍。 -->
<label for="使用者名稱">使用者名稱:</label>
<!-- placeholder="提示資訊" checked="預設選中" disabled="禁用" readonly="只讀" -->
<input type="text" id="使用者名稱" name="使用者名稱" placeholder="請輸入使用者名稱" /><br>
<label for="密碼">密碼:</label>
<input type="password" id="密碼" name="密碼" placeholder="請輸入密碼" /><br>
<label for="使用者名稱">郵箱:</label>
<input type="email" id="郵箱" name="郵箱" placeholder="請輸入郵箱" /><br>
<input type="radio" name="性別" id="1" checked="checked">男
<input type="radio" name="性別" id="0">女<br>
<input type="checkbox" name="愛好" id="1">籃球
<input type="checkbox" name="愛好" id="2">足球
<input type="checkbox" name="愛好" id="3">羽毛球<br>
<input type="file" name="檔案" id=""><br>
<!-- 實際開發中，使用 CSS 設定 文字域的尺寸
實際開發中，一般禁用右下角的拖拽功能 -->
<textarea>預設提示文字</textarea>
<select>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
<!-- 預設顯示第一項，selected 屬性實現預設選中功能。 -->
<option selected>武漢</option>
</select><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按鈕</button>
<div>div 標籤，獨佔一行</div>
<span>span 標籤，不換行</span>
<!-- 佈局標籤 -->
<nav>導航標籤</nav>
<footer>底部導航欄</footer>
<aside>側邊欄</aside>
<section>網頁區塊/內容</section>
<article>網頁文章</article>
</form>
CSS
外部引入CSS檔案/內部使用
<link rel="stylesheet" href="./my.css">
<style> </style>
css選擇器
<style>
/* 標籤選擇器：使用標籤名作為選擇器 → 選中同名標籤設定相同的樣式。*/
p {
color: red;
}
/* 定義類選擇器 */
/* <div class="red">這是 div 標籤</div> */
.red {
color: red;
}
/* 定義 id 選擇器 */
/* <div id="red">這是 div 標籤</div> */
#red {
color: red;
}
/* 查詢頁面所有標籤，設定相同樣式。
萬用字元選擇器： *，不需要呼叫，瀏覽器自動查詢頁面所有標籤，設定相同的樣式 */
* {
/* 萬用字元選擇器可以用於**清除標籤的預設樣式**，例如：標籤預設的外邊距、內邊距。 */
margin: 0;
padding: 0;
background-color: #3a3434;
width: 100%;
height: 100%;
}
/* 超連結偽類 */
/*
a標籤在選中時生效
*/
a:hover {
color: green;
}
</style>
css文字可用屬性格式
| 文字尺寸 | font-size: 30px; | PC 端網頁最常用的單位 px |
| 文字預設的效果 | font-style:normal; | normal無效果italic傾斜 |
| 文字行高 | line-height: 30px; | PC 端網頁最常用的單位 px |
| 背景色 | background-color: skyblue; | #3a3434 |
| 文字縮排 | text-indent: 2em; | 1em = 當前標籤的字號大小 |
| 控制內容水平對齊方式 | text-align: center; | center居中對齊，left左對齊，right右對齊 |
| 文字修飾線 | text-decoration：none; | none無修飾線，underline下劃線，line-through刪除線 |
| 寬度 | width: 100%; | px或者百分號 |
| 高度 | height: 100%; | px或者百分號 |
css背景可用格式
| 背景圖 | background-image: url(./images/1.png); | 路徑 |
| 背景色 | background-color: #3a3434; | #3a3434 |
| 背景圖片的重複方式 | background-repeat: no-repeat; | repeat=不重複，repeat-x 水平方向不重複，repeat-y 垂直方向不重複，repeat 重複 |
| 背景圖位置 | background-position: center bottom; | 單詞，px |
| 背景圖縮放 | background-size: cover; | cover：等比例縮放背景圖片以完全覆蓋背景區，可能背景圖片部分看不見，contain：等比例縮放背景圖片以完全裝入背景區，可能背景區部分空白 |
| 背景圖固定 | background-attachment: fixed; |
設定浮動
| 設定浮動 | display:block | block塊級沾滿一行，inline-block行內塊模式 |
塊級元素
特點：
- 獨佔一行
- 寬度預設是父級的100%
- 新增寬高屬性生效
行內元素
特點：
- 一行可以顯示多個
- 設定寬高屬性不生效
- 寬高尺寸由內容撐開
行內塊元素
特點：
- 一行可以顯示多個
- 設定寬高屬性生效
- 寬高尺寸也可以由內容撐開
盒子模型
盒子模型-組成
- 內容區域 – width & height
- 內邊距 – padding（出現在內容與盒子邊緣之間）
- 邊框線 – border
- 外邊距 – margin（出現在盒子外面）
div {
margin: 50px;
border: 5px solid brown;
padding: 20px;
width: 200px;
height: 200px;
background-color: pink;
}
邊框線
四個方向
屬性名：border（bd）
屬性值：邊框線粗細 線條樣式 顏色（不區分順序）
單方向邊框線
屬性名：border-方位名詞（bd+方位名詞首字母，例如，bdl）
屬性值：邊框線粗細 線條樣式 顏色（不區分順序）
div {
border-top: 2px solid red;
border-right: 3px dashed green;
border-bottom: 4px dotted blue;
border-left: 5px solid orange;
width: 200px;
height: 200px;
background-color: pink;
}
內邊距
作用：設定 內容 與 盒子邊緣 之間的距離。
- 屬性名：padding / padding-方位名詞
div {
/* 四個方向 內邊距相同 */
padding: 30px;
/* 單獨設定一個方向內邊距 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 80px;
width: 200px;
height: 200px;
background-color: pink;
}
提示：新增 padding 會撐大盒子。
- padding 多值寫法
技巧：從上開始順時針賦值，當前方向沒有數值則與對面取值相同。