一、HTML是什麼？
Hyper Text Markup Language，超文本標記語言。
用標記這種特殊的語法結構來描述包含但並不限於文本的信息。
二、HTML的結構？
一個HTML文件由一個HTML標籤組成
一個HTML標籤由head標籤和body標籤組成
head標籤主要描述網頁中的不可見的信息，例如網頁編碼格式、網頁搜索關鍵字、網頁標題、網頁標題圖標
body標籤用來描述網頁中的主體內容信息
三、標記的組成部分?
標籤的基本語法:
<標籤名稱 屬性名稱="屬性值" 屬性名稱="屬性值" 屬性名稱="屬性值">內容</標籤名稱>
例如：
<img width="200px" height="100px"/>
四、head中常用的標籤
tltle:雙標籤 描述網頁的標題
meta:單標籤 用來網頁關鍵字，描述網頁編碼格式
五、html中常用的標籤
標籤從寫法上可以分爲兩類:單標籤 雙標籤
標籤從佈局上可以分爲行級元素和塊級元素
行級元素:會從上到下從左到右依次排列，如果超出一行的寬度會自動切換到下一行
塊級元素:每一個塊級元素都會單獨佔據一行
- 文字標籤:
font:雙標籤 行級標籤 描述文字信息 提供了一些相應的屬性可以用於修改文字顯示效果 size屬性表示文字大小
屬性中size表示文字大小 face表示文字字體 color表示文字顏色
span:雙標籤 行級標籤 描述文字信息 不能通過屬性修改文字樣式 span標籤通常作爲標準文字容器來使用
i:雙標籤 行級標籤 描述文本信息 使用斜體來修飾文字
b:雙標籤 行級標籤 描述文字信息 使用粗體來修飾文字
u:雙標籤 行級標籤 描述文字信息 使用下劃線修飾文字
h1-h6:雙標籤 塊級標籤 描述文字信息 描述標題內容文字更大而且加粗
p:雙標籤 塊級元素 描述文字信息 描述一段文字沒有任何文字樣式
- 圖片標籤:
img:單標籤 行級標籤 展示圖片
屬性中 src表示圖片地址 width表示圖片在瀏覽器中顯示的寬度 height表示圖片在瀏覽器中顯示的高度
alt圖片加載失敗時對應的提示文字 align設置圖文混排時文字和圖片的對齊方式
- 超鏈接標籤:
a:雙標籤 行級標籤 提供一個跳轉頁面的可點擊的文字
屬性中 href表示的是跳轉的目標地址 target跳轉之後的頁面在什麼地方展示
錨鏈接:跳轉到當前頁面的某個位置
跳轉到其他頁面:跳轉到當前項目的其他頁面,在跳轉到其他頁面時可以使用target指定新頁面展示的窗口,_blank表示新窗 體,_parent表示當前窗體跳轉到互聯網的一個網址,需要在href中寫完整的網頁地址
跳轉到其他頁面的某個位置:在地址後添加#錨點的名稱,可以跳轉到目標頁面的某個具體位置
- 換行標籤:
br: 單標籤 br後面的標籤會出現在下一行
- 水平線:
hr: 單標籤 塊級 顯示一條水平線
- 列表標籤:
ul: 無序列表 雙標籤 塊級標籤 一個無序列表的外層容器 每個列表項前會出現一個不分先後的標記
ol: 有序列表 雙標籤 塊級標籤 一個有序列表的外層容器 每個列表項前會出現一個代表先後次序的標記
li: 列表項 雙標籤 塊級元素 描述一個列表項信息
dl: 自定義列表容器 雙標籤 塊級 自定義列表標籤容器
dt: 自定義列表標題
dd: 自定義列表內容
- 表格:
table:雙標籤 塊級元素 作爲表格的外層容器
tbody:雙標籤 表格的主體內容容器 無論table中有沒有寫tbody標籤tr都是屬於tbody的子標籤
tr:雙標籤 表示表格中的一行
td:雙標籤 行級元素 表示一個普通的單元格
th:雙標籤 行級標籤 表示一個標題單元格
- 表單及表單控件:
form:雙標籤 塊級 表示一個表單 在表單中需要使用action屬性指定表單的提交地址 使用method屬性可以指定提交方式
get提交方式和post提交方式最根本的區別在於傳遞數據的方式不同,get提交方式是將數據追加到請求後通過鍵值對傳參數,post提交方式參數保存在了請求頭信息中
get提交方式提交的參數量小,速度較快,地址欄可見
post提交方式提交的參數量大,速度較低,地址欄不可見
- input:單標籤 行級標籤 表示輸入框控件
根據input標籤type屬性的不同可以將input分爲如下控件
input標籤中的name屬性表示該數據提交到服務器時對應的鍵
input標籤中的value屬性表示該輸入框的值
input標籤中的placeholder表示輸入框的提示文字
文本框:type="text" 輸入明文的文字
密碼框:type="password" 輸入使用*替換顯示的文字
單選框:type="radio" 通常用來選擇性別 在單選框中使用name屬性將多個單選框定義爲一組單選框 使用value屬性保存單選框的值 使用checked="checked"設置單選框默認選中
多選框:type="checkbox" 在多選框中使用name屬性將多個多選框定義爲一組單選框 使用value屬性保存多選框的值 使用checked="checked"設置多選框默認選中
隱藏域:type="hidden" 不在頁面顯示的一個控件 主要用於提交一些不想讓用戶看到的數據
文件域:type="file" 選擇本地文件上傳到服務器
普通按鈕:type="button" 點擊之後沒有任何特殊效果
重置按鈕:type="reset" 點擊之後將表單中的所有表單控件還原爲初始狀態
提交按鈕:type="submit" 點擊之後將表單提交到目標地址
圖片提交按鈕:type="image" 用圖片作爲一個提交按鈕
select:雙標籤 行級標籤 下拉框控件 name屬性是提交數據時的鍵
option:雙標籤 下拉框選項控件 option標籤中value表示選項的值如果沒有定義value會提交option的文本內容 使用otpion的 selected="selected"將該option設置爲選中
textarea:雙標籤 行級標籤 多行文本域
- 框架集和框架:
frameset:框架集 將現有窗口拆分成N個部分 必須寫在head和body之間
拆分之後的每一個子窗體需要使用frame標籤引入目標頁面
rows屬性可以縱向的將大窗體拆分成多個小窗體
cols屬性是橫向的將大窗體拆分成多個小窗體
border屬性設置框架集的邊框寬度
例如:rows="20%,50%,*" 拆分成上中下三個窗體 高度佔比分別是20%,50%,30% cols="20%,*" 拆分成左右兩個窗體 寬度佔比分別是20%，80%
frame:單標籤 引入一個頁面顯示到某個窗體上
src表示該窗體引入的頁面地址
noresize設置當前窗體的大小不可調整
name窗體名稱屬性 可以將一個超鏈接的target屬性設置爲某一個窗體的name 屬性值，設置之後點擊超鏈接打開的新頁面會在目標窗體展示
iframe:雙標籤 在網頁的任意位置引入其他的頁面
src引入的頁面地址
frameborder設置邊框寬度