1.第一個HTML網頁
<!-- DOCTYPE: 告訴瀏覽器使用的什么規(guī)范-->
<!DOCTYPE html>
<html lang="en">
<!-- head：網頁頭部-->
<head>
<!--meta：描述性標簽，用來描述我們網站的一些信息，一般用來描述網站的一些信息-->
<meta charset="UTF-8">
<meta name="keywords" content="魚小吁津；生命不息麻惶，bug不止">
<meta name="description" content="來這個地方啥也學不到">
<!--title：網頁標題-->
<title>魚小</title>
</head>
<body>
hello world!
</body>
</html>
效果如圖：
hello.png
2.網頁基本標簽
1.標題標簽
<h1>一級標簽</h1>
<h2>二級標簽</h2>
<h3>三級標簽</h3>
<h4>四級標簽</h4>
<h5>五級標簽</h5>
...
2.段落標簽
使用<p></p>
<p>html基礎教程</p>
<p>段落標簽測試</p>
3.換行標簽
使用<br/>距误，單標簽
html基礎教程<br/>
換行標簽測試<br/>
4.水平線標簽
<hr/>
5.字體樣式標簽
粗體：<strong>html基礎教程</strong>
斜體：<em>html基礎教程</em>
6.特殊符號
空格:html 教程
<br/>
大于：>
小于：<
7.注釋
<!--注釋-->
8.基礎標簽總結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本標簽</title>
</head>
<body>
<!--標題標簽-->
<h1>一級標簽</h1>
<h2>二級標簽</h2>
<h3>三級標簽</h3>
<h4>四級標簽</h4>
<h5>五級標簽</h5>
<!--段落標簽-->
<p>html基礎教程</p>
<p>段落標簽測試</p>
<!--換行標簽-->
html基礎教程<br/>
換行標簽測試<br/>
<!--水平線標簽-->
<hr/>
<!--字體標簽-->
<strong>html基礎教程</strong>
<br/>
<em>html基礎教程</em>
<!--注釋-->
<br/>
<!--特殊符號-->
空格:html 教程
<br/>
大于：>
<br/>
小于：<
</body>
</html>
基礎標簽.png
3.圖片標簽
標簽：<img src="" alt="">
1.src : 圖片地址
相對地址（推薦）;絕對地址
相對地址 : ../ 上一級目錄
2.alt : 圖像替代文字
選填:
1.title : 鼠標懸停文字
2.width : 寬度
3.height : 高度
例：<img src="../resources/image/1.jpeg" alt="魚小頭像" title="魚小頭像">
4.鏈接標簽
標簽：<a><a/>
<a href=""></a>
href : 必填，表示跳轉的頁面
target : 窗口在哪里打開
_blank : 在新標簽中打開
_self : 在自己的網頁中打開
<a href="path" target="目標窗口位置">鏈接文本或圖像</a>
例：
1.<a target="_self">點擊跳轉到百度</a>
2.嵌入圖片茉贡，點擊圖片跳轉：
<a href="HelloHtml.html">
<img src="../resources/image/1.jpeg" alt="魚小頭像" title="魚小頭像">
</a>
2.錨鏈接：
（1）.需要一個標記
（2）.通過#跳轉到標記
例：
<!--在頁面頂部使用name作為標記-->
<a name="#top">頂部</a>
<!--底部跳回到頂部-->
<a name="#top">頂部</a>
3.功能性鏈接
郵件鏈接:mailto
例：<a href="mailto:tlxfish586@163.com">點擊聯(lián)系我</a>
4.塊元素和行內元素
1.塊元素：無論內容多少塞栅，該元素獨占一行
2.行內元素：內容撐開寬度，左右都是行內元素的可以排在一行
5.列表
1.什么是列表
列表就是信息資源的一種擴展形式腔丧。
使信息結構化和條理化放椰，并以列表的樣式顯示出來，以便瀏覽愉粤。
html三種列表：有序列表砾医、無序列表、自定義列表
2.有序列表
<!--有序列表：一列項目衣厘，列表項目使用數字進行標記-->
<ol>
<li>早飯</li>
<li>午飯</li>
<li>晚飯</li>
<li>夜宵</li>
</ol>
有序列表
3.無序列表
<!--有序列表：一列項目如蚜，列表項目使用數字進行標記-->
<ol>
<li>早飯</li>
<li>午飯</li>
<li>晚飯</li>
<li>夜宵</li>
</ol>
無序列表.png
4.自定義列表
<!--自定義列表:自定義列表不僅僅是一列項目，而是項目及其注釋的組合影暴。
dl : 標簽
dt : 列表名稱
dd : 列表內容
-->
<dl>
<dt>時間</dt>
<dd>早晨</dd>
<dd>中午</dd>
<dd>晚上</dd>
<dd>半夜</dd>
<dt>餐食</dt>
<dd>早飯</dd>
<dd>午飯</dd>
<dd>晚飯</dd>
<dd>夜宵</dd>
</dl>
自定義列表.png
6.表格
標簽:<table></table>
<!--表格table
行 tr
列 td
-->
<!--border設置邊跨寬度-->
<table border="1px">
<tr>
<!--colspan跨行-->
<td colspan="3">1-1</td>
</tr>
<tr >
<!--rowspan跨列-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
表格.png
7.媒體元素
視頻元素video與音頻元素audio
<!--音頻與視頻
src : 資源路徑 推薦使用相對路徑
controls : 控制條
autoplay : 自動播放
-->
例：
<video src="../resources/video/1.mp4" controls autoplay></video>
<audio src="../resources/audio/2.mp4" controls autoplay></audio>
媒體元素.png
谷歌會攔截自動播放错邦，用其他瀏覽器就可以了，上面視頻型宙，下面音頻
8.html頁面結構
<!--元素名 描述
header 標題頭部區(qū)域的內容（用于頁面或頁面中的一塊區(qū)域）
footer 標記腳部區(qū)域的內容（用于整個頁面或頁面的一塊區(qū)域）
section web頁面中的一塊獨立區(qū)域
article 獨立的文章內容
aside 相關內容或應用（常用于側邊欄）
nav 導航類輔助內容
-->
<header>
<h1>頭部</h1>
</header>
<section>
<h1>內容</h1>
</section>
<footer>
<h1>底部</h1>
</footer>
9iframe內聯(lián)框架
<!--iframe內聯(lián)框架
<iframe src="path" frameborder="0"></iframe>
src : 地址
width : 寬度
height : 高度
-->
<iframe src="https://www.baidu.com" frameborder="0" width="1920" height="1080">
</iframe>
iframe
10.表單
<!--表單
標簽：<form></form>
action : 表單提交的位置撬呢，可以是網站或請求處理地址
method : post 、 get
get:可以在url中看到提交的一些信息妆兑，不安全魂拦，比較高效，不能傳輸大文件
post:在url中不會顯示提交的一些信息搁嗓，比較安全芯勘，可以傳輸大文件
-->
<form action="HelloHtml.html" method="get">
<p>name: <input type="text" name="username"></p>
<p>password: <input type="password" name="pwd"></p>
<p><input type="submit"></p>
<p><input type="reset"></p>
</form>
1.文本輸入框
<!--文本輸入框：<input type="text"
value : 默認初始值
maxlength : 輸入最長字符串
size : 文本框的長度
-->
<p>用戶名: <input type="text" name="username"></p>
2.密碼輸入框
<!--密碼輸入框：input type="password" -->
<p>密碼: <input type="password" name="pwd"></p>
3.單選框
<!--單選：input type="radio"
value : 單選框的值
checked : 默認選中
name : 表示組
需要放在一個組，不然每個單選都能選腺逛！
-->
<p>性別:
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
4.多選框
<!--多選框：input type="checkbox"
checked : 默認選中
-->
<p>愛好:
<input type="checkbox" value="read" name="hobby" checked>閱讀
<input type="checkbox" value="game" name="hobby">游戲
<input type="checkbox" value="code" name="hobby">編程
<input type="checkbox" value="chat" name="hobby">聊天
</p>
5.列表框
<!--列表框
selected : 默認選中
-->
<p>國家:
<select name="列表名稱">
<option value="china" selected>中國</option>
<option value="japan">日本</option>
<option value="italy">意大利</option>
<option value="russia">俄羅斯</option>
</select>
</p>
5.文本域
<!--文本域：textarea name="textarea"-->
<p>反饋：
<textarea name="textarea" cols="30" rows="10"></textarea>
</p>
6.文件域
<!--文件域：input type="file" name="files"-->
<p>
<input type="file" name="files">
<input type="button" value="上傳" name="upload">
</p>
7.滑塊
<!--滑塊-->
<p>音量:
<input type="range" name="vol" min="0" max="100" step="5">
</p>
8.搜索框
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
9.按鈕
<!--普通按鈕：input type="button"
圖片按鈕：input type="image"
提交按鈕：input type="submit"
重置按鈕：input type="reset"
-->
<p>按鈕:
<input type="button" name="btn" value="按鈕">
<input type="image" src="../resources/image/1.jpeg">
</p>
<p><input type="submit">
<input type="reset">
</p>
10.表單驗證
(1)
<!--郵箱驗證-->
<p>郵箱:
<input type="email" name="email">
</p>
<!--url驗證-->
<p>url:
<input type="url" name="url">
</p>
<!--數字驗證-->
<p>年齡:
<input type="number" name="number">
</p>
(2)
<!--文本輸入框：<input type="text"
value : 默認初始值
maxlength : 輸入最長字符串
size : 文本框的長度
placeholder : 提示信息
required : 非空判斷
pattern : 正則表達式驗證（百度就好了）
-->
<p>名字: <input type="text" name="username" placeholder="請輸入用戶名"
required></p>
