HTML
1、HTML的概述（瞭解）
1.1、HTML簡介
l HTML(Hyper Text Markup Language)：超文本標記語言。
文本: 就是在記事本中寫的內容
超文本：超越了文本範疇
語言：語言就是交流溝通工具（JAVA是一種編程語言）
標記語言：標籤語言
>標記就是標籤
>HTML不是一種編程語言，而是一種標記語言。直接可以被瀏覽器解析執行
l 作用：
*就是用來寫網頁的
1.2、HTML的書寫規範
a).HTML的創建
可以使用文本編輯器來創建，擴展名html或htm
可以被IE（瀏覽器）解析瀏覽的。
b).HTML的結構
<html>
<head></head>
<body></body>
</html>
c).Html標籤的規範
*Html是由一對尖括號包裹着的關鍵字組成的。例如：<body>
*HTML通常是成對出現的，是由一個開始標籤和一個結束標籤組成的。例如：<body></body>
特殊情況：
HTML的空標籤。例如：<br/>
HTML的空標籤都是在末尾自關閉了。
HTML的空標籤 內容體 都是空的。
*HTML標籤通常是有屬性的。屬性格式：屬性名=”屬性值” 可以用雙引號、單引號或者不加引號。建議使用引號的。 例如：<font color="blue" size='22' face=隸書>真晴朗</font>
*HTML是可以嵌套使用的。（只允許包裹嵌套，不允許交叉嵌套）
*HTML是大小寫不敏感的。推薦使用小寫
*HTML代碼中的 空格和換行 在解析時候會默認忽略
2、HTML的基本標籤（鏈接標籤、表格標籤）
2.1、文件標籤（瞭解）
l <html>標籤
相當於JAVA中類的大括號。
聲明瞭該文檔是一個HTML文檔。
包裹了整個HTML 文件
l <head>標籤
網頁的說明性信息。
它裏面的內容是不會顯示。
擴展：
1、HTML的顏色設置（美工部分的知識，瞭解）（HTML三原色：紅綠藍）
l 顏色關鍵字 例如：red,blue,pink
l 顏色代碼。 例如：#000000。 每一位都是16進制。紅色、綠色、藍色 0~9 A~F（開發中最多）
l 三原色。 例如：rgb(0,0,0) 每一位取值0~255 256個數
2、絕對路徑和相對路徑（重要）
絕對路徑：文件在硬盤上的具體位置。
相對路徑：文件相對於引入者的位置。
/
\\ 多個一個轉義
在使用效果上無區別的
l <title>標籤
它是網頁的標題
l <body>標籤
負責顯示頁面的
它裏面的內容是會顯示的
*屬性：
>text 設置body標籤中正文的顏色
>background 設置body背景圖片（和背景顏色衝突）
>bgcolor 設置body的背景顏色
2.2、排版標籤（瞭解）
l <br/>標籤
*就是一個換行
l 空格佔位符
*是一個空格
l HTML註釋
*格式：<!--註釋內容 -->
l <p>標籤
*就是一個段落標籤。段前段後各加一行
*屬性：
>align 設置段落的對齊方式
l <hr/>標籤（少）
*就是一條水平線
*屬性：
>color 設置水平線的顏色
>size 設置水平線的粗細
>width 設置水平線的長度
擴展：
1、HTML長度設置（美工知識，瞭解）
像素：width =”6”或者width =”6px” 長度是固定
2.3、塊標籤（熟練）
l <div>
在文檔（瀏覽器）中設定一個塊區域
塊級元素（自動換行）
l <span>
在行內設定一個塊區域
內聯元素（不自動換行）
HTML絕大多數都屬於塊級元素或者內聯元素
2.4、字體標籤（少）（瞭解）
l <font>標籤 （少）
*設置字體的大小、顏色、字體類型
*屬性：
>color 設置字體顏色
>size 設置字體大小 取值範圍 1~7
>face 設置字體類型。 JAVA體 系統字體（可以從記事本中看）
l 標題標籤
*h1~h6
*h1最大，h6最小
l 斜體、粗體標籤
*斜體標籤<i></i>
*粗體標籤<b></b>
l 滾動字幕（瞭解）
(marquee標籤)
*只兼容IE，所以不建議使用
2.5、列表標籤（熟練）
l 有序列表(ol標籤) （使用較少）
*屬性
>type 設置有序列表的項目序號。 A,I,1
>start 設置有序列表的項目序號起始值。
l 無序列表(ul標籤)（常用）
*屬性：
>type 設置無序列表的項目標號。
l 列表項條目（li標籤）
2.6、圖片標籤（熟練）
l <img />
*屬性：
>src 設置圖片引入路徑的（常用）
路徑：絕對路徑和相對路徑
>alt設置替代圖片的文字（常用）
>width 設置圖片的寬度
>height 設置圖片的高度
>border 設置圖片的相框寬度
>align 設置圖片的對齊方式（不建議使用）
2.7、鏈接標籤（重點）
l <a>標籤
*屬性：
>href 設置鏈接路徑（重點）
訪問內網：可以用相對路徑和絕對路徑
訪問外網：需要加上http協議。 例如：http://www.baidu.com
>name 設置錨點（常用）
配合herf使用
設置錨點，a標籤可以沒有內容
>target 定位資源打開位置。
一般可以配合框架使用。
例如：<a href=”xx.html” target=”top”>打開</a>
<frame name=”top”/>
那麼就是在名字爲top的框架中打開。
*注：如果要實現跳轉鏈接，那麼必須有內容有href屬性。例如：<a>內容</a>
2.6、圖片標籤（熟練）
l <img />
*屬性：
>src 設置圖片引入路徑的（常用）
路徑：絕對路徑和相對路徑
>alt設置替代圖片的文字（常用）
>width 設置圖片的寬度
>height 設置圖片的高度
>border 設置圖片的相框寬度
>align 設置圖片的對齊方式（不建議使用）
2.7、鏈接標籤（重點）
l <a>標籤
*屬性：
>href 設置鏈接路徑（重點）
訪問內網：可以用相對路徑和絕對路徑
訪問外網：需要加上http協議。 例如：http://www.baidu.com
>name 設置錨點（常用）
配合herf使用
設置錨點，a標籤可以沒有內容
>target 定位資源打開位置。
一般可以配合框架使用。
例如：<a href=”xx.html” target=”top”>打開</a>
<frame name=”top”/>
那麼就是在名字爲top的框架中打開。
*注：如果要實現跳轉鏈接，那麼必須有內容有href屬性。例如：<a>內容</a>
2.8、表格標籤（重點）
年度財報
|
部門名稱 |
第一季度 |
第二季度 |
平均 |
|
A |
100 |
100 |
100 |
|
B |
100 |
100 |
|
|
總數 |
400 |
|
|
l 表格標籤
*table,用來定義一個表格
l 行標籤
*tr，用來定義一個表格內的行
l 單元格標籤
*td，用來定義一個單元格。
*th，用來定義一個表頭單元格。默認居中加粗
*td及th屬性：
>colspan 列合併
>rowspan 行合併
l 表格標題標籤
*caption，用來定義一個表格標題
*必須緊跟在table標籤之後
l 分組標籤（闡述理論）（瞭解）
*對錶格中的行進行分組
*thead 定義表格的頁眉。僅有一個
*tbody 定義表格的主體。一個或多個
*tfoot 定義表格的頁腳。僅有一個
*如果在分組標籤外定義了行，那麼行默認屬於TBODY
*分組標籤如果使用必須三個一起使用，否則無效果。
*Firefox火狐，如果你沒有分組，默認分組 都分在tbody
分行下載：
可以控制表格分行下載，從而提高下載速度。
在需要分行下載處加上<tbody>和</tbody>。
公司年度報告
|
第一季度 |
第二季度 |
平均 |
|
100 |
100 |
100 |
|
100 |
100 |
|
|
400 |
||
3、HTML的表單標籤（重點）
作用：表單用來提交用戶輸入的數據，整個WEB程序的入口
是用戶和服務器（程序）交流最基本的入口
表單標籤
用戶需要輸入的數據： 表單的輸入項
3.1、表單標籤
*<form>,就定義了一個表單
*常用屬性：
>action 規定當提交表單時，向何處發送表單數據
向內網提交：相對路徑和絕對路徑
向外網提交：http://www.baidu.com
>method 規定如何發送表單數據
post 和 get
默認是get
*表單提交的數據格式：
l 參數名=參數值
l 參數之間用&符號鏈接
面試題：
表單提交 post和get的區別？
1、get方式提交會把參數顯示在地址欄
post方式提交不會把參數顯示在地址欄上
2、get方式敏感信息不安全
post方式敏感信息安全
3、get方式提交，官方限制提交大小僅1KB（但多數瀏覽器可以提交2KB）
post方式提交，提交大數據
3.2、表單的輸入項標籤
*<input>標籤，定義了一個表單的輸入項，用來接收用戶輸入的信息。
*屬性：
>type 指定輸入項標籤的類型，不同類型的輸入標籤樣子不同
文本框 text。輸入的文本信息直接顯示在框中。
密碼框 password。輸入的文本以原點或者星號的形式顯示。非明文
單選框 radio 如：性別選擇。
複選框 checkbox 如：興趣選擇。
提交按鈕 submit 用於提交表單中的內容。
重置按鈕 reset 將表單中填寫的內容設置爲初始值
附件框 file 後期擴展內容，會自動生成一個文本框，和一個瀏覽按鈕。例如：照片
隱藏字段 hidden 在頁面上不顯示，但在提交的時候隨其他內容一起提交。例如：用戶編號
按鈕 button 可以爲其自定義事件（JS知識中會講）。
圖片提交按鈕 image 是一個圖片形式的提交按鈕。用來美化提交按鈕的。提交表單數據時，會將鼠標點擊圖片的座標一起封裝。較少使用
>name 用來指定輸入項的名稱。即表單輸入項提交時的 參數名稱
>value 用來指定輸入項的值或用來設置按鈕名字。即表單輸入項提交時的 參數值
>checked 僅用來設置單選框或者多選框的默認勾選。值爲checked爲默認選中
3.3、選擇框標籤
*<select>標籤，定義了一個選擇框標籤
*屬性：
>name 用來指定選擇項的名稱。即表單輸入項提交時的 參數名稱
> multiple 用來設置選擇框爲多選形式
*<option>標籤，定義了一個選擇框條目標籤
*屬性：
>value 用來指定選擇項的值。即表單輸入項提交時的 參數值
>selected 用來設置選擇框的默認選中。值爲selected爲默認選中
3.4、文本域標籤
*<textarea>標籤，定義一個文本域輸入框
*屬性：
>name 用來指定文本域的名稱，即參數名
>cols 定義文本域顯示幾列
>rows 定義文本域顯示幾行
和<input type=“text”/>區別：
1、文本域可以換行，而文本框不可以
2、文本域的值是寫在內容體中包裹着的，文本框的值是在value中
4、HTML的框架標籤及特殊符號（瞭解）
4.1、其他標籤（瞭解）
l <meta>
*定義了頁面信息
*存在於<head>標籤中
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
設置HTML文件的編碼格式
<meta http-equiv="refresh" content="10; url=http://www.itcast.cn">
能在預定秒數內自動轉到指定的網址。 10 表示 10秒。
l <link>
*定義了文檔和外部資源的關係
*存在於<head>標籤中
*格式：<link rel="stylesheet" type="text/css" href="CSS文件路徑"/>
4.2、特殊符號（瞭解）
|
特殊符號 |
在HTML中的表示符號 |
備註 |
|
|
|
不斷行的空白符 |
|
< |
< |
小於號 |
|
> |
> |
大於號 |
|
& |
& |
&符號 |
|
" |
“ |
引號 |
|
® |
® |
已註冊 |
|
© |
© |
版權 |
格式：
& 特殊符號 ;
4.3、框架標籤（瞭解）
作用：將網頁分割成幾個部分，在每個部分分別顯示不同內容。
l <frameset>標籤
HTML有兩種模式：文檔模式（BODY），框架模式(FRAMESETs)
表示框架標記，用以宣告HTML文件爲框架模式，並設定視窗如何分割。
注：框架標籤不可以放到<body>裏，一般爲了代碼的可讀性，一般會用<frameset>替代<body>標籤。也可以放到<head>和<body>之間。
*常用屬性：
>cols 垂直切割。接收整數值或百分比。*代表佔用剩餘空間
>rows 橫向切割。接收整數值或百分比。*代表佔用剩餘空間
l <frame>標籤
表示框架頁面，用來承載頁面，並修改參數屬性值
*常用屬性：
>src 表示資源的路徑
>name 設置框架的名稱
例如<frame name=“top”/> <a href=“xx.html” target=“top”>top中打開</a>。那麼xx.html是在top框架中打開
框架已經逐漸被DIV+CSS形式取代