**********************************************************************
HTML
**********************************************************************
技能點：（五週）
一、HTML+CSS
二、JavaScript 前端 目標：頁面的實現
三、數據庫 MySQL 增刪改查 存儲過程 函數
四、JSP+servlet+javaBean+MVC+mysql+tomcat+ajax
五、AJAX+jQuery
六、綜合項目 重點javascript
特色：有頁面
綜合性較強
方法：多練：熟練度、同類型的要多作
增長業務難度
提升效率：css
一、html+css 頁面部分：
特色：記住、經過練習增強標籤的掌握 全棧式開發html
HTML各類標籤：
一、W3C:成員來自全球，個體 公司
作規範：標籤規範 html標籤 樣式規範css 行爲規範javascript
規範公司：瀏覽器廠商
規範程序員：寫代碼時的標準前端
二、頁面是經過瀏覽器來執行的
IE10以上 谷歌瀏覽器
三、HTML頁面結構：
Hyper Text Markeup Language 超文本標記語言
超文本：文字 圖片 音頻 視頻 動畫等
標記都寫在<>中，W3C約束了標記都有具體的含義
解釋型語言，瀏覽器能夠直接解釋出效果
擴展名 .html .htm
做用：經過標籤，以及對標籤進行修飾的CSS，來進行頁面的呈現java
開發工具： DW Subline HBuildermysql
HBuilder:
運行 ctrl + r 程序員
主要任務：HTML標籤
語法：
1）標準標籤：雙標記標籤
<標籤 屬性="屬性值" 屬性="屬性值"></標籤>
2）空標籤:單標記標籤
<標籤 屬性="屬性值" 屬性="屬性值"/>ajax
【說明】
一、標籤和屬性之間用空格隔開
二、屬性和屬性值之間使用=,且屬性值使用""引發來
三、多個屬性使用空格隔開
四、屬性沒有前後順序sql
一、標題標籤：用來設置一段文字的標題 6個
<h1></h1>
複製一行代碼的快捷鍵: ctrl+shift+r
二、換行標籤
<br/>
三、強調突出類標籤
加粗標籤
<b>較粗的文本</b>
<strong></strong>
四、斜體 強調突出類標籤
<i></i>
<em></em>
五、段落標籤
段落與段落之間有空行間隙
<p></p>
能夠使用p對段落裏的內容加修飾
六、水平線標籤
從瀏覽器左側貫穿到右側的一條水平線
<hr/>
七、span
<span>文字</span>
不可見，圈定文字的範圍，對範圍內容的文字進行特殊修飾
八、超連接標籤
鏈接到某個地址
<a href="地址" target="打開窗口的位置">超連接文本</a>
target:_self 默認值 在當前窗口打開新的頁面
_blank 在新創建的窗口中打開頁面數據庫
九、圖片標籤
<img src="圖片的路徑" width="100px" height="100px"/>
【說明】img根據圖片的實際大小進行伸縮，這是默認狀況
能夠自行設置img標籤的大小 width height 單位是px
把整個圖片按照設定的width height進行完整的顯示
title: 鼠標懸停在圖片上時的提示信息
alt：當圖片不能正常顯示時，用於替代圖片的文本
十、列表標籤
無序列表：能夠以列表形式顯示，顯示時沒有標記處前後順序
ul-li
unorder list ul
有序列表： 默認是數字順序
ol-li
定義列表：
dl-dt-dd
<dl> define list 定義列表
<dt> define title 定義標題 能夠是文字，能夠是圖片
<img src=""/>
</dt>
<dd> define description 定義描述
文本
</dd>
<dd>
</dd>
</dl>
【路徑】
一、絕對路徑：從磁盤根目錄開始的一個具體的路徑
E:\教學班級\1901\JavaWeb階段\day1\Html1901\img
二、相對路徑：參照物是當前文件
../img/photo4.jpg
../當前文件的上一級目錄
【說明】開發建議使用相對路徑：拷貝後，相對路徑是不變的，絕對路徑在文件拷貝後是會發生變化的
十一、表格標籤
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
</tr>
</table>
tr 行標籤
td 列標籤 嵌套在tr中
table屬性
border:邊框 1px
style="border-collapse: collapse;"
樣式="邊框-合併:合併;"
width="" height=""
表格的高級應用
<td colspan="3">學生成績表</td>
合併列="3" 【注意】刪除兩個td對
10年前：table用來佈局
流行的佈局：DIV+CSS
做用：以表格形式來顯示數據 重要
局部區域的佈局
十二、表單標籤：
form 圈定一個區域，把表單中的內容，提交到服務器
<form method="get/post" action="提交的地址">
</form>
method:提交方式
get 地址提交
post 表單提交
put
delete
action:提交地址,提交到服務器的哪一個文件中
各個表單標籤有通用格式
<input type="標籤的類型" id="惟一標識" name="標籤的名字" value="標籤裏的值"/>
text:文本框 屬性 placeholder="請輸入用戶名" 水印 做用：提示
password:密碼框
button:普通按鈕 調用JavaScript函數
reset:重置按鈕 把表單標籤的值恢復到初始值
submit:提交按鈕 把表單提交到action所對應的頁面中（頁面會跳轉）
checkbox:複選框 value 未來數據庫存儲時使用
radio :單選框 多個radio具備相同的name時，在選擇時互斥
checked="checked" 選中當前的單選按鈕或複選框
file:文件選擇框 用於選擇附件， Java實現文件上傳功能時使用
下拉列表標籤
<select>
<option></option>
</select>
文本域：textarea 用於輸入多行文本
rows 設置文本的行數 至關於設置height
cols 設置列數 至關於設置width
div:盒子
做用：容器，使用DIV把頁面劃分紅若干區域，在其裏面放置各類標籤
標籤的分類：
1）塊級標籤：獨佔一行，能設置width height
h1-h6 p table-tr 列表 ul-li ol-li dl-dt-dd
2）內聯標籤(行內標籤):在同一行顯示，不能設置width height
a
3）內聯塊(行內塊):在同一行內顯示，能設置width height
img 表單標籤
標籤之間能夠相互轉換
html :概念 做用
標籤語法：
1）標準標籤：雙標記標籤
2）空標籤：單標記
<標籤 屬性="值" 屬性="值"></標籤>
各類：
做業：
一、熟練掌握各類標籤
二、做業：