HTML
什麼是HTML
-
HTML：Hyper Text Markup Language（超文字編輯語言）
-
HTML的發展史
-
HTML5優勢
- 世界知名瀏覽器廠商對HTML5的支援
- 市場的需求
- 跨平臺
W3C標準
- W3C
- World Wide Web Consortium
- 成立於1944年，Web技術領域最權威和最具影響力的世界中立機構。
- W3C標準包括
- 結構化標準語言（HTML,XML）
- 表現標準語言（CSS）
- 行為標準（DOM,ECMAScriot)
常見IDE
- Dreamweaver
- IDEA
- WebStorm
- 。。。
HRML基本結構
<html>
<head>
<title>標題</title> <!--網頁頭部 -->
</head>
<body>
內容 <!-- 網頁主體-->
</body>
</html>
單獨呈現的標籤，如
；意為/來關閉空元素
網頁的基本資訊
- DOCTYPE宣告
- title標籤
- meta標籤
這裡是一個示例
<!--DOCTYPE:告訴瀏覽器我們要使用什麼規範-->
<!DOCTYPE html>
<html lang="en">
<!--head標籤表示網頁頭部-->
<head>
<!-- meta描述性標籤，用來描述網站的一些資訊-->
<!-- meta標籤一般用來做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="YY" >
<meta name="description" content="這是我的第一個網頁">
<!-- 網頁標題-->
<title>標題</title>
</head>
<body>
<!--body標籤代表網頁主體-->
Hello1，World！
</body>
</html>
結果如圖
網頁的基本標籤
- 標題標籤
- 段落標籤
- 水平線標籤
- 字型樣式標籤
- 註釋和特殊符號
標籤的運用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本標籤學習</title>
</head>
<body>
<!--標題標籤-->
<h1>一級標籤</h1>
<h2>二級標籤</h2>
<h3>三級標籤</h3>
<h4>四級標籤</h4>
<h5>五級標籤</h5>
<h6>六級標籤</h6>
<!--段落標籤-->
<!--這裡我們用一段歌詞來演示-->
<p>兩隻老虎愛跳舞</p>
<p>小兔子乖乖拔蘿蔔</p>
<p>我和小鴨子學走路</p>
<p>童年是最美的禮物</p>
<p>小螺號呀嘀嘀地吹</p>
<p>我學海鷗展翅飛</p>
<p>不怕風雨不怕累</p>
<p>快快把本領都學會</p>
<!--水平線標籤-->
<hr/>
<!--換行標籤-->
兩隻老虎愛跳舞 <br/>
小兔子乖乖拔蘿蔔 <br>
我和小鴨子學走路 <br/>
童年是最美的禮物<br/>
小螺號呀嘀嘀地吹<br/>
我學海鷗展翅飛<br/>
不怕風雨不怕累<br/>
快快把本領都學會<br/>
<!--粗體，斜體-->
<h2>字型樣式標籤</h2>
粗體：<strong>study</strong>
斜體：<em>study</em>
<!--特殊符號-->
空 格<br/>
空 格<br/>
大於符號><br/>
小於<<br/>
版權符號©版權所有YY<br/>
<!--還有很多特殊符號用的時候查百度就行，記住最常用的幾個。-->
</body>
</html>
結果如圖：
注意這裡段落標籤和換行標籤的區別，還有值得注意的是換行br和br/使用效果相同，水平線標籤也可以不加/。
字型的修改其實最常用的還是在css中控制，這裡記下這一個就行；對於空格特殊符號，在程式碼中我敲了不止一個空格，但是網頁上只有一個，所以要想新增更多空格，就必須使用 ，其餘的特殊符號使用的時候自行百度。
影像標籤
基本格式
應用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>影像標籤</title>
</head>
<body>
<!--img學習
scr: 圖片地址（必填）
相對地址（推薦），絕對地址
../ --返回上一級目錄
alt: 圖片名字（必填）
-->
<img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300">
</body>
</html>
結果如圖
這裡呢，把滑鼠放在圖片上就會顯示ht，如果圖片載入失敗就會顯示這張圖的名字。
除了以上width，height，還有其他的引數控制圖片，這裡不一一列舉。
連結標籤
- 文字超連結
- 影像超連結
- 錨連結
- 功能性連結
基本格式：
應用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>連結標籤</title>
</head>
<body>
<a name="top">頂部</a> <!-- 錨標記-->
<!--a標籤
href: 必填,表示轉跳到的網站
target:表示視窗在哪裡開啟
_blank:在新標籤頁中開啟
不設定target預設在本網頁中開啟
-->
<a href="影像標籤.html" target="_blank">點選檢視頭像</a>
<br>
<a href="http://www.baidu.com" target="_blank">點選跳轉到百度</a>
<br>
<a href="基本標籤學習.html">
<img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300">
</a>
<hr>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<p><img src="../imge/頭像.jpg" alt="頭像" title="ht" width="300" height="300"></p>
<!--錨連結
1. 需要一個錨標記
2. 使用#跳轉到標記
-->
<a href="#top">回到頂部</a> <br>
<!--功能連結
郵件連結 ：mailto:
qq連結
-->
<a href="mailto:123456@qq.com">點選聯絡我</a> <br>
<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::53" alt="加我，看小電影！" title="加我，看小電影！"/></a>
</body>
</html>
點選第一個檢視頭像會跳轉到新的標籤頁，點選下面的影像連結因為target為預設自身開啟，所以不會跳轉到新頁面。
對於錨連結使用時，應該設定一個錨標記作為跳轉點，可以在本頁面中跳轉，也可以在其他網頁中設定錨標記然後跳轉到對應位置。
點選回答頂部就會跳轉到之前在頂部設定好的錨標記點；
對於功能性連結，最基礎的mailto是呼叫計算機本身的郵箱來進行傳送，而QQ聯絡是騰訊弄的一個qq推廣
如圖：
把程式碼複製上去就行了。
行內元素和塊元素
- 塊元素
- 無論內容多少，元素獨佔一行
- （p,h1...h6...）
- 行內元素
- 內容撐開寬度，左右都是行元素的可以排在一行
- (a,strong,em...)
列表
什麼是列表
-
列表就是資訊資源的一種展示形式。它可以使資訊結構化和條理化，並以列表的樣式顯示出來，以便瀏覽者能更快捷地獲得相應的資訊
-
列表的分類
◆無序列表◆有序列表
◆定義列表
<!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>
<!--自定義列表
dt:標籤
dt:列表名字
dd：列表內容
-->
<dl>
<dt>學科</dt>
<dd>Java</dd>
<dd>python</dd>
<dd>Linux</dd>
<dt>位置</dt>
<dd>北極</dd>
<dd>南極</dd>
<dd>西湖</dd>
</dl>
</body>
</html>
如圖所示：
表格
-
為什麼使用表格
-
簡單通用
-
結構穩定
-
-
基本結構
- 單元格table
- 行tr
- 列td
- 跨行clospan
- 跨列rowspan
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格學習</title>
</head>
<body>
<!--表格
行 tr
列 td
-->
<table border="1px"> <!--設定表格邊框粗細為1畫素-->
<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-1</td>
<td>3-2</td>
</tr>
</table>
</body>
</html>
這裡我將第一行的三列跨行合併，第二三列跨列合併。
視訊和音訊
- 視訊元素
- video
- 音訊元素
- audio
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音訊和視訊</title>
</head>
<body>
<!--音訊和視訊
src:路徑
controls:控制播放，沒有這個就不能播放視訊
autoplay:自動播放
-->
<video src="../video/YOASOBI-怪物%20(TV動畫《動物狂想曲》第二季片頭曲)(高清).mp4" controls autoplay>一部MV</video>
<audio src="../audio/狐小黎%20-%20平淡日子裡的刺%20(cover_%20宋冬野).mp3" controls autoplay>一首歌曲</audio>
</body>
</html>
src:路徑
controls:控制播放，沒有這個就不能播放視訊
autoplay:自動播放（非必選）
記住這三點就行了，注意：如果沒有controls，音訊就是一片空白，什麼也沒有。
頁面結構分析
其中header，footer，nav是比較常用的，這些元素主要是為了後面css等等控制方便服務的。
iframe內聯框架
基礎用法
iframe的使用方法1：網頁裡面巢狀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<!--iframe的使用方法1：網頁裡面巢狀-->
<iframe src="https://www.baidu.com" frameborder="0" width="500" height="400"></iframe>
</body>
</html>
iframe的使用方法2：往iframe裡面裝東西
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<!--iframe的使用方法1：網頁裡面巢狀-->
<iframe src="" frameborder="0" name="name" width="500" height="400"></iframe>
<a href="影像標籤.html" target="name">點選跳轉</a>
</body>
</html>
表單post和get提交
基本使用語法
- get提交與post提交：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陸註冊</title>
</head>
<body>
<!--form
action：表單提交的的位置，可以是網站，也可以是一個請求處理的地址
method:提交的方式post和get
post：相對較為安全，可以傳輸大檔案
get：可以在url中看到提交資訊，效率高，不安全
-->
<form method="get" action="表格學習.html">
<p>名字：<input type="txt" name="username"> </p>
<p>密碼：<input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
get提交可以在url中看到表單資訊
而post相對安全一點
我們post提交時，右鍵審查網頁元素，點選network然後提交表單資訊
可以抓到一條資訊
然後開啟它，點選header，往下拉可以看到傳送的表單資訊
當然，實際生活中post方法還會在這裡進行加密處理，不會那麼容易洩露資訊。
表單元素格式
文字輸入框與單選框
應用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單元素</title>
</head>
<body>
<form action="../表格學習.html" method="get">
<!--文字輸入框 input type="text"
value ="YYes" ,預設初始值
maxlength 最長可輸入的字元數
size 文字框的長度
-->
<p>
<input type="text" name="username" value="YYes" maxlength="8" size="30">
</p>
<!--密碼輸入框 input type="password" name="pwd"-->
<p>
<input type="password" name="pwd">
</p>
<!-- 單選框-->
<p>性別：
<input type="radio" value="boy" naime="sex" >男
<input type="radio" value="girl" name="sex">女
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
文字輸入框 input type="text"
value ="YYes" ,預設初始值
maxlength 最長可輸入的字元數
size 文字框的長度
值得注意的是：單選框name要相同才能成為一個組，不然無法實現單選。
按鈕和多選框
<!-- 多選框-->
<p>
<input type="checkbox" value="sleep" name="hobby">睡覺
<input type="checkbox" value="study" name="hobby">學習
<input type="checkbox" value="girl" name="hobby">妹子
<input type="checkbox" value="game" name="hobby">遊戲
</p>
多選框提交結果如上圖
下面是按鈕
input type="button"普通按鈕
input type="image"圖片按鈕
input type="submit"提交按鈕
input type="reset" 重置
<!-- 按鈕
input type="button"
input type="image"
-->
<p>按鈕：
<input type="button" name="bt1" value="點選一夜暴富">
<input type="image" src="../../imge/頭像.jpg">
</p>
這裡是圖片按鈕和按鈕
value：設定按鈕上面的文字
注意：點選這個圖片按鈕就會直接提交
下拉框
<p>幸運數字：
<select name="列表名稱">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
option:下拉框選項
補充：如果在option裡面加上selected，則會改變下拉框預設初始選項
文字域
<!-- 文字域-->
<p>反饋：
<textarea name="text" cols="30" rows="10"></textarea>
</p>
檔案域
<!-- 檔案域-->
<p>
<input type="file" name="files">
</p>
搜尋框，滑塊，簡單驗證
<!-- 搜尋框-->
<p>
搜尋 <input type="search" name="search">
</p>
<!-- 滑塊-->
<p>
滑塊：<input type="range" name="range" min="0" max="100">
</p>
<!-- 一些簡單驗證-->
<p>
郵箱驗證：<input type="email" name="mail"> <br>
數字驗證： <input type="number" name="num" min="0" max="100" step="2">
</p>
這裡搜尋沒有什麼特別的，滑塊裡面min和max分別設定滑塊的範圍，郵箱驗證如果提交不符合驗證的機制就會提示錯誤，不過驗證機制只是有無@符號和@符號前後必須有內容，驗證機制比較low，數字驗證後面的step是設定調節數字的，這裡設定為每次+2
表單應用
- 禁用disabled
- 隱藏hidden
- 只讀readonly
分別新增到標籤中可以實現各自效果
補充：增強滑鼠可用性
<label for="id">點選</label>
id跟上面name一樣，是元素裡面的屬性
表單初級驗證
-
高階驗證需要css，所以....
-
之所以要驗證，第一是安全性，第二可以減輕伺服器壓力。
-
常用方式
-
placeholder提示資訊
-
required 非空判斷
<p> <input type="text" name="username" maxlength="8" size="30" placeholder="使用者名稱" required> </p>
這裡加上placeholder後可以提示這種灰色的字而且不影響輸入，require控制非空
- pattern 正規表示式：
<p> 自定義郵箱：<input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"> </p>
-
看得出來我們自定義的這個驗證機制比自帶的好用。
正規表示式一般網上搜尋最方便。
總結
html總的來說比較簡單，一天完全可以搞定。把每個練習一遍就夠了，網頁的美化和功能設計僅僅看HTML是不夠的，更重要的是css和jsp。
本篇文章是本人的學習日記，有不足之處希望指出。
