HTML
背景
使用 java 開發的基於互聯網的項目，遵循 web 標準。
web 標準介紹
- w3c：World Wide Web Consortium（萬維網聯盟）HTML、XHTML、CSS、XML的標準就是由W3C來定製。
- w3c標準：製作網頁的規範，分爲結構標準(html)，表現標準(css)，行爲標準 (dom)
- 結構：html 表現：css 行爲:JavasCript
瀏覽器內核：
| 瀏覽器 | 內核 |
|---|---|
| IE | trident |
| chrome | 歐鵬 |
| 火狐 | gecko |
| Safari | webkit |
tips：「瀏覽器內核」也就是瀏覽器所採用的「渲染引擎」，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。渲染引擎是兼容性問題出現的根本原因。
HTML簡介
Hyper Text Markup Language 超文本標記語言
- 超文本:
- 超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本.
- 標記語言:
- 由標籤構成的語言。<標籤名稱> 如 html，xml
- 標記語言不是編程語言
HTML的網絡術語
- 網頁 ：由各種標記組成的一個頁面就叫網頁。
- 主頁(首頁) : 一個網站的起始頁面或者導航頁面。
- 標記：< p>稱爲開始標記 ，</ p>稱爲結束標記，也叫標籤。每個標籤都規定好了特殊的含義。
- 元素：< p>內容</ p>稱爲元素.
- 屬性：給每一個標籤所做的輔助信息。
- xhtml： 符合XML語法標準的HTML。
- dhtml：dynamic，動態的。javascript + css + html合起來的頁面就是一個dhtml。
- http：超文本傳輸協議。用來規定客戶端瀏覽器和服務端交互時數據的一個格式。
- SMTP：郵件傳輸協議
- ftp：文件傳輸協議。
基本語法：
- html文檔後綴名 .html 或者 .htm
- 標籤分爲
- 圍堵標籤：有開始標籤和結束標籤。如
- 自閉和標籤：開始標籤和結束標籤在一起。如
- 標籤可以嵌套：
需要正確嵌套，不能你中有我，我中有你
錯誤：
正確： - 在開始標籤中可以定義屬性。屬性是由鍵值對構成，值需要用引號(單雙都可)引起來
- html的標籤不區分大小寫，但是建議使用小寫。
基本結構
<!DOCTYPE html>
<!-- 高數瀏覽器使用什麼規範 -->
<html lang="en">
<!-- head表填代表頭部 -->
<head>
<!-- mate 描述標籤 -->
<!-- meta 一般來做seo -->
<meta charset="UTF-8">
<meta name="keywords" content="java acc source">
<meta name="description" content="學習源碼"
<title>表單標籤</title>
</head>
<body>
helloword
</body>
</html>
HTML標籤
頁面通常結構
基本標籤
-
標題標籤
<h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> -
段落標籤
<p>段落1</p> <p>段落1</p> -
換行標籤
<br /> -
字體樣式標籤
-
黑體
黑體 ： <strong>你未必出類拔萃，你要與衆不同</strong> -
斜體
斜體： <em>你未必出類拔萃，你要與衆不同</em>
-
-
水平線標籤
<hr /> -
特殊字符標籤
1 空格 >大於 <小於 ©； 版權 -
行內元素和塊元素區別
行內元素是使用標籤後不換行例如 符號標籤，字體標籤
塊元素是換行的例如 span、h標籤
-
圖像標籤
<img width="200px" src="./img/logo.png" alt="logo" title="logo"> <!-- src :圖片地址 可以相對地址或絕對地址 title ： 懸停時出現標題 --> -
鏈接標籤
-
基本鏈接
<a href="01-demo01.html" target="_blank">點擊</a> <a href="https://www.baidu.com"> <img src="./img/logo.png" alt=""> </a> <!-- 可以鏈接到一個html頁面，可以以鏈接到一個地址 _blank 表示在新頁面打開 _self 表示在原頁面打開 內部鏈接可以使用除文字的其他形式 --> -
錨鏈接
<a name="top"></a> <a href="#top">回到頂部</a> <!-- 錨鏈接， 1、通過name標籤位置 2、# 獲取name，跳轉 一般運用段落跳轉 --> -
功能鏈接
<a href="malto:[email protected]">點擊聯繫我</a> <!-- 郵件 --> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=807098855&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:807098855:52" alt="點擊這裏給我發消息" title="點擊這裏給我發消息"/></a> <!--qq聯繫我--> <!-- 多個郵箱地址 --> <a href="mailto:[email protected], [email protected]" title="Email">Contact Us</a> <!-- 添加抄送，主題和內容 --> <a href="mailto:[email protected][email protected]&subject=Help&body=sample-body-text" title="Email">Contact Us</a>
-
-
列表標籤
-
有序列表
<!-- 有序列表 應用範圍： --> <ol> <li>java</li> <li>c++</li> <li>前段</li> <li>運維</li> <li>大數據</li> </ol> -
無序列表
<!-- 無序列表 應用場景：導航欄標籤 --> <ul> <li>java</li> <li>c++</li> <li>前段</li> <li>運維</li> <li>大數據</li> </ul> -
自定義列表
<!-- 自定義列表 dl ： 無序列表 dt ： 標題 dd： 列表內容 應用範圍：公示欄底部 --> <dl> <dt>學科</dt> <dd>java</dd> <dd>c</dd> <dd>pthon</dd> <dd>c++</dd> <dt>信息</dt> <dd>1</dd> <dd>2</dd> <dd>3</dd> <dd>4</dd> </dl>
-
-
表格標籤
<table border="1px"> <tr> <td colspan="3"> 學習成績</td> </tr> <tr> <td rowspan="2">張三</td> <td>語文</td> <td>100</td> </tr> <tr> <td>數學</td> <td>100</td> </tr> <tr> <td rowspan="2">李四</td> <td>語文</td> <td>100</td> </tr> <tr> <td>數學</td> <td>100</td> </tr> </table> -
音頻標籤
<!-- controls 控制 autoplay 自動播放 --> <video src="./video/錄製.mp4" controls autoplay></video> <audio src="./audio/聲音.mp3" controls autoplay></audio> -
內聯標籤
<iframe src="https://www.baidu.com"></iframe>
表單標籤
表單基本結構
<!-- 表單form
action： 表單提交的位置，可以處理地址可以是網站
method post get 提交方式
post :大文件，相對安全
get：不安全,攜帶內容有限
-->
<form action="01-demo.html" method="get">
攜帶內容
</form>
輸入框
<p>姓名：<input type="text" name="username" value="admin" placeholder="請輸入姓名" maxlength="8"></p>
<p>密碼：<input type="password" name="password"></p>
單選框
<!--
radio
value: 單選框的值
name ：表示組
-->
<p>
<input type="radio" name="sex" id="" value="boy"/> 男
<input type="radio" name="sex" id="" value="girl" /> 女
</p>
複選框
<!--
checkbox
value: 單選框的值
name ：表示組
-->
<p> 愛好
<input type="checkbox" name="hobby" value="sleep" /> 睡覺
<input type="checkbox" name="hobby" value="game" /> 遊戲
<input type="checkbox" name="hobby" value="sleep" /> 睡覺
<input type="checkbox" name="hobby" value="sleep" /> 睡覺
<input type="checkbox" name="hobby" value="sleep" /> 睡覺
</p>
按鈕
<!--
input type="button"
input type="image"
input type="submit"
input type="reset"
-->
<p>按鈕：
<input type="button" name="btn1" value="按鈕" />
<input type="image" src="img/logo.png" />
<input type="submit" >
<input type="reset" >
</p>
下拉框
<!-- 下拉框 -->
<p>下拉框:
<select name="列表名稱" id="">
<option value="china">中國</option>
<option value="america">美國</option>
<option value="jpa" selected="">日本</option>
<option value="ruishi">瑞士</option>
</select>
</p>
文本域
<!-- 文本域 -->
<p>反饋：
<textarea name="textarea" cols="50" rows="10">文本內容</textarea>
</p>
文件域
<p>
<input type="file" name="files" />
<input type="button" value="上傳" name="upload" />
</p>
基本驗證
<p>郵箱:
<input type="email" name="email" />
</p>
<!-- url -->
<p>
<input type="url" name="url" />
</p>
<!-- 數字 -->
<p> 商品數量：
<input type="number" name="num" max="100" min="0" step="1">
</p>
滑塊
<p> 滑塊：
<input type="range" name="voice" min="0" max="100"/>
</p>
搜索
<p>搜索
<input type="search" name="search" />
</p>
增強鼠標
<p>
<label for="mark">你點擊試試</label>
<input type="text">
</p>
驗證和域
- requied 提示信息
- placeholder 非空判斷
- pattern 正則判斷
- readonly 只讀域
- hidden 隱藏域
- disable 禁用
引用
- < cite> 引用作品的名字、作者的名字等
- < q> 引用一小段文字（大段文字引用用< blockquote>）
- < blockquote> 引用大塊文字
- < pre> 保存格式化的內容（其空格、換行等格式不會丟失）
<pre>
<code>
int main(void) {
printf('Hello, world!');
return 0;
}
</code>
</pre>
瀏覽器兼容
主流瀏覽器都兼容 HTML5 的新標籤，對於 IE8 及以下版本不認識 HTML5的新元素，可以使用 JavaScript 創建一個沒用的元素來解決，例如：
<script>
document.createElement("header");
</script>
也可以使用 shiv 來解決兼容性問題，詳情可參考 HTML5 Shiv