HTML基礎標籤知識
阿新 • • 發佈：2022-12-07
標題標籤：獨佔一行
雙標籤
/*
<h1> ...</h1>
h1 ...h6一共六級標籤
標題獨佔一行
*/段落
段落標籤：獨佔一行
雙標籤
/*
<p> </p>
多個段落之間預設有一個間隙，就是隔了一行
段落獨佔一行
*/換行，水平分割線
# 檢視的時候一行文字很長，可以在"檢視"中設定 自動換行
# 單標籤
<br>
<hr> 水平分割線文字格式標籤
場景：需要讓文字加粗、下劃線、傾斜，刪除線等效果
| 標籤 | 說明 | 標籤 | 說明 | |
|---|---|---|---|---|
| b | 加粗 | strong | 加粗 | |
| u | 下劃線 |
ins | 下劃線 | |
| i | 傾斜 | em | 傾斜 | |
| s | 刪除線 | del | 刪除線 |
圖片標籤
單標籤，標籤名稱：img
/*
屬性名
src：圖片地址
alt：圖片載入不出來時，展示的內容
title：游標懸浮到圖片上時，顯示的內容
其中title屬性不僅可以用到img標籤，也可以作為其它標籤的屬性
<img src="" alt="" title=""> # 屬性之間用空格隔開，屬性之間沒有順序之分
*/圖片標籤的width和height屬性
/*
屬性名：width和height
屬性值：寬度和高度(數字px)
注意點：
如果只設置width或height中的一個，另一個沒設定的會自動等比例縮放(此時圖片不會變形)
如果同時設定了width和height兩個，若設定不當此時圖片可能會變形
*/ 音訊標籤
場景：在頁面中插入音訊
音訊標籤目前僅支援：MP3、Wav、Ogg
/*
<audio src="" controls> </audio>
src：音訊的路徑
controls：顯示播放的控制元件(瀏覽器預設是顯示播放控制元件的)
atuoplay:自動播放(有些瀏覽器不支援)
loop：迴圈播放
*/視訊標籤
視訊標籤目前僅支援：MP4、WebM、Ogg
/*
<video src="" controls></video>
src：視訊路徑
autopaly:自動播放，谷歌瀏覽器需配合meted實現靜音播放
*/超連結(a標籤)
/*
<a href="" target=""></a>
開發過程中，還不確定href要跳轉的地址，先用#號(空連線)佔位
target屬性：控制跳轉連線頁面在瀏覽器是另開啟一個新的的標籤頁，還是覆蓋原來的
*/ | target取值 | 效果 |
|---|---|
| _self | 預設值，在當前視窗跳轉(覆蓋原網頁) |
| _blank | 在新視窗跳轉(保留原網頁) |
列表標籤
無序列表
父子標籤
ul標籤中，只能包含li標籤中，不能包含其它的，可以在li中使用其它標籤
| 標籤名 | 說明 |
|---|---|
| ul | 表示無序列表的整體，用於包裹li標籤 |
| li | 表示無序列表的每一項，用於包含每一行的內容 |
無序列表的顯示特點
/*
列表的每一項前預設顯示圓點標識
*/有序列表
父子標籤
場景：在網頁中表示一組有順序之分的列表，如：排行榜
| 標籤名 | 說明 |
|---|---|
| ol | 表示有序列表的整體，用於包裹li標籤 |
| li | 表示有序列表的每一項，用於包含每一行的內容 |
自定義列表
/*
場景：在網頁的底部導航中通常會使用自定義列表實現
如：
幫助中心
賬戶管理
購物指南
訂單操作
*/| 標籤名 | 說明 |
|---|---|
| dl | 表示自定義列表的整體，用於包裹dt/dd標籤 |
| dt | 表示自定義列表的主題 |
| dd | 表示自定義列表的針對主題的每一項內容 |
自定義列表顯示特點
/*
dd當前會預設顯示縮排效果
注：dl標籤中，只能包含dt和dd標籤
dt和dd標籤可以包含任意內容
*/<body>
<dl>
<dt>幫助中心</dt>
<dd>賬戶管理</dd>
<dd>購物指南</dd>
<dd>訂單操作</dd>
</dl>
</body>表格標籤
不設定border屬性的話，瀏覽器不顯示錶格，只會顯示錶格內容
| 標籤名 | 說明 |
|---|---|
| table | 表格整體，可用於包裹多個tr |
| tr(table_rows) | 表格每行，可用於包裹td |
| td | 表格單元格，可用於包裹內容 |
| 標籤的巢狀關係：table > tr > td |
表格相關屬性
實際開發中，都是使用css改變樣式的
| 屬性名 | 屬性值 | 效果 |
|---|---|---|
| border | 數字，通常是1 | 邊框寬度 |
| width | 數字 | 表格寬度 |
| height | 數字 | 表格高度 |
表格標題和表頭單元格標籤
場景：在表格中表示整體大標題和一列小標題
| 標籤名 | 名稱 | 說明 |
|---|---|---|
| caption | 表格大標題 | 表示表格整體大標題，預設在表格整體頂部居中位置顯示 |
| th | 表頭 |
/*
注意點：
caption標籤書寫在table標籤內部
th標籤書寫在tr標籤內部(用於替換td標籤)
*/
合併單元格
/*
合併單元格步驟
1.通過左上原則，確定保留誰刪除誰
上下合併-->只保留最上的，刪除其它
左右合併-->只保留最左的，刪除其它
2.注意點：
只有同一個結構標籤中的單元格才能合併，不能跨結構標籤合併
*/| 屬性名 | 屬性值 | 說明 |
|---|---|---|
| rowspan | 合併單元格的個數 | 跨行合併，將多行的單元格垂直合併 |
| colspan | 合併單元格的個數 | 跨列合併，將多列的單元格水平合併 |
表格案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>製作網頁</title>
</head>
<body>
<table border="1">
<caption>
<strong>優秀學生資訊表</strong>
</caption>
<tr>
<th>年級</th>
<th>姓名</th>
<th>學號</th>
<th>班級</th>
</tr>
<tr>
<td rowspan="2">高三</td>
<td>張二</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<!-- 合併時候，這個不能寫 -->
<!-- <td>高三</td> -->
<td>趙四</td>
<td>120</td>
<td>三年三班</td>
</tr>
</table>
</body>
</html>表單標籤
應用場景，登入、註冊、搜尋時使用
表單標籤：input、button、select、textarea、lable
input基本使用
input是一個單標籤，表單當中的一種
input標籤，預設是不換行，要用br標籤換行
input標籤可以通過type屬性值的不同，展示不同效果
| 標籤名 | type屬性值 | 說明 |
|---|---|---|
| input | text | 文字框，用於輸入單行文字 |
| input | password | 密碼框 |
| input | radio | 單選框 |
| input | checkbox | 多選框 |
| input | file | 檔案上傳 |
| input | submit | 提交按鈕 |
| input | reset | 重置按鈕 |
| input | button | 普通按鈕，預設無功能，通常配合js新增功能 |
輸入框提示符(表單佔位符)
即：輸入框底部說明文字
<body>
<input type="text" placeholder="">
</body>單選功能和預設選中
name進行分組，才可以實現
| 屬性名 | 說明 |
|---|---|
| name | 分組，有相同name屬性的單選框為一組，一組中同時只能有一個被選中 |
| checked | 預設選中 |
<body>
男：<input type="radio" name="sex">
女：<input type="radio" name="sex" checked id="">
</body>選擇多個檔案
預設只能選擇一個檔案，用multiple屬性可選擇多個檔案
上傳檔案時，過濾檔案型別
點選上傳按鈕，調起windows時，調起檔案選擇框時，直接過濾檔案型別
屬性名稱：accept
# 使用屬性accept指定檔案型別，若過濾多個檔案型別用逗號隔開
input type="file" multiple accept=".csv, .txt">按鈕(給按鈕指定名稱，value屬性)
提交和重置，以及普通按鈕，要想實現，必須要在表單域標籤下，即:form標籤
即：用form標籤把標籤表單標籤一起包裹起來
表單域標籤的，action屬性，即要提交到哪裡(地址)
button按鈕標籤
以後直接用這個標籤的情況比較多
button按鈕可單獨作為標籤出現，就不用加在input裡面了
按鈕名稱，直接寫到
<button type=""> 按鈕的名稱</button>
# button是雙標籤，便於包裹其它內容：文字，圖片等下拉選單標籤select
select 標籤和option是父子標籤
下拉選單，預設選中第一個option，可以通過selected更改預設選中
/*
標籤所組成
select標籤：下拉選單的整體
option標籤：下拉選單的每一項
常見屬性
selected：下拉選單預設選中
*/<body>
所選城市：
<select name="" id="">
<option value="">上海</option>
<option value="" selected>杭州</option>
<option value="">深圳</option>
</select>
</body>小總結
# 表單標籤裡面有兩種預設選中，單選，多選 是使用checked進行預設選中的
# 下拉選單的預設選中，selected文字域(textarea)標籤
不用記cols，rows這兩個屬性，後面都是用css來進行設定的
場景：在網頁中提供可輸入多行文字的表單控制元件，如：描述輸入框
/*
常見屬性
cols：規定了文字域內可見寬度
rows：規定了文字域內可見行數
注意點：
右下角可以拖拽改變大小
實際可發中，使用css樣式設定
*/label標籤（擴大可點選區域）
擴大可點選區域範圍
例：性別單選項，分別點選男/女文字也可以選中
使用方法一
<!--
1.使用label標籤把內容(如：文字)包裹起來
2.在表單標籤上新增id屬性
3.在label標籤的for屬性中設定對應的id屬性值
程式碼示例-->
<input type="radio" name="sex" id="nan" checked> <label for="nan">男 </label>使用方法二
<!--
使用方法二：
1.直接使用label標籤把內容(如：文字)和表單標籤一起包裹起來
2.然後把label標籤的for屬性刪除即可
程式碼示例 -->
<label><input type="radio" name="sex">女</label>語義化標籤(div，span)
網頁佈局
div 和span是用來做網頁佈局的
div標籤：一行只顯示一個(獨佔一行)
span標籤：一行可以顯示多個
空格表示
再網頁中展示空格，用
 
HTML基礎知識彙總案例
實際工作中，以上都放在form表單標籤裡面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>製作網頁</title>
</head>
<body>
<form action="">
<h1>青春不常在，抓緊談戀愛</h1>
<hr>
暱稱：<input type="text" placeholder="請輸入暱稱">
<br>
<br>
性別：<input type="radio" name="sex" id="nan" checked> <label for="nan">男 </label>
<!-- <input type="radio" name="sex" id="nv"> <label for="nv">女</label> -->
<!--兩種增加可點選區域-->
<label><input type="radio" name="sex">女</label>
<br>
<br>
所在城市：
<select name="" id="">
<option>上海</option>
<option selected>杭州</option>
<option>項城</option>
</select>
<br>
<br>
婚姻情況：
<input type="radio" name="marriage" id="weihun"><label for="weihun">未婚</label>
<input type="radio" name="marriage" id="yihun"><label for="yihun">已婚</label>
<input type="radio" name="marriage" id="baomi"><label for="baomi">保密</label>
<br>
<br>
喜歡的型別：
<input type="checkbox" name="" id="keai"> <label for="keai">可愛</label>
<input type="checkbox" name="" id="xinggan"> <label for="xinggan">性感</label>
<input type="checkbox" name="" id="yujie"> <label for="yujie">御姐</label>
<br>
<br>
個人介紹：<br>
<textarea name="" id="" cols="30" rows="10" placeholder="請輸入個人介紹..."></textarea>
<h2>我承諾</h2>
<ul>
<li>年滿18歲、單身</li>
<li>抱著嚴肅的態度</li>
<li>真誠尋找另一半</li>
</ul>
<input type="checkbox" id="tiaoyue"> <label for="tiaoyue">我同意所有條款</label>
<br>
<!-- <button type="submit">免費註冊</button> -->
<!-- 直接寫button也行，如果寫input的話，按鈕名字，用value屬性去接收 -->
<input type="submit" value="免費註冊">
<button type="reset">重置</button>
</form>
</body>
</html>