HTML的基本結構
阿新 • • 發佈：2022-03-02
HTML
基本結構
<!-- DOCTYPE:告訴瀏覽器，使用的規範 --> <!DOCTYPE html> <html lang="en"> <!-- head標籤代表網頁頭部 --> <head> <!-- meta描述性標籤，描述網站的一些資訊 --> <meta charset="UTF-8"> <!-- title網頁標題 --> <title>Title</title> </head> <!-- body標籤代表網頁的主體 --> <body> Hello World! </body> </html>
基本標籤
標題標籤
<h1>一級標籤</h1>
<h2>二級標籤</h2>
<h3>三級標籤</h3>
<h4>四級標籤</h4>
<h5>五級標籤</h5>
段落標籤
<p>鋤禾日當午</p>
換行標籤
鋤禾日當午<br/>
汗滴禾下土<br/>
水平線標籤
<hr/>
粗體/斜體
<!-- 粗體,斜體 --> 粗體：<strong>i love you</strong> <br/> 斜體：<em>i love you</em> <br/>
特殊符號
<!-- 空格: 不要忘記後面的封號 -->
空 格
<br/>
大於: >
<br/>
小於: <
<br/>
版權所有: ©
<br/>
影象標籤
<!--img學習 src : 圖片地址 相對地址（推薦使用）或絕對地址 (相對地址使用方法：../上一級目錄) alt : 圖片名字（必填） --> <img src="../resource/image/分散式架構.jpg" alt="java學習" title="懸停文字" width="300" height="300">
列表標籤
有序列表
<!--有序列表-->
<ol>
<li>Java</li>
<li>C++</li>
<li>Python</li>
</ol>
無序列表
<!--無序列表-->
<ul>
<li>Java</li>
<li>C++</li>
<li>Python</li>
</ul>
自定義列表
<!--自定義列表
dl:標籤
dt:列表名稱
dd:列表內容
應用範圍：公司網站底部
-->
<dl>
<dt>語言</dt>
<dd>Java</dd>
<dd>C++</dd>
<dd>Python</dd>
</dl>
表格標籤
<!--表格table
行：tr
列：td
邊框：border
-->
<!-- border表示顯示邊框 -->
<!-- 此處為一個3行5列的列表 -->
<table border="1px">
<tr>
<!-- colspan跨（5）列-->
<td colspan="5">1-1</td>
</tr>
<tr>
<!--rowspan 跨(2)行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
視訊與音訊標籤
<!--音訊和視訊
src: 資源路徑
controls: 顯示控制條
autoplay: 自動播放
-->
<video src="../resource/video/表演.mp4" controls autoplay></video>
<audio src="../resource/audio/7年.mp3"></audio>
連結標籤
普通用法跳轉頁面
<!-- a標籤
href:必填，表示要跳轉的頁面
target:表示視窗在哪裡開啟
_blank 在新標籤中開啟
_self 在自己網頁開啟
-->
<a href="FirstHtml.html" target="_blank">點選我跳轉到頁面一</a>
<br/>
<a href="https://www.baidu.com" target="_self">點選我跳轉到百度</a>
<br/>
點選圖片跳轉
<a href="FirstHtml.html">
<!-- <a/>標籤中內嵌圖片（將文字代替為圖片）
<img src="../resource/image/分散式架構.jpg" alt="java學習" title="懸停文字" width="300" height="300">
</a>
錨鏈接
<!--錨鏈接，頁面內跳轉或頁面間跳轉
1. 需要一個錨標記
2. 跳轉到標記
#
-->
<!--使用name作為標記，用於錨-->
<a name="top">頂部</a>
<!-- 點選回到頂部遍會跳轉到“頂部”位置 -->
<a href="#top">回到頂部</a>
<br/>
表單標籤
<!--表單form
action: 表單提交的位置，可以是網站，也可以是一個請求處理地址
method: post, get 提交方式
get方式提交：我們可以在url中看到我們提交的資訊，不安全，高效
post: 比較安全
-->
<form action="FirstHtml.html" method="get" value="周曉森" max>
<!--文字輸入框: input type="text"
value="周曉森" 預設初始值
maxlength="8" 最長能寫幾個字元
size="30" 文字框長度
placeholder 提示資訊
required 必填，不能為空
pattern 正則表示式判斷輸入是否正確
-->
<p>名字：<input type="text" name="username" placeholder="請輸入使用者名稱" required></p>
<!--密碼框: input type="password"-->
<p>密碼：<input type="password" name="pwd"></p>
<!--單選框標籤
input type="radio"
value: 單選框的值
name: 表示組,一樣的在一個組
-->
<p>性別:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多選框
input type="checkbox"
-->
<p>愛好：
<input type="checkbox" value="sleep" name="hobby">睡覺
<input type="checkbox" value="code" name="hobby">敲程式碼
<input type="checkbox" value="game" name="hobby">遊戲
</p>
<!--按鈕
input type="button" 普通按鈕
input type="image" 圖片按鈕
input type="submit" 提交按鈕
input type="reset" 重置按鈕
-->
<p>按鈕：
<input type="button" name="btn1" value="點選變長">
<input type="image" src="../resource/image/分散式架構.jpg">
</p>
<!--下拉框，列表框-->
<p>國家：
<select name="列表名稱">
<option value="China">中國</option>
<option value="USA">美國</option>
<option value="England" selected>英國</option>
<option value="Indian">印度</option>
</select>
</p>
<!--文字域-->
<p>反饋：
<textarea name="textarea" cols="50" rows="10">文字內容</textarea>
</p>
<!--檔案域,選擇檔案
input type="file"
-->
<p>
<input type="file" name="files">
<input type="button" value="上傳" name="upload">
</p>
<!--郵箱驗證-->
<p>郵箱：
<input type="email" name="email">
</p>
<!--URL網址-->
<p>URL:
<input type="url" name="url">
</p>
<!--數字驗證-->
<p>數字：
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑塊-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜尋-->
<p>
搜尋：
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>