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。
本篇文章是本人的學習日記，有不足之處希望指出。
