HTML知識總結
阿新 • • 發佈：2021-08-30
什麼是HTML
Hyper Text Markup Language(超文字標記語言)
超文字包括：文字，圖片，音訊，視訊，動畫等
w3c標準
WOrld Wide Web Consortium(全球資訊網聯盟)
成立於1994年，Web技術領域最權威和具影響力的國際中立性技術標準機構
W3C標準包括
-
結構化標準語言（HTML、XML）
-
表現標準語言（CSS）
-
行為標準（DOM、ECMAScript）
<!--告訴瀏覽器，我們要是用什麼規範 -->
網頁基本標籤
-
標題標籤 <title> 標題</title>
-
段落標籤 <p>一段話</p>
-
換行標籤 一句話<br/>
-
水平線標籤 <hr/>
-
字型樣式標籤 粗體 粗體 斜體 <s></s> <i></i>
-
註釋和特殊符號 <!-- 註釋-->
<!--特殊符號-->
空 格：
大於號>
小於號<
©版權符號
影象標籤
常見的影象格式
JPG
GIF
PNG
BMP
<img src="../resources/image/1.jpg" alt="我的圖片" title="懸停文字" width="1366" height="768">
<!--img學習
src:圖片地址
相對地址（推薦使用），絕對地址
../返回上一級目錄 -->
alt 圖片載入失敗會顯示的內容“”。
連結標籤
<!-- a標籤
href：必填，表示要跳轉到那個頁面
target：表示視窗在那裡開啟
_blank 在新標籤中開啟
_self 在自己的網頁中開啟
-->
超連結
頁面間連結
從一個頁面連結到另一個頁面
錨鏈接
功能性連結
<body>
<!--使用name作為標記-->
<a name="top">頂部</a>
<!-- a標籤
href：必填，表示要跳轉到那個頁面
target：表示視窗在那裡開啟
_blank 在新標籤中開啟
_self 在自己的網頁中開啟
-->
<a href="https://www.baidu.com" target="_blank">點選調轉到百度
<img src="../resources/image/1.jpg" alt="圖片載入失敗">
</a>
<!--錨鏈接
1.需要一個錨標記
2.跳轉到標記-->
<a href="#top">回到頂部</a>
<a name="down">底部</a>
<!--功能性連線
郵件連線：mailto
QQ連結-->
<a href="mailto:[email protected]">點選聯絡我</a>
</body>
</html>
行內元素和塊元素
塊元素：無論內容有多少，元素自己獨佔一行
例如：<p></p><hr/> <h1>
行內元素：內容撐開寬度，左右都是行內元素的可以排在一行
例如：<a><strong><em>
列表標籤
什麼是列表
列表就是資訊資源的一種展示形式。它可以使資訊結構化和條理化，並以列表的樣式顯示出來，以便瀏覽者能更快捷地獲得相應的資訊。
列表的分類：
-
無序列表
-
有序列表
-
定義列表
表格
視訊和音訊
<title>視訊和音訊學習</title>
</head>
<body>
<!--音訊和視訊
src：資源路徑
controls：控制調
autoplay：自動播放-->
<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/3.mp3" controls autoplay></audio>
</body>
</html>
<title>頁面結構分析</title>
</head>
<body>
<header>
<h2>網頁頭部</h2>
</header>
<section>
<h2>網頁主體</h2>
</section>
<footer>
<h2>網頁尾步</h2>
</footer>
<!--導航 nav-->
<nav></nav>
</body>
</html>
iframe內聯框架
<title>內聯框架iframe</title> </head> <body> <!--iframe內聯框架 src：地址 w-h：寬，高--> <iframe src="" name="change" frameborder="0" width="1000" height="800">點選跳轉學習java</iframe> <a href="https://www.baidu.com" target="change" >點選跳轉</a> </body> </html>
表單
<html><head> <title>表單學習</title>
</head>
<body>
<h1>註冊</h1>
<!--表單form
action:表單提交的位置，可以是網站，也可以是一個請求處理地址
method:post，get 提交方式
get方式提交：我們可以在url中看到我們提交的資訊，不安全，但高效
post：比較安全，傳輸大檔案-->
<form action="10.表單.html" method="post">
<!--文字輸入框 Input type="text" submit提交按鈕 reset重置按鈕 -->
<p>名字：<input type="text" name="username"/></p>
<p>密碼：<input type="password" name="pwd"/></p>
<p><input type="submit">
<input type="reset"></p>
</form>
<title>表單學習</title>
</head>
<body>
<h1>註冊</h1>
<!--表單form
action:表單提交的位置，可以是網站，也可以是一個請求處理地址
method:post，get 提交方式
get方式提交：我們可以在url中看到我們提交的資訊，不安全，但高效
post：比較安全，傳輸大檔案-->
<form action="10.表單.html" method="post">
<!--文字輸入框 Input type="text" name 輸入框的名字
value 預設一個初始化值
maxlength 文字框最大輸入字元
size 文字框長度
submit提交按鈕 reset重置按鈕
-->
<p>名字：<input type="text" name="username" value="帥" maxlength="8" size="10"/></p>
<p>密碼：<input type="password" name="pwd"/></p>
<!--單選框按鈕 name必須為一致，才能表示為同一組，才能只選擇一個
input標籤 型別是radio時，必須有value-->
<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>
單選框多選框
<!--單選框按鈕 input type="radio" name必須為一致，才能表示為同一組，才能只選擇一個
input標籤 型別是radio時，必須有value
checked 預設選中-->
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl"name="sex">女
<!-- 多選框標籤 input type="checkbox" -->
<input type="checkbox" value="sleep" name="hobby"/>睡覺
<input type="checkbox" value="talk" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby" checked/>遊戲
<input type="checkbox" value="eat" 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="resources/image/1.jpg"/>
</p>
<p><input type="submit">
<input type="reset"></p>
下拉框
<!--下拉框 列表框
<select>
name是下拉框的名字
option value 是下拉框可以選擇的值
selected是預設為那個列
-->
<p>國家
<select name="列表名稱" >
<option value="china" selected>中國</option>
<option value="us">美國</option>
<option value="agt">阿根廷</option>
<option value="md">緬甸</option>
</select>
</p>
文字域、檔案域
<!-- 文字域
cols="30" rows="10" 行，，，列
-->
<p>反饋：<textarea name="textarea" cols="30" 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><input type="url" name="url"></p>
<!-- 數字驗證
max最大數量
min 最小數量
step 每次點選增加或減少的數量-->
<p><input type="number" name="num" max="100" min="1" step="1"></p>
<!--滑塊-->
<p>音量<input type="range" name="voice" max="100" min="0" step="2" ></p>
<!-- 搜尋框-->
<p><input type="search" name="search"></p>
表單的應用
只讀：value="admin"（先給一個預設值） readonly
禁用：disabled
隱藏：hidden
單詞：description 描述 content內容
<!-- 增強滑鼠可用性-->
<p> <lable for="mark">點選</lable>
<input type="text" id="mark"/>
</p>
表單初級驗證
placeholder="請輸入使用者名稱"<!--提示屬性--> required 非空判斷 pattern 正則表示式
基礎彙總
<!--告訴瀏覽器使用的規範-->