《極限競速：地平線4》冬季賽即將打響
阿新 • • 發佈：2021-07-16
HTML5；標籤；行內元素和塊元素；列表；表格；視訊和音訊；頁面結構；iframe內聯框架；表單
@(前端基礎)[馬克飛象, Markdown, 自主學習, 計算機]
HTML5
1. 初識HTML
HTML：Hyper Text Markup Language（超文字標記語言）
1.1 W3C標準
* W3C * World Wide Web Consortium（全球資訊網聯盟） * 成立於1994年，Web技術領域最權威和具影響力的國際中立性技術標準機構 * http://www.w3.org/ * http://www.chinaw3c.org/ * W3C標準包括 * 結構化標準語言（HTML、XML） * 表現標準語言（CSS） * 行為標準（DOM、ECMAScript）
1.2 HTML基本結構
<!--!DOCTYPE:告訴瀏覽器，我們要使用什麼規範--> <!DOCTYPE html> <html lang="en"> <head> <!-- meta:描述性標籤，他用來描述我的網站的一些資訊--> <meta charset="UTF-8"> <meta name="keywords" content="HTML"> <meta name="description" content="前端基礎"> <title>Title</title> </head> <body> </body> </html>
2. 標籤
2.1 網頁標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本標籤學習</title> </head> <body> <!--標題標籤--> <h1>一級標籤</h1> <h2>二級標籤</h2> <h3>三級標籤</h3> <!--段落標籤——快捷方式：p + Tab--> <p>故事的小黃花</p> <p>從出生那年就飄著</p> <p>童年的盪鞦韆</p> <!--水平線標籤——自閉合標籤--> <hr/> <!--換行標籤——自閉合標籤--> 故事的小黃花<br/> 從出生那年就飄著<br/> 童年的盪鞦韆<br/> <!--粗體，斜體--> <h1>字型樣式標籤</h1> <p><strong>I love you!</strong></p> <p><em>I love you!</em></p> <br/> <!--特殊符號——& ;（查百度）--> 空格 <br/> 大於><br/> 小於<<br/> 版權所有©<br/> </body> </html>
2.2 影象標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>影象標籤</title>
</head>
<body>
<!--img 學習
src：圖片地址
相對地址，絕對地址
../ 上一級標籤
-->
<img src="../resources/img/1.jpg" alt="圖片載入失敗文字" title="圖片懸浮文字" height="1011" width="2000">
</body>
</html>
2.3 連結標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>連結標籤</title>
</head>
<body>
<!--使用name作為標記-->
<a name="top"></a>
<!--a標籤
href（必填）：表示要跳轉到的頁面
_blank：在新標籤中開啟
_self：在自己的網頁開啟
-->
<a href="https:www.baidu.com" target="_blank">百度</a><br/>
<a href="MyWeb02.html">
<img src="Image.png" alt="圖片載入失敗文字" title="圖片懸浮文字" height="1011" width="2000">
</a><br/>
<!--錨鏈接（可以跨檔案使用）
1.需要一個錨標記
2.跳轉到標記 #
-->
<a href="#top">回到頂部</a>
<a name="bottom" ></a>
<!--功能性連結
郵件連結：mailto
QQ連結：QQ推廣（圖片載入不出在兩個冒號之間寫上QQ號）
-->
<a href="mailto:[email protected]">聯絡我們</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1346438693:52" alt="聯絡我們" title="聯絡我們"/>
</a>
</body>
</html>
3. 行內元素和塊元素
* 塊元素
* 無論內容多少，該元素獨佔一行
* p、h1 - h6...）
* 行內元素
* 內容撐開寬度，左右都是行內元素的可以排在一行
* （a、strong、em ....）
4. 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表學習</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>Java</li>
<li>Python</li>
<li>前端</li>
</ol>
<hr/>
<!--無序列表-->
<ul>
<li>Java</li>
<li>Python</li>
<li>前端</li>
</ul>
<hr/>
<!--自定義列表
dl；標籤
dt：列表名稱
dd：列表內容
-->
<dl>
<dt>計算機</dt>
<dd>Java</dd>
<dd>Python</dd>
<dt>學科</dt>
<dd>數學</dd>
<dd>英語</dd>
</dl>
</body>
</html>
5. 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格標籤</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<table border="1px">
<tr>
<!-- 跨行colspan-->
<td colspan="3">學生成績</td>
</tr>
<tr>
<!-- 跨列rowspan-->
<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>
6. 視訊和音訊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音訊和視訊</title>
</head>
<body>
<!--音訊和視訊
src：資源路徑
controls：控制條
autoplay：自動播放（谷歌會限制自動播放）
-->
<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/1.mp3" controls ></audio>
</body>
</html>
7. 頁面結構分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網頁結構分析</title>
</head>
<body>
<header>
<h2>網頁頭部</h2>
</header>
<section>
<h2>網頁主體</h2>
</section>
<article>
<h2>獨立文章</h2>
</article>
<aside>
<h2>側邊欄</h2>
</aside>
<footer>
<h2>網頁尾部</h2>
</footer>
<nav>
<h2>導航欄</h2>
</nav>
</body>
</html>
8. iframe內聯框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe內聯框架</title>
</head>
<body>
<!--iframe內聯框架
name
-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="1000px" name="hello"></iframe>
<a href="MyWeb03.html" target="hello">點我跳轉</a>
</body>
</html>
9. 表單
9. 1 表單語法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單學習</title>
</head>
<body>
<h1>註冊</h1>
<!--表單
action：表單提交的位置，可以是網站，也可以是請求處理地址
method：post，get 提交方式
get方式提交：我們可以在URL中看到我們提交的資訊，不安全，高效
post：比較安全，傳輸大檔案
-->
<form action="MyWeb01.html" method="get">
<!-- 文字輸入框
value="Jay" 預設初始值
maxlength="8" 最長能寫的字元個數
size="30" 文字框長度
-->
<p>名字： <input type="text" name="username"></p>
<!-- 密碼框-->
<p>密碼：<input type="password" name="password"></p>
<!-- 單選框標籤
name：表示組
value：單選框的值
-->
<p>性別：
<input type="radio" value="boy" name="性別" checked>男
<input type="radio" value="girl" name="性別">女
</p>
<!-- 複選框-->
<p>愛好：
<input type="checkbox" value="sleep" name="hobby" checked>睡覺
<input type="checkbox" value="code" name="hobby">敲程式碼
<input type="checkbox" value="game" name="hobby">遊戲
</p>
<!-- 按鈕-->
<input type="button" name="button1" value="get">
<input type="image" src="../resources/image/五五開黑節.jpg" alt="五五開黑節">
<p>
<input type="submit">
<input type="reset">
</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="num" max="100" min="0" step="10">
</p>
<!-- 滑塊-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="3">
</p>
<!-- 搜尋框-->
<input type="search" name="search">
<!-- 下拉框-->
<p>國家：
<select name="列表名稱" id="dialog-publisher-value">
<option value="China">中國</option>
<option value="USA">美國</option>
<option value="Switzerland">瑞士</option>
<option value="Japan" selected>日本</option>
</select>
</p>
<!-- 文字域-->
<p>反饋：
<textarea name="feedback" id="bottom-text" cols="50" rows="10">文字內容</textarea>
</p>
</form>
</body>
</html>
9. 2 表單應用
* readonly ：只讀
* hidden：隱藏
* disabled：禁用
<!-- 增強滑鼠可用性：點選文字定位到對應文字框-->
<p>
<label for="mark">你點我試試</label>
<input type="text" id="mark">
</p>
9.3 表單初級驗證
* placeholder：資訊提示語（輸入框控制元件）
* required：非空判斷（輸入框控制元件）
* pattern：正則表示式