1.網頁SEO
<!DOCTYPE html>
<html lang="zh">
<!--
< body >、< /body>等成對的標簽，分別叫做開放標簽和閉合標簽
單獨呈現的標簽（空元素），如< hr/ >;意為用/來關閉空元素
-->
<!-- 網頁頭部 -->
<head>
<meta charset="UTF-8">
<meta name="keywords" content="totoroBlog,Python,軟件測試">
<meta name="description" content="totoro的博客，歡迎訪問">
<title>SEO與網頁整體結構</title>
</head>
<!-- 網頁主體 -->
<body>
Hello,World!
</body>
</html>
2.基本標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 用做網站SEO -->
<meta name="keywords" content="totoroBlog,Python,軟件測試">
<meta name="description" content="totoro的博客，歡迎訪問">
<title>基本標簽</title>
</head>
<body>
<!-- 標題標簽 -->
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<!-- 段落標簽 -->
<p>第一段落</p>
<p>第二段落</p>
<!-- 換行標簽 -->
<!-- 換行標簽比較緊湊，段落標簽有明顯段落間距-->
准備換行，這是行尾<br>新行開頭<br>
<hr>
<!-- 水平線標簽 -->
華麗的分隔符
<hr>
<!-- -->
<!-- 粗體、斜體、粗斜體 -->
<strong>I Love You</strong>
<em>I Love You</em>
<strong><em>I Love You</em></strong>
<!-- 特殊符號 -->
<br>特殊符號:<br>
空格：1 2 3 4 5 <br>
手動空格：1 2 3 4 5<br>
大於號：><br>
小於號：<<br>
版權符號：totoroBlog©2020<br>
</body>
</html>
3.圖像標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圖像標簽</title>
</head>
<body>
<!-- 圖像標簽 -->
<!--
src:資源地址
相對地址，絕對地址
../上級地址
alt：在圖片加載失敗的時候，就會用文字代替
title:鼠標懸停在圖片上時，所顯示的名字
width height: 圖片的高和寬
-->
<img src="./src/img/微信圖片_20201224160900.jpg" alt="~_~😫,圖片被吞掉了" title="你旺我旺大家旺">
<img src="./src/img/xxx.jpg" alt="~_~😫,圖片被吞掉了">
<img src="./src/img/微信圖片_20201224160900.jpg" alt="~_~😫,圖片被吞掉了" width="128" height="128">
</body>
</html>
4.鏈接標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鏈接標簽</title>
</head>
<body>
<!--
鏈接標簽：
href：跳轉頁面的地址
a標簽內文字：即顯示的文字
可以把圖片放在a標簽內，點擊圖片跳轉網頁
title：鏈接描述
target:表示在哪打開新網頁。_self:當前標簽打開 _blank:新的頁面中打開
-->
<a name="top">這是頂部</a>
<a href="https://www.baidu.com" target="_blank" title="百度一下">百度一下</a>
<br>
<a href="https://www.baidu.com"><img src="./src/img/baidu.png" alt="🤣圖片不見了" title="百度一下"></a>
<br>
<a href="https://www.baidu.com"><img src="./src/img/baidu.png" alt="🤣圖片不見了" title="百度一下"></a>
<br>
<a href="https://www.baidu.com"><img src="./src/img/baidu.png" alt="🤣圖片不見了" title="百度一下"></a>
<br>
<a href="https://www.baidu.com"><img src="./src/img/baidu.png" alt="🤣圖片不見了" title="百度一下"></a>
<br>
<a href="https://www.baidu.com"><img src="./src/img/baidu.png" alt="🤣圖片不見了" title="百度一下"></a>
<!-- 錨標簽 -->
<br>
<a href="#top">回到頂部</a>
<!-- 也可以在網址后添加#號跳到對應網站的對應位置 -->
<a href="http://www.cyc2018.xyz/#java">Cyc2018#Java</a>
<!-- 功能性鏈接 -->
<a href="mailto:957584602@qq.com">郵箱聯系</a>
<!-- QQ鏈接 -->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=957584602&site=qq&menu=yes"><img border="0"
src="http://wpa.qq.com/pa?p=2:957584602:53" alt="點擊這里給我發消息" title="點擊這里給我發消息" /></a>
<!-- 總結 -->
<!-- 塊元素:無論內容多少，該元素獨占一行
p hr h1~h6
行內元素:內容撐開寬度，左右都是行內元素的可以排在一行
a strong em
-->
</body>
</html>
5.列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>Python</li>
<li>Java</li>
<li>C++</li>
</ol>
<!-- 無序列表 -->
<ul>
<li>Python</li>
<li>Java</li>
<li>C++</li>
</ul>
<!-- 無序列表嵌套 -->
<ul>
<li>Python
<ul>
<li>基礎部分</li>
<li>高級部分</li>
</ul>
</li>
<li>Java
<ul>
<li>JavaSE</li>
<li>JavaEE</li>
</ul>
</li>
</ul>
<!-- 自定義列表 -->
<!--自定義列表
dl：標簽
dt：列表名稱
dd：列表內容
-->
<dl>
<dt>學科</dt>
<dd>語文</dd>
<dd>數學</dd>
<dd>英語</dd>
</dl>
</body>
</html>
6.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td
-->
<table border="1px">
<tr>
<!-- 跨行 -->
<td rowspan="2">1-1</td> <!-- 1-1跨兩行 -->
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<!-- 跨列 -->
<td colspan="2">2-1</td> <!-- 2-1跨兩列 -->
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
7.媒體元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素</title>
</head>
<body>
<!-- 視頻元素 -->
<!--視頻
src 資源路徑
controls 控制面板
autoplay 自動播放
-->
<video src="./src/video/腦電數據相似度比對.mp4" controls width="800" height="600"></video>
<!-- 音頻元素 -->
<audio src="./src/audio/久石讓 - 天空の城ラピュタ (天空之城).mp3" controls></audio>
</body>
</html>
8.頁面結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面結構</title>
</head>
<body>
<!--
header 標題頭部區域的內容（用於頁面或者頁面中的一塊區域）
footer 標記腳部區域的內容（用於整個頁面或頁面的一塊區域）
section Web頁面中的一塊獨立區域
article 獨立的文章內容
aside 相關內容或應用
nav 導航類輔助內容
-->
<header>
<h1>網頁頭部</h1>
</header>
<section>
<h2>獨立區域</h2>
</section>
<footer>
<h3>網頁腳部</h3>
</footer>
</body>
</html>
9.內聯框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內聯框架</title>
</head>
<body>
<iframe src="https://www.baidu.com" frameborder="0" width="800" height="600"></iframe>
<!-- bilibili視頻分享 -->
<iframe src="//player.bilibili.com/player.html?aid=885854372&bvid=BV19K4y1V7QJ&cid=270583162&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="800" height="600">
</iframe>
<iframe src="//player.bilibili.com/player.html?aid=71816014&bvid=BV11E411k76T&cid=124600873&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="800" height="600">
</iframe>
<!-- 自定義跳轉 在name=hello的iframe打開博客園 -->
<iframe src="" frameborder="0" name="hello" width="500" height="1000"></iframe>
<a href="https://www.cnblogs.com/totoroblog" target="hello">點擊進入博客園</a>
</body>
</html>
10.學習表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>學習表單</title>
</head>
<body>
<!--表單form
action：表單提交的動作，可以是交給一個網址，也可以是交給一個請求處理地址
method：post get請求方式
-->
<form action="1.SEO與整體結構.html" method="GET">
<!--文本輸入框：input type="text"-->
<p>用戶名:
<!-- placehoder 輸入框內的提示信息 -->
<input type="text" name="username" placeholder="請輸入用戶名" maxlength="10" size="20" id="mark">
</p>
<p>密碼:
<!-- required 不能為空 -->
<input type="password" name="password" placeholder="請輸入密碼" required>
</p>
<p>
<input type="submit">
<input type="reset">
</p>
<!-- radio單選框標簽 value即單選框的值，在提交時對應value
name：單選框組名，在同一個組內的radio標簽同時只能選中一個，name值在提交時對應key
checked:默認被選中
-->
<p>性別:
<input type="radio" name="sex" value="boy" checked >男
<input type="radio" name="sex" value="girl">女
</p>
<p>愛好:
<input type="checkbox" name="hobby" value="basketball">籃球
<input type="checkbox" name="hobby" value="dance">跳舞
<input type="checkbox" name="hobby" value="singe">唱歌
</p>
<p>文字按鈕與圖片按鈕:
<input type="button" name="btn1" value="文字按鈕">
<input type="image" src="./src/img/baidu.png" width="200" height="100">
</p>
<p>國家選擇:
<select name="location" id="locat">
<!--下拉框：selected:默認選項-->
<option value="china" selected>中國</option>
<option value="USA">美國</option>
<option value="UK">英國</option>
</select>
</p>
<p>文本域:
<textarea name="text" id="text0" cols="30" rows="10">文本內容</textarea>
</p>
<p>文件域:
<input type="file" name="files" id="f1">
<input type="button" name="upload" value="上傳">
</p>
<!--郵件：會簡單驗證是否是郵箱地址
url：會簡單驗證是否是網絡地址
number：數字驗證
-->
<p>郵箱:
<input type="email" name="email">
</p>
<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" min="0" max="100" step="2">
</p>
<p>搜索:
<input type="search">
</p>
<p>增強鼠標可用性(點擊跳轉):
<label for="mark">點我試試</label>
</p>
<input type="submit">
<input type="reset">
<!-- 一些其他屬性
readonly 只讀，不可更改
disable 禁用
hidden 隱藏，雖然不可見但是會提交
id 標識符，可以配合label的for屬性增加鼠標的可用性
patten 正則表達式驗證
-->
</form>
</body>
</html>
