html標籤

pine1203發表於2024-03-26
HTML

一. HTML

HTML 是 Hyper Text Markup Language 的縮寫，意思是超文字標記語言。它的作用是搭建網頁結構，在網頁上展示內容

二. HTML 基礎結構

  • 文件宣告：HTML檔案中第一行的內容，用來告訴瀏覽器當前 HTML 文件的ׂ基本信以及HTML文件遵循的語法標準 <!DOCTYPE html>
  • 根標籤： <html></html> 標籤是整個文件的根標籤，所有其他標籤都必須放在這對標籤裡面
  • 頭部元素：<head></head> 標籤是 <html></html> 第一個一級子標籤,用於定義文件的頭部，其他頭部元素都放在head標籤裡。頭部元素包括title߶標籤、script標籤、style߶標籤、link標籤、meta標籤等等
  • 主體元素： <body></body> 標籤是<html></html> 第二個一級子標籤,用於標籤定義網頁的主體內容，在瀏覽器視窗ӄ內顯示的內容都定義到body標籤內
  • 註釋： <!-- 註釋內容 -->

三. HTML 的語法規則

  • 根標籤是<html></html>有且只能有一個
  • 無論是雙標籤是單標籤都需要正確關閉
  • 標籤可以巢狀但不能交叉巢狀
  • 屬性必須有值，值必須加引號，HTML 5中屬性名和值相同時可以省略屬性值
  • HTML 中不嚴格區分字串使用單雙引號
  • HTML 標籤不嚴格區分大小寫，但是不能大小寫混用
  • HTML中不允許自定義標籤名，強行自定則無效

四. HTML 常見標籤

幫助文件：https://www.w3school.com.cn/

4.1 標題標籤

標題標籤一般用於在頁面上定義一些標題性的內容，如新聞標題、文章標題等，有h1到h6級標題

<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<body>

4.2 段落標籤

段落標籤一般用於定義一些在頁面上要展示的大段文字，多個段落標籤之間實現自動分段的效果：

<body>
<p>你好</p>
<p>歡迎</p>
<p>來到我的部落格</p>
</body>

4.3 換行標籤

單純實現݅換行的標籤是 br ，如果想新增分隔線，可以使用 hr 標籤：

<body>
歡迎
<br>
來到 <hr>
我的部落格
</body>

4.4 列表標籤

有序列表，分條列項展示資料的標籤，其每一項前面的符號帶有順序特徵：

<ol>
<li>JAVA</li>
<li>前端</li>
<li>大資料</li>
</ol>

無序列表，分條列項展示資料的標籤，其每一項前面的符號不帶有順序特徵：

<ul>
<li>JAVA</li>
<li>前端</li>
<li>大資料</li>
</ul>

巢狀列表
巢狀列表，列表和列表之間可以巢狀，實現某一項內容詳細展示：

<ol>
<li>
JAVA
<ul>
<li>JAVASE</li>
<li>JAVAEE</li>
<li>資料庫</li>
</ul>
</li>
<li>前端</li>
<li>大資料</li>
</ol>

4.5 超連結標籤

點選後跳轉連結標籤，也叫作a標籤：

  • href 屬性用於定義連結地址：
    href 中可以使用絕對路徑，以 / 開頭，始終以一個固定路徑作為基準路徑作為出發點
    href中也可以使用相對路徑，不以 / 開頭，以當前檔案所在路徑為出發點， . / 開頭表示當前路徑， . . /表示上一層路徑
    href中也可以使用完整的URL
  • target 用於定義連結開啟的方式
    _blank 在新視窗中開啟目標資源
    _self 在當前視窗中開啟目標資源

<body>
<a href="01html.html" target="_blank">相對路徑本地資源連線</a> <br>
<a href="/day01-html/01html的基本結構.html" target="_self">絕對路徑本地資源連線</a> <br>
<a href="http://www.cnblogs.com" target="_blank">外部資源連結</a> <br>
</body>

4.6 多媒體標籤

img 圖片標籤，用於在頁面上引入圖片：

  • src 屬性用於定義圖片的連線。
  • title 屬性用於定義滑鼠懸停時顯示的文字
  • alt 屬性用於定義圖片載入失敗時顯示的提示文字

<img src="img/logo.png" title="部落格" alt="載入失敗" />

audio 用於在頁面上引入一段聲音，video 用於在頁面上引入一段影片：

  • src 屬性用於定義目標聲音資源
  • autoplay 屬性用於控制開啟頁面時是否自動播放
  • controls 屬性用於控制是否展示控制皮膚
  • loop屬性用於控制是否進行迴圈播放

<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
<video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />

4.7 表格標籤

常規表格

  • table 標籤代表表格
  • thead 標籤代表表頭，可以省略不寫
  • tbody 標籤代表表體，可以省略不寫，瀏覽器解析DOM時會自動新增
  • tfoot 標籤代表標尾，可以省略不寫
  • tr 標籤代表一行
  • td 標籤代表行內的一格
  • th 標籤自帶加粗和居中效果的td

<h3 style="text-align: center;">成績表</h3>
<table border="1px" style="width: 400px; margin: 0px auto;">
<tr>
<th>排名</th> <th>姓名</th> <th>分數</th>
</tr>
<tr>
<th>1</th> <th>王八</th> <th>86</th>
</tr>
<tr>
<th>2</th> <th>張三</th> <th>72</th>
</tr>
<tr>
<th>3</th> <th>李四</th> <th>66</th>
</tr>
</table>

單元格跨行：

  • 透過 td 的 rowspan 屬性實現上下跨行

<h3 style="text-align: center;">成績表</h3>
<table border="1px" style="width: 400px; margin: 0px auto;">
<tr>
<th>排名</th> <th>姓名</th> <th>分數</th> <th>備註</th>
</tr>
<tr>
<td>1</td> <td>王八</td> <td>86</td>
<td rowspan="3">前三名厲害</td>
</tr>
<tr>
<td>2</td> <td>張三</td> <td>72</td>
</tr>
<tr>
<td>3</td> <td>李四</td> <td>66</td>
</tr>
</table>

單元格跨列

  • 透過 td 的 colspan 屬性實現左右的跨列

<h3 style="text-align: center;">成績表</h3>
<table border="1px" style="width: 400px; margin: 0px auto;">
<tr>
<th>排名</th> <th>姓名</th> <th>分數</th> <th>備註</th>
</tr>
<tr>
<td>1</td> <td>王八</td> <td>86</td>
<td rowspan="6">前三名厲害</td>
</tr>
<tr>
<td>2</td> <td>張三</td> <td>72</td>
</tr>
<tr>
<td>3</td> <td>李四</td> <td>66</td>
</tr>
<tr>
<td>總人數</td> <td colspan = "2">100</td>
</tr>
<tr>
<td>平均分</td> <td colspan = "2">87.3</td>
</tr>
<tr>
<td>及格率</td> <td colspan = "2">92.3%</td>
</tr>
</table>

4.8 表單標籤

表單標籤，可以實現讓使用者在介面上輸入各種資訊並提交的一種標籤，是向服務單傳送資料主要的方式之一

  • form 標籤：表單標籤，其內部用於定義可以讓使用者輸入資訊的表單項標籤
    • action 屬性：用於定義資訊提交的伺服器的地址
    • method 屬性：用於定義資訊的提交方式
      • get值： get 方式提交，資料會綴到 url 後，以 ？ 作為引數開始的標識，多個引數用 & 分隔開
      • post值： post 方式提交，資料會透過請求體傳送，不會綴到 url 後
  • input 標籤：主要的表單項標籤，可以用於定義表單項
    • name 屬性：用於定義提交的引數名
    • type 屬性：用於定義表單項型別
      • text 文字框
      • password 密碼框
      • submit 提交按鈕
      • reset 重置按鈕

<form ;action="http://www.cnblogs.com" method="get">
使用者名稱 <input type="text" name="username" /> <br>
密 碼 <input type="password" name="password" /> <br>
<input type="submit" value="登入" />
<input type="reset" value="重置" />
</form>

4.9 常見表單項標籤

單行文字框

個性簽名：<input type="text" name="signal"/><br/>

密碼框

密碼：<input type="password" name="secret"/><br/>

單選框

你的性別是：
<input type="radio" name="sex" value="boy" />男
<input type="radio" name="sex"
value="girl" checked="checked" />女

  • name 屬性相同的 radio 為一組，組內互斥
  • 當使用者選擇了一個 radio 並提交表單，這個 radio 的 name 屬性和 value 屬性組成一個鍵值對傳送給伺服器
  • 設定 checked = "checked" 屬性設定預設被選中的 radio ，如果屬性名和屬性值一樣的話，可以省略屬性值，只寫 checked 即可

核取方塊

你喜歡的球隊是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="China"
checked="checked"/>中國
<input type="checkbox" name="team" value="France"/>法國
<input type="checkbox" name="team" value="Italian"/>義大利
<input type="checkbox" name="team" value="German" checked/>德國

下拉框

你喜歡的運動是：
<select name="sport">
<option value="swimming">游泳</option>
<option value="running">跑步</option>
<option value="shooting" selected="selected">射擊</option>
<option value="skating">溜冰</option>
</select>

  • 下拉選單用到了兩種標籤，其中 select 標籤用來定義下拉選單，而option 標籤設定列表項
  • name屬性在 select 標籤中設定， value屬性在 option 標籤中設定
  • option標籤的標籤體是展示出來給使用者看的，提交到伺服器的是 value 屬性的值
  • 透過在 option 標籤中設定 selected="selected" 屬性實現預設選中的效果

按鈕

<button type="button">普通按鈕</button> 或 <input type="button" value="普通按鈕"/>
<button type="reset">重置按鈕</button> 或 <input type="reset" value="重置按鈕"/>
<button type="submit">提交按鈕</button> 或 <input type="submit" value="提交按鈕"/>

隱藏域

<input type="hidden" name="userId" value="2233"/>

  • 透過表單隱藏域設定的表單項不會顯示到頁面上，使用者看不到，但是提交表單時會一起被提交。用來設定一些需要和表單一起提交但是不希望使用者看到的資料，例如：使用者id等等

多行文字框
自我介紹：<textarea name="desc"></textarea>

  • textarea 有 value 屬性，如果要設定預設值需要寫在開始和結束標籤之間

檔案標籤

頭像:<input type="file" name="file"/>

4.10 佈局相關標籤

div 標籤： 俗稱 " 塊 "，主要用於劃分頁面結構，做頁面佈局。

span 標籤： 俗稱 " 層 "，可以用於劃分元素範圍，配合 CSS 做頁面元素樣式的修飾

<div style="width: 500px; height: 400px;background-color: cadetblue;">
<div style="width: 400px; height: 100px;
background-color: beige;margin: 10px auto;">
<span style="color: blueviolet;">頁面開頭部分</span>
</div>
<div style="width: 400px; height: 100px;
background-color: blanchedalmond;margin: 10px auto;">
<span style="color: blueviolet;">頁面中間部分</span>
</div>
<div style="width: 400px; height: 100px;
background-color: burlywood;margin: 10px auto;">
<span style="color: blueviolet;">頁面結尾部分</span>
</div>
</div>

4.11 特殊字元

對有特殊含義的字元，需要透過跳脫字元來表示，詳情見：https://www.w3school.com.cn/charsets/ref_html_8859.asp

相關文章