1. 程式人生 > >HTML 5 的基礎知識1

HTML 5 的基礎知識1

HTML 5的基本結構和語法變化

HTML 5 文件的根元素依然是<htm…l/>,這是固定不變的內容。在<html…/>元素裡包含<head…/>和<body…/>兩個子元素。<head…/>元素主要定義HTML 5 文件的頁面頭,其中<title…/>元素用於定義頁面標題,除此之外,還可以在<head…/>元素中定義meat,樣式單等資訊;<body…/>元素用於定義頁面主體,包括頁面的文字內容和絕大部分標籤。

標籤不再區分大小寫
元素可以省略結束標籤
HTML 5 保留的常用元素
html:他是根元素,在HTML 5 中可以省略
head:用於定義文件的頭部分
title:用於定義文字的頁面標題
body:用於定義文字的主體部分
h1到h6:用於定義標題一到標題六
p:定義段落,可以指定id,class,style,dir,title等通用屬性,還可以指定onclick等各種事件屬性。
br:用於換行
hr:定義水平線
div:定義文件中的節,可以指定id,class,style,dir,title等通用屬性,還可以指定onclick等各種事件屬性。
span:與div基本相似,但是預設不會換行。
文字格式相關元素


b:定義粗本文體
i:定義斜體文體
em:定義強調文字,實際效果和斜體差不多,可以指定id,class,style,dir,title等通用屬性,還可以指定onclick等各種事件屬性。

使用a元素新增超連結和錨點
href:指定超連結所連線的另一個資源。
hreflang:指定超連結所連線的文件所使用的語言。
插入定位錨點需要指定name屬性,name屬性值就是該命令錨點的名稱。
ul:定義無序列表
ol:定義有序列表
start:預設是第一個
type:型別

li:定義列表項
dl:用於定義術語列表
dt:用於定義標題列表
dd:定義普通列表項

使用 img 元素新增圖片
src:該屬性指定圖片所在位置,該屬性值既可以是相對路徑,也可以是絕對路徑。
alt:該屬性指定一段文字,作為該圖片的提示資訊。
height:高度
width:寬度
表格相關屬性
table:用於定義表格


caption:標題
tr:定義表格行,可以指定id,class,style,dir,title等通用屬性,還可以指定onclick等各種事件屬性。
td:定義單元格,可以指定id,class,style,dir,title等通用屬性,還可以指定onclick等各種事件屬性。
th:定義表格的表頭單元格
tbody:定義表格的主體
thead:定義表格頭
tfoot:定義表格腳
rowspan:跨行合併
colspan:跨列合併
增強的 iframe 元素
src:該屬性指定一個頁面的URL,指定該 iframe 將載入那個頁面。
name: 設定name
longdesc: 該屬性也是指定一個頁面的URL,
scrolling: 設定是否在 iframe 中顯示滾動條。
height:高度
width:寬度
HTML 5 保留的通用屬性

id
style
class
dir
title
HTML 5 新增的通用屬性
contentEditable

HTML 5 新增的結構元素
article:該元素代表頁面上獨立完整的一篇文章
section:該元素用於對頁面內容進行分塊。
header:標題
footer:腳註
nav:導航條
aside:該元素專門用於定義當前頁面或當前文章的附屬資訊通常來說推薦該元素使用CSS渲染成側邊欄。
main:文件最只應包含一個該元素,該元素不應該反在允許重複的內容中,
figure:該元素用於表示一塊獨立的“圖片區域“
figcaption:該元素用於定義 圖片區域 的標題
HTML 5 新增的語義元素
mark:用於顯示頁面中需要重點關注的內容 ,會用黃色包起來。
HTML 5 新增的拖放 API