Html5 學習筆記 --》html基礎 css 基礎
HTML5 功能
HTML5特點
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>基本格式</title> </head> <body> <a href="http://www.baidu.com">百度</a> </body> </html>
基本元素了解:
blockquote :此元素實際作用出了和<p> 元素一樣 有段落空隙的功能 還包含了手尾縮進的功能 語義上表示 打斷的引用他處的內容
pre:編輯器什麽樣 顯示出來什麽樣
figure figcaption 使用插圖:
<figure>
<figcaption>這是一張圖</figcaption>
<img src="img.png">
</figure>
table 行合並 rowspan 列合並 clospan
tfoot 不管編輯器頁面具體位置 顯示固定在表格下方
thead 固定在表格上方 為表頭結構
caption 給表格添加標題
<caption>這是一個任務表格</caption>
colgroup 處理某個列 span 定義處理那些列 1 表示1列 2表示處理2列 如果單獨處理第二列則需要先定義第一列 然後再單獨定義第二列
<colgroup span="2" style="background:red;"> // 紅色和綠色部分可以相互替換
<col> // 進行占位
<col style="background:red;">
</colgroup>
文檔元素使用:
hgroup 作用為當多個標題出現 幹擾到已對或者多個本身需要整合的標題 這是使用此元素的包含組群
section 這裏一般存放文檔主題內容
nav 添加一個導航
article 獨立添加一個獨立的文檔 包含頭 尾 主題等一系列內容 比較大的頁面會使用到
aside 生成註釋欄
address 聯系信息 地址電話等
details 元素生成詳情區域 summary 勻速在內部生成說明標簽 盡量不要用
整體結構:
img圖像嵌入元素:
音頻視頻:
音頻和視頻差不多:
表單元素:
元素列表:
form 元素:
input 元素:
input type=text 時候:
html實體:
css選擇器:
只有第一層的 li 才控制 其他層次的不控制
a::after {
content : ‘搜索-‘;
}
偽類選擇器:
解釋 選擇子元素的第二個元素
組件默認情況下不顯示
顏色定義: 顏色表示方案
html 4 時候 顏色代碼只有16種
字體設置:
Web字體: BrushScriptStd.otf 是系統字體庫字體 引入可以直接使用
塊級元素隔離其他元素 p div 等
transparent :透明色設置
等比例縮放圖像:
eg:
表格列表樣式:
border-spacing :單元格每個格子之間間距
empty-cells: hide 單元格內容為空 隱藏單元格邊框
盒子的陰影和輪廓
box-shadow:給div實現光影效果
Html5 學習筆記 --》html基礎 css 基礎