HTML（一文完結，超詳細超簡單！）
文章目錄
1 HTML概述
Hyper Text Markup Language（超文本標記語言）
超文本包括：文字、圖片、音頻、視頻、動畫等
W3C標準包括：
- 結構化標準語言（HTML、XML）
- 表現標準語言（CSS）
- 行爲標準（DOM、ECMAScript）
結構：
<!-- DOCTYPE: 告訴瀏覽器，我們要使用什麼規範-->
<!DOCTYPE html>
<html lang="en">
<!-- head 標籤代表網頁頭部 -->
<head>
<!-- meta描述標籤，它用來描述我們網站的一些信息 -->
<!-- meta 一般用來做SEO -->
<meta charset="UTF-8">
<meta name="keywords" content="Demut學習HTML">
<meta name = "discription" content="正在學習！">
<!-- title 網頁標題 -->
<title>Hello world!</title>
</head>
<!-- body 標籤代表網頁主體 -->
<body>
</body>
</html>
2 網頁基本標籤
2.1 文字標籤
可參照以下代碼！
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>基本標籤學習</title>
</head>
<body>
<!-- 標題標籤 -->
<h1>一級標籤</h1>
<h2>二級標籤</h2>
<h3>三級標籤</h3>
<h4>四級標籤</h4>
<h5>五級標籤</h5>
<h6>六級標籤</h6>
<!-- 段落標籤 -->
<p>Mary had a little lamb</p>
<p>Little lamb, little lamb.</p>
<p>Mary had a little lamb.</p>
<p>Its fleece was white as snow.</p>
<!-- 水平線標籤 -->
<hr/>
<!-- 換行標籤 -->
Mary had a little lamb <br/>
Little lamb, little lamb.<br/>
Mary had a little lamb.<br/>
Its fleece was white as snow<br/>
<!-- 粗體、斜體 -->
<h3>字體樣式標籤</h3>
粗體： <strong>i love you</strong>
斜體： <em>i love you</em>
<br/>
<!-- 特殊符號 idea中有提示！-->
空 格：（在html中多個空格僅能輸出一個空格） <br/>
空 格
<br/>
>
<br/>
<
<br/>
©版權所有Demut！
<br/>
</body>
</html>
運行結果：
2.2 圖像標籤
常見的圖像格式：
- JPG、GIF、PNG、BMP （前三種最爲常用）
代碼展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖像標籤學習</title>
</head>
<body>
<!-- img 學習
src: 圖片地址
相對地址，絕對地址
../ --上一級目錄 (推薦使用相對)
alt: 圖片名字 （必填） 當圖片未正常顯示時，顯示名字！
title：設置懸停文字
-->
<img src="../resource/image/img1.png" alt="山水" title="這是懸停文字">
</body>
</html>
運行結果：
2.3 鏈接標籤
- 文本超鏈接
- 圖像超鏈接
代碼展示：
本例展示文本鏈接、圖片鏈接、錨鏈接、功能性鏈接（郵件鏈接）的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈接標籤學習</title>
</head>
<body>
<!-- 使用name標記 -->
<a name="top">頂部！</a>
<br/>
<a href="#down">點擊跳轉到底部</a>
<!-- a標籤
href： 必填：表示要跳轉到哪個頁面
target: 表示窗口在哪裏打開, 使用_blank表示在新頁面打開；使用_self表示在自己頁面打開
-->
<a href="基本標籤.html" target="_blank">點擊我跳轉到頁面一</a>
<a href="http://www.bing.com" target="_self">點擊我跳轉到必應</a>
<br/>
<a href="基本標籤.html">
<img src="../resource/image/img1.png" alt="山水圖" title="圖片鏈接">
</a>
<img src="../resource/image/img1.png" alt="山水圖" title="懸停文字">
<img src="../resource/image/img1.png" alt="山水圖" title="懸停文字">
<img src="../resource/image/img1.png" alt="山水圖" title="懸停文字">
<img src="../resource/image/img1.png" alt="山水圖" title="懸停文字">
<img src="../resource/image/img1.png" alt="山水圖" title="懸停文字">
<img src="../resource/image/img1.png" alt="山水圖" title="懸停文字">
<img src="../resource/image/img1.png" alt="山水圖" title="懸停文字">
<img src="../resource/image/img1.png" alt="山水圖" title="懸停文字">
<img src="../resource/image/img1.png" alt="山水圖" title="懸停文字">
<img src="../resource/image/img1.png" alt="山水圖" title="懸停文字">
<img src="../resource/image/img1.png" alt="山水圖" title="懸停文字">
<img src="../resource/image/img1.png" alt="山水圖" title="懸停文字">
<img src="../resource/image/img1.png" alt="山水圖" title="懸停文字">
<br/>
<!-- 錨連接
1. 設置一個標記
2. 跳轉到標記
#
-->
<a href="#top">跳轉到頂部！</a>
<br/>
<a name="down">底部！</a>
</body>
<!-- 功能性鏈接
郵件鏈接： mailto:
-->
<a href="maito:[email protected]">點擊聯繫我</a>
</html>
運行結果：
2.4 行內元素和塊元素
-
塊元素
- 無論內容多少，該元素獨佔一行
- （p、h1-h6…）
-
行內元素
- 內容撐開寬度，左右都是行內元素的可以排在一行
- （a. strong. em）
2.5 列表
- 無序列表（標籤爲ul，內含li）
- 有序列表（標籤爲ol，內含li）
- 自定義列表（標籤爲dl， 內含dt，dd）
代碼展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表學習</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>Java</li>
<li>Python</li>
<li>運維</li>
<li>C/C++</li>
</ol>
<hr>
<!-- 無序列表 -->
<ul>
<li>Java</li>
<li>Python</li>
<li>運維</li>
<li>C/C++</li>
</ul>
<hr>
<!-- 自定義列表
dl: 標籤
dt: 列表名稱
dd： 列表內容
-->
<dl>
<dt>學科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>運維</dd>
<dd>C/C++</dd>
<dt>分數</dt>
<dd>100</dd>
<dd>99</dd>
<dd>98</dd>
<dd>89</dd>
<dd>100</dd>
</dl>
</body>
</html>
運行結果:
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-sqbF4nQh-1584549119012)(/Users/demut/Library/Application Support/typora-user-images/image-20200318202332384.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200319003407770.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTU4MTcy,size_16,color_FFFFFF,t_70)
2.6 表格標籤
表格基本結構： 單元格、行（tr）、列（td）、跨行（colspan）、跨列（rowspan）。
代碼展示：
<!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-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
運行結果：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CUKWSXXA-1584549119014)(/Users/demut/Library/Application Support/typora-user-images/image-20200318203333179.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200319003348569.png)
2.7 視頻和音頻
- 視頻元素 video
- 音頻元素 audio
代碼展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素學習</title>
</head>
<body>
<!-- 音頻和視頻
controls: 控制開關
autoplay: 自動播放
-->
<video src="../resource/video/190318231014076505.mp4 "controls autoplay></video>
<audio src="../resource/audio/広橋真紀子 - いのちの名前.mp3" controls autoplay></audio>
</body>
</html>
運行結果：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bzeSRdZu-1584549119014)(/Users/demut/Library/Application Support/typora-user-images/image-20200318213617157.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200319003338623.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTU4MTcy,size_16,color_FFFFFF,t_70)
3 頁面結構分析
| 元素名 | 描述 |
|---|---|
| header | 標題頭部區域的內容（用於頁面或頁面中的一塊區域） |
| footer | 標記腳步區域的內容（用於整個頁面或頁面的一塊區域） |
| section | Web頁面中俄一塊獨立區域 |
| article | 獨立的文章內容 |
| aside | 相關內容或應用（常用於側邊欄） |
| nav | 導航類輔助內容 |
4 內聯框架
使用iframe
代碼展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內聯框架</title>
</head>
<body>
<!-- iframe內聯框架
src： 地址
width： 寬度
height： 高度
name: 框架標示名
-->
<iframe src="http://www.bing.com" frameborder="0" name="hello" width="550px" height="500px"></iframe>
<a href="圖像標籤.html" target="hello">點擊跳轉</a>
</body>
</html>
運行結果：
5 表單
5.1 初識表單
廢話不多說，看圖！
結果：
5.2 表單元素格式
| 屬性 | 說明 |
|---|---|
| type | 指定元素的類型。text, password, checkbox, radio, submit, reset, file, hidden image 和 button, 默認爲text |
| name | 指定表單元素的名稱 |
| value | 元素初始值。type爲radio時必須制定一個值 |
| size | 指定表單元素的初始寬度。當type爲text或password時，表單元素的大小以字符爲單位。對於其他類型，寬度以像素爲單位 |
| maxlength | type爲text或password時，輸入的最大字符數 |
| cheked | type爲radio或checkbox時，指定按鈕是否是被選中 |
5.3 表單代碼展示:
本例展示：
- 表單的創建與設置（form）
- 單選框標籤的使用（radio）
- 多選框標籤的使用（checkbox）
- 按鈕的使用，包括普通按鈕、圖片按鈕、提交、重置按鈕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單展示</title>
</head>
<body>
<h1>註冊</h1>
<!-- 表單form
action: 表單提交的位置，可以是網站，也可以是一個請求處理地址
method：post，get提交方式
get方式提交：可以在url中看到提交的信息，不安全
post：比較安全，可傳輸大文件
-->
<form method="post" action="Hello%20world.html">
<!-- 文本輸入框：
input type="text"
maxlength="8" 最長能寫的字符長度
value="Demut" 默認初始值
size="30" 文本框長度
-->
<p>名字：<input name="username" type="text"></p>
<p>密碼：<input name="pwd" type="password"></p>
<p>
<input type="submit" name="Button" value="提交">
<input type="reset" name="Reset" value="重置">
</p>
<!-- 單選框標籤
input type="radio"
value： 單選框的值
name： 表示組
-->
<p>性別：
<input type="radio" value="male" name="gender">男
<input type="radio" value="female" name="gender">女
</p>
<!-- 多選框
input type="checkbox"
-->
<p>愛好：
<input type="checkbox" value="sleep" name="hobby">睡覺
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="code" name="hobby">代碼
<input type="checkbox" value="study" name="hobby">學習
</p>
<!-- 按鈕
input type="button" 普通按鈕
input type="image" 圖片按鈕，點擊可提交
input type="submit" 提交按鈕
input type="reset" 重置按鈕
-->
<p>按鈕：
<!-- 普通按鈕 -->
<input type="button" name="btn1" value="點擊展示">
<!-- 圖片按鈕 -->
<br/>
<input type="image" src="../resource/image/img1.png">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表單">
</p>
</form>
</body>
</html>
結果展示：
6 文本文件域/搜索框/滑塊/驗證
| 屬性 | 實現語句 |
|---|---|
| 下拉框 | select |
| 文本域 | textarea |
| 文件域 | input type=“file” |
| 郵箱驗證 | input type=“email” |
| URL驗證 | input type=“url” |
| 數字驗證 | input type=“number” |
| 滑塊 | input type=“range” |
| 搜索框 | input type=“search” |
代碼展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本文件域/搜索框</title>
</head>
<body>
<form action="Hello%20world.html">
<!--下拉框
select
selected 表示默認選中
-->
<p>下拉框：
<select name="列表名稱">
<option value="China">中國</option>
<option value="US" selected>美國</option>
<option value="RS">瑞士</option>
<option value="India">印度</option>
</select>
</p>
<!--文本域
textarea
cols="30" rows="20"
-->
<p>反饋：
<textarea name="textarea" id="" cols="30" rows="8">文本內容</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="num" max="100" min="0" step="1">
</p>
<!--滑塊-->
<p>音量：
<input type="range" name="range" min="0" max="100" step="1">
</p>
<!--搜索框-->
<p>搜索：
<input type="search">
</p>
<input type="submit" value="提交" >
<input type="reset" value="重置">
</form>
</body>
</html>
運行結果：
7 表單的應用及驗證
7.1表單的應用
- 隱藏域 （hidden）
- 只讀標籤 （readonly）
- 禁用標籤 （disable）
代碼展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單的應用</title>
</head>
<body>
<form action="Hello%20world.html">
<p>名字：<input name="username" type="text" value="admin" readonly></p>
<p>密碼：<input name="pwd" type="password" hidden></p>
<p>性別：
<input type="radio" value="male" name="gender" disabled>男
<input type="radio" value="female" name="gender" >女
</p>
<p>
<input type="submit" name="Button" value="提交" disabled>
<input type="reset" name="Reset" value="重置">
</p>
</form>
</body>
</html>
運行結果：
7.2 表單的初級驗證
常用方式：
- placeholder：提示信息
- required：非空判斷
- pattern：正則表達式
代碼展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單的簡單驗證</title>
</head>
<body>
<form action="Hello%20world.html">
<!--
placeholder：提示信息
required：非空判斷
pattern：正則表達式
-->
<p>名字：<input name="username" type="text" placeholder="請輸入用戶名" required></p>
<p>密碼：<input name="pwd" type="password" placeholder="請輸入密碼" required></p>
<p>性別：
<input type="radio" value="male" name="gender">男
<input type="radio" value="female" name="gender" >女
</p>
<p>
<!-- 增強鼠標可用性 -->
<label for="mark">你點我一下！</label>
<input type="text" id="mark">
</p>
<p>自定義郵箱：
<!--正則表達式速查網站：
http://www.jb51.net/tools/regexsc.htm
-->
<input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>
<p>
<input type="submit" name="Button" value="提交">
<input type="reset" name="Reset" value="重置">
</p>
</form>
</body>
</html>
運行結果：
8 HTML流程圖總結
畫了一個思維導圖，可以輔助把握整個html內容！
寫在最後
Hope you like bubbles out of troubles!
You will be blest!To Demut and Dottie!