跟狂神視訊學習HTML5筆記
阿新 • • 發佈：2022-03-09
視訊地址：https://www.bilibili.com/video/BV1x4411V75C?spm_id_from=333.999.0.0
網頁基本
ctrl+/註釋快捷鍵
<!--DOCTYPE:告訴瀏覽器，我們要使用什麼規範--> <!DOCTYPE html> <html lang="en"> <!--head標籤代表網頁頭部--> <head> <!-- meta描述性標籤，它用來描述我們網站的一些資訊--> <!-- meta一般用來做SEO--> <meta charset="UTF-8"> <meta name="keywords" content="彭宇"> <meta name="description" content="學習java"> <!-- title網頁標題--> <title>Title</title> </head> <!--body標籤代表網頁主體--> <body> hello world! </body> </html>
網頁基本標籤
標題標籤
段落標籤
換行標籤
水平線標籤
字型樣式標籤
註釋和特殊標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--標題標籤--> <h1>一級</h1> <h2>二級</h2> <h3>三級</h3> <h4>四級</h4> <h5>五級</h5> <h6>六級</h6> <!--水平線標籤--> <hr/> <!--段落標籤--> <p>如果在當前丟擲異常的方法中處理異常，可以使用try-catch語句捕獲並處理;</p> <p>否則在方法的宣告處通過throws關鍵字指明要丟擲給方法呼叫者的異常，繼續進行下一步操作</p> <!--換行標籤--> 如果在當前丟擲異常的方法中處理異常<br/> 可以使用<br/> <!--粗體，斜體--> <h1>一級</h1> 粗體：<strong>hello</strong> 斜體：<em>hello</em> <br/> <!--特殊符號--> 空格：空 格 > < © </body> </html>
影象標籤
超連結標籤
錨鏈接
功能性連結
QQ推廣官網
塊元素和行內元素
塊元素：
無論內容多少，該元素獨佔一行
(p、h1-h6...)
行內元素：
內容撐開寬度，左右都是行內元素的可以在排在一行
(a.strong.em...)
列表標籤
- 無序列表
- 有序列表
- 定義列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表學習</title> </head> <body> <!--有序列表--> <ol> <li>java</li> <li>javaweb</li> </ol> <!--無序列表--> <ul> <li>java</li> <li>javaweb</li> </ul> <!--自定義列表 dl:標籤 dt：列表名稱 dd：列表內容 公司網站底部 --> <dl> <dt>學科</dt> <dd>java</dd> <dt>位置</dt> <dd>重慶</dd> </dl> </body> </html>
表格標籤
基本結構：
- 單元格
- 行
- 列
- 跨行
- 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格學習</title>
</head>
<body>
<!--表格table
行 tr
列 td-->
<table border="1px">
<tr>
<!-- colspan跨列 -->
<td colspan="4">1-1</td>
</tr>
<tr>
<!-- rowspan跨行 -->
<td rowspan="2">2-1</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>4-3</td>
<td>5-4</td>
</tr>
</table>
</body>
</html>
媒體元素
視訊video、音訊audio
頁面結構分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面結構</title>
</head>
<body>
<header>
<h2>網頁頭部</h2>
</header>
<section>
<h2>網頁主體</h2>
</section>
<footer>
<h2>網頁尾部</h2>
</footer>
</body>
</html>
iframe內聯框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內聯框架</title>
</head>
<body>
<!--iframe內聯框架
src：地址
w-h：寬度高度-->
<iframe src="https://www.csdn.net/" frameborder="0" width="1000px" height="800px"></iframe>
<br/>
<a href="first.html" target="hello">跳轉</a>
</body>
</html>
初識表單post和get提交
get方法提交url中可以看到提交的資訊，不安全
post方法比較安全，傳輸大檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登入註冊</title>
</head>
<body>
<h1>註冊</h1>
<!--表單form
action:表單提交的位置，可以是網站，也可以是一個請求處理地址-->
<form action="first.html" method="post">
<!-- 文字輸入框：input type="text"-->
<p>名字：<input type="text" name="username"></p>
<p>密碼：<input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
文字框和單選框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登入註冊</title>
</head>
<body>
<h1>註冊</h1>
<!--表單form
action:表單提交的位置，可以是網站，也可以是一個請求處理地址-->
<form action="first.html" method="post">
<!-- 文字輸入框：input type="text"-->
<p>名字：<input type="text" name="username"></p>
<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>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
按鈕和多選框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登入註冊</title>
</head>
<body>
<h1>註冊</h1>
<!--表單form
action:表單提交的位置，可以是網站，也可以是一個請求處理地址-->
<form action="first.html" method="post">
<!-- 文字輸入框：input type="text"-->
<p>名字：<input type="text" name="username"></p>
<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="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">遊戲
</p>
<!--按鈕
input type="button"-->
<p>
<input type="button" name="btn1" value="點選變長">
<!-- 圖片按鈕-->
<input type="image" src="../resources/image/1.jpg">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
列表框文字域和檔案域
搜尋框滑塊和簡單驗證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登入註冊</title>
</head>
<body>
<h1>註冊</h1>
<!--表單form
action:表單提交的位置，可以是網站，也可以是一個請求處理地址-->
<form action="first.html" method="post">
<!-- 文字輸入框：input type="text"-->
<p>名字：<input type="text" name="username"></p>
<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="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">遊戲
</p>
<!--按鈕
input type="button"-->
<p>
<input type="button" name="btn1" value="點選變長">
<!-- 圖片按鈕-->
<input type="image" src="../resources/image/1.jpg">
</p>
<!-- 下拉框，列表框
selected：預設值
-->
<p>國家：
<select name="列表名稱">
<option value="china">中國</option>
<option value="us">美國</option>
<option value="eth" selected>瑞士</option>
<option value="yindu">印度</option>
</select>
</p>
<!--文字域
-->
<p>反饋：
<textarea name="textarea" cols="50" rows="10">文字內容</textarea>
</p>
<!-- 檔案域
-->
<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="number" max="100" min="0" step="10">
</p>
<!--滑塊-->
<p>音量：
<input type="range" min="0" max="100">
</p>
<!--搜尋框-->
<p>搜尋：
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表單">
</p>
</form>
</body>
</html>
表單的應用
- 隱藏域
- 只讀readonly
- 禁用disabled
表單初級驗證
常用方式：
- placeholder：提示資訊
- required：非空判斷
- pattern：正則表示式
HTML總結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登入註冊</title>
</head>
<body>
<h1>註冊</h1>
<!--表單form
action:表單提交的位置，可以是網站，也可以是一個請求處理地址-->
<form action="first.html" method="post">
<!-- 文字輸入框：input type="text"-->
<p>名字：<input type="text" name="username" placeholder="請輸入使用者名稱" required></p>
<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="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">遊戲
</p>
<!--按鈕
input type="button"-->
<p>
<input type="button" name="btn1" value="點選變長">
<!-- 圖片按鈕-->
<input type="image" src="../resources/image/1.jpg">
</p>
<!-- 下拉框，列表框
selected：預設值
-->
<p>國家：
<select name="列表名稱">
<option value="china">中國</option>
<option value="us">美國</option>
<option value="eth" selected>瑞士</option>
<option value="yindu">印度</option>
</select>
</p>
<!--文字域
-->
<p>反饋：
<textarea name="textarea" cols="50" rows="10">文字內容</textarea>
</p>
<!-- 檔案域
-->
<p>
<input type="file" name="files">
<input type="button" value="上傳" name="upload">
</p>
<!-- 郵件驗證
-->
<p>自定義郵箱：
<input type="text" name="deymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<!--URL-->
<p>URL：
<input type="url" name="url">
</p>
<!-- 數字-->
<p>數字：
<input type="number" name="number" max="100" min="0" step="10">
</p>
<!--滑塊-->
<p>音量：
<input type="range" min="0" max="100">
</p>
<!--搜尋框-->
<p>搜尋：
<input type="search" name="search">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表單">
</p>
</form>
</body>
</html>