Html基礎整理

前言

• @author: zengjiahao
• @date: 2018/10/11

內容目錄

Html5入門及基礎01（網頁、基礎標籤、路徑）

1.web的三大結構組成

結構層:html
樣式層:css
行為層:js

2.標籤的分類與關係

分類:單標籤,雙標籤
關係:巢狀關係(保持縮排)/並列關係

3.h系列標籤

h1-h6
h1是頁面最重要的內容,一般用來存放logo
	一個頁面只能有一個h1

4.p - 段落標籤

p標籤
	存放文字,獨自佔據一行

5.文字格式化標籤(b、u、i、s)

加粗
	b/strong
下劃線
	u/ins
斜體
	i/em
刪除線
	s/del

6.標籤的屬性

屬性寫在標籤名後面
多個屬性用空格隔開
<標籤名 屬性名1="屬性值" 屬性名2="屬性值" ....></標籤名>

7.img標籤的使用

src:圖片的路徑
	可以是絕對路徑
	也可以是相對路徑
alt:當圖片載入失敗的時候,顯示的圖片描述文字
title:滑鼠懸停的時候,顯示的圖片描述文字
width/height:控制圖片的寬高,但是建議只控制一邊

8.a標籤的使用

href:目標頁面路徑
target:控制頁面的跳轉方式
	_self:預設值,不保留原頁面
	_blank:保留原頁面
base標籤
	可以統一控制頁面上所有的a標籤
	優點:節省程式碼
錨點定位
	都是利用id的唯一性
	id:具備唯一性,不能重複
 

9.相對路徑的掌握

檔案與html在同一級目錄
檔案在html的下一級目錄
	先進入這個資料夾,再找到檔案
		檔名/
檔案在html的上一級目錄
	先從資料夾中出來,再找到檔案
		../

Html5入門及基礎02（表格、表單、css初識）

1.無序列表的掌握

存放沒有順序的資料
ul中只能有li標籤,如果有其他標籤最好放在li中
ul有數量限制,但是li沒有限制
工作中,只要用到列表,那麼基本都是無序列表

2.瞭解表格的基本使用

table
	代表表格
tr
	代表表格的行
td
	代表行內的單元格
表格的屬性
	border
		表格邊框
	cellspacing
		邊框之間的空白間隙
			預設是2px
	cellpadding
		內容到邊框的距離
			一般不用
	align
		水平對齊方式
			left center right
其他的表格標籤
	th
		表頭資料
	thead
		表格的表頭結構
	tbody
		表格的主體結構
	caption
		表格的標題
			寫在table內部
合併單元格
	跨行合併
		rowspan
			後面不要的資料要刪除
	跨列合併
		colspan
			後面不要的資料要刪除
 

3.input標籤的不同type型別

text
	文字框
password
	密碼框
radio
	單選框
checkbox
	多選框
button
	普通按鈕
submit
	提交按鈕
reset
	重置按鈕
image
	圖片按鈕
file
	單檔案上傳
name
	1.給單選框分組,實現單選互斥
	2.給標籤設定分類,用於儲存
placeholder
	佔位符
checked
	單選框與多選框用來預設選中
value
	1.預設值
	2.按鈕的文字
maxlength
	控制最大的字元數
下拉框
	select
	option
	預設選中
		selected
文字域
	textarea
		大段文字的輸入
form
	表單域

4.color屬性的設定方式

1.英文單詞賦值
	範圍比較小
2.十六進位制
	工作中最常用
		可以簡寫
			#f00:紅色
3.rgb表示法
	0-255
		範圍跟十六進位制一樣