1.HTML簡介【瞭解】 1.1Hyper text markup language 超文本標記語言 超文本：可以對文本進行格式化編輯，還有文本的鏈接等等，具有傳統文本不具備的特性 標記：html上所有操作都是通過標記實現，標記就是標簽 語言 ：不需要編譯，運行在瀏覽器上面 1.2HTML基本思想 ...
1.HTML簡介【瞭解】
1.1Hyper text markup language 超文本標記語言
- 超文本：可以對文本進行格式化編輯，還有文本的鏈接等等，具有傳統文本不具備的特性
- 標記：html上所有操作都是通過標記實現，標記就是標簽
- 語言 ：不需要編譯，運行在瀏覽器上面
1.2HTML基本思想
- 通過標簽包裹內容
- 使用不同標簽和標簽的屬性來修改包裹內容的樣式
2.HTML組成結構【瞭解】
2.1文檔聲明
<!--html5格式，doctype-document type （預設）--> <!doctype html> <!--html4.0.1格式, DTD-文檔結構描述 xml/介面開發--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2.2HTML標簽
<html></html>
2.3Head標簽
主要屬性：
- base ：設置基本的信息;設置超鏈接的打開方式（超鏈接可以在當前頁打開或者在一個頁面打開）
<!--target設置為_self/_blank--> <!--在新頁面打開超鏈接--> <base target="_blank"> <!--在當前頁面打開超鏈接--> <base target="_self">
- meta ：設置頁面的一些內容信息（基本不怎麼用）
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- link ：引入外部資源，導入一個css
<!-- rel規定當前文檔與被鏈接文檔的關係 --> <link rel="stylesheet" type="text/css" href="theme.css" />
- title : 頁面標題
<title>這是一個標題</title>
2.4body標簽
<body></body>
頁面的主要內容都在body內，body標簽是必不可少的。建議HTML開發直接使用editPlus，沒有必要使用eclipse；而JSP需要在集成開發平臺上開發，因為jsp的本質是java->servlet，而jsp要編譯為class的，所以需要JVM（java虛擬機 Java Virtual Machine），也需要jdk（Java開發工具包 Java Development Kit）。
3.HTML常用的標簽
3.1文字標簽和註釋【瞭解】
<!-- size:1-7的數字,超過了7,就是7 --> <!-- color:兩種表示方式,英文單詞或者#RGB（6位16進位數，每兩位表示一種顏色）--> <font size="2" color="red"></font> <!-- 這是html的註釋 -->
3.2列表標簽【瞭解】
列表分為基本列表，無序列表和有序列表
- 基本列表：
<dl> <dt>java1班</dt> <dt>java2班</dt> <dt>java3班</dt> <dt>java4班</dt> </dl>
- 有序列表：
<!-- type 屬性 1|a|i --> <ol type="1"> <li>java1班</li> <li>java2班</li> <li>java3班</li> <li>java4班</li> </ol>
- 無序列表：
<!-- type: 圓點，空心圓，或者實心圓 --> <ul> <li>java1班</li> <li>java2班</li> <li>java3班</li> <li>java4班</li> </ul>
3.3圖片標簽
<img src="圖片的路徑"/>
路徑【重點】
- 絕對路徑：完整路徑，包括http+ip或者盤符
如:E:\code\html\image\huge_girlFriend.png
- 相對路徑：相對自己的路徑
相對路徑的書寫方法:
首先，搞清楚自己在什麼地方,以E:\code\html\html1.html為例
有三種情況：
（1）你的目標文件和你自己在同一個文件夾下麵，直接使用
（2）你的目標文件在你同一級的文件夾下（下層文件）
E:\code\html\image\huge_girlFriend.png
E:\code\html\html1.html
相對路徑:image/huge_girlFriend2.png
（3）你的目標文件在你上一級的文件夾下（上層文件）
相對路徑:../huge_girlFriend2.png
3.4超鏈接<a></a>
- 鏈接資源
<!-- target :定義超鏈接資源打開的方式 _self:在當前頁面打開 _blank:空白頁面打開 --> <!-- 如果不鏈接任何東西，href="#" --> <a href="" target="_blank">查看用戶信息</a>
- 定位資源
<!-- 定義一個資源位置 --> <a name="top"><font color="red">頂部</font></a> <!-- 鏈接到資源位置 --> <a href="#top">回到頂部</a>
3.5表格<table></table>【重點】
- 由行和列組成
<tr></tr> table row
沒有列,表的列遵循最多原則：表的列的數量以行中最多的單元格為準。
<td></td> 單元格
- 有表頭。
<th></th> table head 表頭具有一個樣式：加粗居中
寫在tr標簽中
- 一些對錶的基本操作：
分割線：屬性border
單元格間隙：cellspacing
對齊：align left|center|right 可以加到table|tr|td上，加到對應的標簽上面標示該標簽的子標簽或者包含的內容的對齊方式
合併單元格：
兩種情況：取值：數字
1.按照行合併 rowspan 當前單元格占幾行
2.按列合併 colspan 當前單元格占幾列
- 標題 <caption></caption>
3.6表單<form ></form>【最重要】
提交數據到服務端的頁面。
- 屬性：
<!--action="" 提交的表單地址 method="" 表單提交方式 ：get/post --> <form action="" method="post"></form>
get/post方式的區別：
(1)get方式是把請求參數加在訪問路徑後面，post不是
(2)get方式不安全,直接在訪問路徑裡面就能看到所有的參數；post安全性好
(3)get方式提交的參數數量/長度是有限制的（不超過1024位元組）；post沒有。
- 輸入項：用戶可以輸入內容，html大部分的表單是通過input標簽來實現的。
- 基本輸入項：
<input type="text" />
- 密碼輸入項：
<input type="password"/>
- 單選框 ：
<!-- 必須要有name屬性,並且name屬性必須相同 --> <input type="radio" name="sex" value="0"/>男 <input value="1" type="radio" name="sex"/>女
- 多選框 ：
<!-- 必須要有name屬性,並且name屬性必須相同 --> <input type="checkbox" name="hobby"/>睡覺 <input type="checkbox" name="hobby"/>吃飯 <input type="checkbox" name="hobby"/>打豆豆
- 文本輸入域： <textarea cols="" rows=""/
- 下拉框：
<select name="birth"> <option>1998</option> <option>1997</option> <option>1996</option> </select>
- 文件 【重要】 :文件上傳下載
<input type="file"/>
- 提交按鈕 <input type="sumbit"/>
- 使用圖片提交 <input type="image" src=""/>
- 普通按鈕
<!-- 和js配合使用 --> <input type="button" value="我只是一個普通按鈕"/>
3.7其他標簽
B,I,U :跟word一樣
div:區域塊, 自動加上換行
span:行塊, 在span裡面的標簽元素在一行
3.8框架標簽【瞭解】
現在基本不使用,基本都是使用div+CSS
<!-- frameset標簽 不能寫在body裡面 --> <!-- 屬性：rows:行 cols:列 --> <!-- 前80行為第一部分，剩下的給第二部分 --> <frameset name="big_frameset" rows="80,*"> <frame name="top" src="top.html"></frame> <frameset cols="40,*"> <frame name="small_left" src="left.html"></frame> <frame name="small_right" src="right.html"></frame> </frameset> </frameset>
