前端基礎總結之html系列
html總結
HTML總結
網頁的認識
網頁的基本組成部分
文字
圖片
超連結
視訊
音訊
瀏覽器的認識
ie
trident
火狐
gecko
chrome
blink
safari
webkit
opera
blink
html的基本認識
html的骨架
標籤的種類
單標籤
雙標籤
標籤的關係
巢狀
父子
並列
兄弟
html中的標籤
h系列的標籤
標題標籤
h1~h6
語義：表示標題的語義
注意點：
獨佔一行
寬度預設繼承父盒子的寬度
高度由內容撐開
塊級元素！！！！！
p
段落標籤
語義：表示段落的語義
塊級元素
hr
水平線標籤
br
換行標籤
文字格式化標籤
沒有語義的
b：加粗
u：下劃線
i：傾斜
s：刪除線
有語義
strong：加粗
ins：下劃線
em：傾斜
del：刪除線
行內元素！！！！！！
（可以通過除錯工具中的computed檢視display的值即可）
img
圖片標籤
作用：在網頁中顯示一張圖片
屬性
src：圖片的路徑
告訴瀏覽器要顯示哪一張圖片
alt：替換文字
當圖片載入失敗時（如：路徑寫錯了），才顯示的文字
title：圖片的標題
滑鼠懸停在圖片上時，才顯示的文字
width：圖片的寬度
只設置的寬度，高度會等比例縮放
height：圖片的高度
只設置的高度，寬度會等比例縮放
一般寬高只會設定一個，如果同時設定了兩個，圖片可能會拉伸變形
路徑
絕對路徑
在電腦中的絕對路徑：帶有碟符的路徑
相對路徑
同級目錄
直接寫目標檔案的名字即可
./目標檔案的名字
結果：目標檔名字
下級目錄
1、寫目標檔案所在的資料夾名字
2、進入到資料夾裡面
3、直接寫目標檔案的名字即可
結果：目標資料夾/目標檔案的名字
上級目錄
1、首先要去上一級目錄
2、直接寫目標檔案的名字即可
結果：../目標檔案的名字
a
連結標籤
作用：點選之後跳轉到其他頁面
屬性
href
目標網頁的路徑
target
設定連結跳轉的方式
_self:在當前頁面進行跳轉
_blank:在新的視窗中進行跳轉
base
統一設定頁面中所有a標籤的跳轉方式
<base target="_blank">
寫在title標籤的下面
其他用法
不跳轉
href=“#”
下載
當路徑指向瀏覽器無法開啟的檔案時，瀏覽器會預設下載
定位
在當前頁面進行定位
1、在目標標籤上新增id屬性
2、在href屬性上寫 #id屬性值
在跳轉之後的頁面進行定位
1、在目標標籤上新增id屬性
2、href屬性上 目標檔案的路徑#id屬性值
列表
無序列表
ul>li
注意點
ul中只能有li標籤
li標籤是一個容器，可以放任意的標籤
每一項是沒有順序的
有序列表
ol>li
注意點
ol中只能有li標籤
li標籤是一個容器，可以放任意的標籤
每一項是有順序的
自定義列表
dl>dt/dd
dt
自定義列表的小標題
dd
自定義列表中的每一項
特殊字元
空格合併現象
如果html程式碼中同時出現多個空格、換行、tab等，最後瀏覽器只會解析出一個空格
空格
 ；
大於號
>；
小於號
<；
表格
標籤
table：表示表格的整體
tr：表示表格的一行
td：表示表格的單元格
屬性
border：表示表格的邊框
align
水平對齊方式
給誰設定？？？？
align=“center”
給table設定
整個表格在頁面中水平居中
給tr設定
讓該tr中的內容居中
給td設定
讓該td中的內容居中
cellspacing
單元格與單元格之間的間隙
cellpadding
單元格邊框與內容之間的距離
width
寬度
height
高度
css
細線表格
border-collapse：collapse；
表格的其他標籤
th
表頭標籤
caption
表示表格整體的標題
表格的結構化標籤
thead
表格的頭部
tbody
表格的身體
tfoot
表格的底部
有相容性問題
合併單元格
左上原則
水平方向合併，保留最左邊的，其他都刪掉
垂直方向合併，保留最上面的，其他都刪掉
跨行or跨列
跨行：rowspan=“合併的數量”
跨列：colspan=“合併的數量”
給保留的單元格加
表單系列標籤
input系列標籤
通過type屬性值的不同，表現不同的形態
text
文字框
屬性
name
告訴後端傳送過去的資料是什麼？？標籤的含義
value
使用者輸入的資料就是value
提前在程式碼中設定好，預設值
maxlength
使用者輸入的最大字元數
password
密碼框
特殊效果：密文輸入
屬性
name
告訴後端傳送過去的資料是什麼？？標籤的含義
value
使用者輸入的資料就是value
提前在程式碼中設定好，預設值
maxlength
使用者輸入的最大字元數
radio
單選框
屬性
name
告訴後端傳送過去的資料是什麼？？標籤的含義
分組
有相同name屬性值的radio為一組，一組中同時只能有一個radio被選中！！！
value
使用者選擇的資料是什麼
預設選中
checked
單選框的一組中只能設定一個！！
checkbox
多選框
屬性
name
告訴後端傳送過去的資料是什麼？？標籤的含義
value
使用者選擇的資料是什麼
預設選中
checked
file
檔案上傳
屬性
multiple（html5新增的屬性）
多檔案上傳
表單按鈕
submit
提交按鈕
功能：提交使用者的資料給後臺
reset
重置按鈕
功能：重置為預設值
button
普通按鈕
功能：本身沒有功能，需要之後配合js使用
注意點
要通過value屬性，設定按鈕上的文字
image
圖片按鈕
樣式：就是一張圖片
功能：就是提交按鈕，只是顯示的是一張圖片
如果要實現按鈕的功能，需要配合form表單一起使用（用form標籤把表單標籤包裹起來即可）
select
下拉選單
整體
select
每一項
option
預設選中
selected
textarea
文字域
作用：輸入大段文字
css
禁止自由縮放
resize:none
label
作用：把文字和表單標籤關聯起來
使用有兩種方法
<input type="radio" id="man"><label for="man">男</label>
<label><input type="radio" id="man">男</label>
沒有語義的佈局標籤
div
塊級元素的代表
span
行內元素的代表
html5的新標籤新屬性
html5新增的語義標籤
header
網頁頭部的語義
div+網頁頭部的語義
nav
網頁導航的語義
div+網頁導航的語義
footer
網頁底部的語義
div+網頁底部的語義
html5新增的表單屬性
placeholder
佔位符
autofocus
自動獲取焦點
multiple
多檔案上傳
多媒體標籤
audio：音訊標籤
屬性
src:音訊的路徑
controls：播放控制元件（必加）
有相容性的
autoplay
自動播放
loop
迴圈播放
video：視訊標籤
屬性
src:視訊的路徑
controls：播放控制元件（必加）
有相容性的
autoplay
自動播放
loop
迴圈播放