html完整語法學習
阿新 • • 發佈：2021-11-20
html5內容詳解
第一個html
<!DOCTYPE html> <html lang="en"> <head> <!--meta 描述性標籤，用來描述網站的一些資訊--> <!--meta 標籤一般用來做SEO--> <meta charset="UTF-8"> <meta name="key" content="第一個網站，學html"> <meta name="description" content="學習html"> <title>第一個網站</title> </head> <body> Hello,World! </body> </html>
基本標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本標籤學習</title> </head> <body> <!--標題標籤--> <h1>一級標籤</h1> <h2>二級標籤</h2> <h3>三級標籤</h3> <h4>四級標籤</h4> <h5>五級標籤</h5> <h6>六級標籤</h6> <!--段落標籤 將文字分為一個個段落--> <p>兩隻老虎，兩隻老虎</p> <P>跑得快，跑得快</P> <P>一隻沒有眼睛</P> <P>一隻沒有尾巴</P> <P>真奇怪！真奇怪！</P> <!--水平線標籤--> <hr/> <!--換行標籤 只是換了一行，但是還是一段--> 兩隻老虎，兩隻老虎<br/> 跑得快，跑得快<br/> 一隻沒有眼睛<br/> 一隻沒有尾巴<br/> 真奇怪！真奇怪<br/> <!--粗體，斜體--> <h1>字型樣式標籤</h1> 粗體：<strong>i love you</strong> <br/> 斜體：<em>i love you</em> <br/> 粗體：<B>i love you</B> <br/> 斜體：<I>i love you</I> <br/> <hr/> <!--特殊符號--> 空 格； <br/> <!-- 代表一個空格--> 空 格 <br/> <!--> 代表大於號 <代表小於號--> > < <br/> <!--版權符號--> © </body> </html>
圖片標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片標籤</title> </head> <body> <!-- src:圖片的地址 絕對地址：使用碟符找到的檔案 D:\程式碼\HTML\resources\image\2.png 相對地址：相對於當前專案的檔案 ../resources/image/2.png ../返回上一級目錄 alt ： 如果src路徑下的檔案未找到，就用這裡名的內容替代 title ： 將滑鼠放置在這個圖片上面會顯示title裡賣弄的內容 width : 圖片顯示的寬度 height ： 圖片顯示的高度 --> <img src="../resources/image/2.png" alt="桌面桌布" title="懸停文字" width="255" height="255"> <!--從這裡可以直接跳轉到下面這個連結的down這個錨標記處--> <a href="4.連結標籤.html#down">跳轉</a> </body> </html>
連結標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>連結標籤</title>
</head>
<body>
<!--使用a標籤裡面的name屬性設定錨鏈接標記-->
<a name="top">頂部</a>
<br/>
<!--
a標籤：
href ： 必填，表示要跳轉到哪裡去
target : 表示視窗在哪裡開啟
_blank ： 在新標籤中開啟
_self : 在自己的網頁中開啟，屬於預設設定
a標籤中間填寫連結的文字或圖片
-->
<a href="1.我的第一個html.html" target="_blank">點選我跳轉到頁面一</a>
<a href="https://www.baidu.com" target="_self">點選我跳轉到百度</a>
<br/>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面桌布" title="懸停文字" width="255" height="255">
</a>
<p>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面桌布" title="懸停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面桌布" title="懸停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面桌布" title="懸停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面桌布" title="懸停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面桌布" title="懸停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面桌布" title="懸停文字" width="255" height="255">
</a>
</p>
<!--
錨鏈接 ：
1.需要一個錨標記
2.跳轉到錨標記
使用方法為 #+錨鏈接的標記名
可以實現頁面內的跳轉，，也可從一個頁面直接跳轉到錨鏈接的標記位置
-->
<a href="#top">回到頂部</a>
<a name="down">down</a>
<!--
功能性連結：
mailto:郵箱地址（可以將內容傳送到這個郵箱裡面）
QQL連結
-->
<a href="mailto:[email protected]">點選聯絡我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1713791837&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1713791837:52" alt="你好，加我領取小電影" title="你好，加我領取小電影"/>
</a>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表 ： Orderly list 顯示出有順序的結構，前邊用數字顯示順序
應用範圍：試卷，答題卡...
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>彙編</li>
<li>前端</li>
<li>編譯原理</li>
</ol>
<!--無序列表 顯示出沒有順序的結構，前邊用黑點顯示
應用範圍：導航，側邊欄...
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>彙編</li>
<li>前端</li>
<li>編譯原理</li>
</ul>
<!--自定義列表
dl : 列表標籤
dt : 列表名稱
dd : 列表內容
-->
<dl>
<dt>學科</dt>
<dd>java</dd>
<dd>linux</dd>
<dd>spring</dd>
<dd>c</dd>
<dt>位置</dt>
<dd>寧夏</dd>
<dd>西安</dd>
<dd>甘肅</dd>
</dl>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
表格 ： table
行 ： tr
列 ： td
colspan : 合併多少列為一列
rowspan : 合併多少行為一行
border : 設定邊框寬度
-->
<table border="1px">
<tr>
<td colspan="3"> 學生成績</td>
</tr>
<tr>
<td rowspan="2">小破孩</td>
<td>語文</td>
<td>100</td>
</tr>
<tr>
<td>數學</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">憨憨</td>
<td>語文</td>
<td>100</td>
</tr>
<tr>
<td>數學</td>
<td>100</td>
</tr>
</table>
</body>
</html>
視訊與音訊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素</title>
</head>
<body>
<!--視訊和音訊
controls : 控制條
autoplay : 設定視訊自動播放
-->
<video src="../resources/video/2.qlv" controls autoplay></video>
<br/>
<audio src="../resources/audio/ai.mp3" controls></audio>
</body>
</html>
頁面結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面結構</title>
</head>
<body>
<header>
<h1>網頁頭部</h1>
</header>
<section>
<h1>網頁主體</h1>
</section>
<footer>
<h1>網頁尾部</h1>
</footer>
</body>
</html>
內聯框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內聯框架</title>
</head>
<body>
<!--
iframe : 可以將src裡面的網頁內容巢狀在本網頁內
src : 連結地址
w-h : 寬和高
還可以使用name屬性：
將a標籤裡面的連結內容放置到iframe裡面
-->
<iframe src="" name="hello" width="855px" height="512px"></iframe>
<a href="https://www.bilibili.com/" target="hello">點選跳轉</a>
</body>
</html>
form表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<!--表單form
action : 提交到哪個位置，可以是網站也可以是請求處理地址
method : 提交方式，，有post與get
get方式提交，資料可以在url裡面看到，不安全，但高效
post方式提交：比較安全，能夠提交資料量較大的檔案
-->
<h1>註冊</h1>
<form action="1.我的第一個html.html" method="get">
<!--文字輸入框 ： type="text"
value="你好帥" 預設初始值
maxlength="8" 最多能輸入幾個字元
size="30" 文字框的長度
readonly 只讀
placeholder 提示的預設資訊 只能用在輸入框上
required 非空判斷，表示此欄位必須填寫 只能用在輸入框上
-->
<p>名字：<input type="text" name="userName" placeholder="請輸入使用者名稱" required> </p>
<!--密碼框 ： type="password"
hidden 隱藏，將這個框使用者看不到，但是卻是存在的，可以放置預設值
-->
<p>密碼：<input type="password" name="pwd" hidden value="123456"> </p>
<p>性別：
<!--單選框:
type="radio"
value:單選框的值
name : 表示組，name值一樣則表示為一組資料，不能同時選擇兩個
disabled : 禁用，禁止選擇男性
-->
<input type="radio" value="boy" name="sex" disabled>男
<input type="radio" value="girl" name="sex">女
</p>
<p>
<!--多選框
type="checkbox"
value:多選框的值
name : 表示組，name值一樣則表示為一組資料
-->
<input type="checkbox" value="sleep" name="hobby">睡覺
<!--checked : 預設選中-->
<input type="checkbox" value="code" name="hobby" checked>敲程式碼
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">遊戲
</p>
<p>
<!--按鈕
type="button"
name ： 按鈕名稱
value : 按鈕上顯示的內容
-->
<input type="button" name="btn1" value="點選按鈕">
<!--圖片按鈕 相當於提交按鈕-->
<input type="image" src="../resources/image/2.png" width="50px" height="50px">
</p>
<p>國家：
<!--下拉框
使用select標籤
name ：列表的名稱，後臺可以獲得列表名稱
value ： 傳到後端的值
-->
<select name="country">
<option value="china">中國</option>
<option value="usa">美國</option>
<!--selected 表示預設選擇法國-->
<option value="fa" selected>法國</option>
<option value="ying">英國</option>
</select>
</p>
<p>反饋：
<!--文字域
textarea標籤
cols : 預設顯示幾列
rows : 預設顯示幾行
-->
<textarea name="textarea" cols="30" rows="10">預設文字</textarea>
</p>
<p>
<!--檔案域-->
<input type="file" name="files">
</p>
<p>
<!--郵箱驗證 輸入的值必須新增@並且前後都有值-->
郵箱：<input type="email" name="email">
</p>
<p>
<!--url驗證 輸入的值必須是一個網址-->
url:<input type="url" name="url">
</p>
<p>
<!--數字驗證 輸入的值必須大於0小於100並且是10的倍數
max ： 最大值
min ： 最小值
step ： 步長，每次加幾
-->
數字:<input type="number" name="num" max="100" min="0" step="10">
</p>
<p>
<!--滑塊
range 標籤
可以在引數中獲取得到的多少數值
-->
滑塊：<input type="range" name="voice" min="0" max="100" step="2">
</p>
<p>
<!--搜尋框-->
搜尋:<input type="search" name="search">
</p>
<p>
<!--增強滑鼠可用性
label標籤
也就是在點選label這個標籤裡面的內容時，會自動將游標鎖定到輸入框id為for屬性裡面的內容
-->
<label for="work">你點我逝世：</label>
<input type="text" id="work">
</p>
<p>
<!--pattern 正則表示式，這裡輸入的東西必須滿足pattern的規則-->
自定義郵箱：
<input type="text" name="diyEmail"
pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<p>
<!--提交按鈕 ： type="submit" -->
<input type="submit">
<!--重置按鈕 ： type="reset"-->
<input type="reset">
</p>
</form>
</body>
</html>