html5 知識點總結(jié)（節(jié)選）
1.html基礎(chǔ)結(jié)構(gòu)
?2.html標簽：
? ??（1）h1-h6，p，<br/>
? ??????????????h1-h6為標題標簽，大小依次減小，p標簽為段落標簽（<br/>為強制換行）
? ??（2）列表（ol,ul,li）
? ???????ol為有序列表，ul為無序列表，li為列表項
? ??????????效果圖如下：
? ? ? ? （3）定義列表（dl，dt，dd）
? ? ? ? ? ? ? ? dl為定義列表，dt為定義項，dd為定義項的說明
? ? ? ? ? ? ? ? 效果圖如下：
? ? ? ? （4）排版標記（b strong i em sub sup del u hr big small）
? ? ? ? ? ? ? ? b,strong為文本加粗；i，em為文本傾斜；sub為下標；sup為上標；del刪除線；u下滑下；hr為水平線；
? ??????????????big，small? ?為字體大小（已廢棄）。
????????（5）塊行元素
? ? ? ? ? ? ? ? 1）塊元素總是新起一行，可以包含塊元素，行元素，文本
? ? ? ? ? ? ? ? ? ? ? ? 如：div，p，h1-h6，ul，ol，li，dl，dt，dd
? ? ? ? ? ? ? ? 2）行元素和其他元素在一起，一顆包含行元素，文本
? ? ? ? ? ? ? ? ? ? ? ? 如：span，i，em，b，strong，u，del，sub，sup，big，small，a，img
? ? ? ? （6）特殊符號
? ?????????????? 空格? ,< ; <? ,>>? ,© 版權(quán)?? ,&&
? ? ? ? （7）屬性（title，style，class，id）
????????????????title?鼠標的提示 <p title="鼠標的提示">；style?元素的外觀；class?<p class="red">；id?元素的唯一標識，有且只有一個
? ? ? ? ? ? （8）不可見標簽
????????????????????1）<meta charset="utf-8">不讓網(wǎng)頁不亂碼
? ? ? ? ? ? ? ? ? ? 2）<meta name="description" content="網(wǎng)頁描述">
? ? ? ? ? ? ? ? ? ? 3）<meta name="keywords" content="前端">
? ? ? ? ? ? （9）圖片（img）
? ??????????????????<img src="../img/1.jpg" width="100" alt="小王"> ./當前路徑 ../上級路徑
? ??????????????????alt 替換圖片文字；align 對齊（不需要掌握）；width 寬;hight 高；
????????????（10）超鏈接
? ? ? ? ? ? ? ? ? ? 路徑問題：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1）相對路徑：相對于當前html文件的位置，
????????????????????????????????????????????????????????????./開頭 當前目錄（可以省略），
????????????????????????????????????????????????????????????../開頭 上級目錄
? ??????????????????????????????????????????????????????????文件夾或者文件名/開頭（省略一個./）
????????????????????????????????????2）絕對路徑：http 開頭
? ??????????????????????????????????????????????????????????/開頭 代表網(wǎng)頁的根域名
? ? ? ? ? ? （11）錨點
? ? ? ? ? ? ? ?????????1） 錨點：頁面內(nèi)容切換
? ? ? ? ? ? ? ? ? ? ? ? 2 ）定義：<a id="ch01"></a>
? ? ? ? ? ? ? ? ? ? ? ? 3）鏈接錨點： <a href="#ch01"> </a>
????????????（12）iframe
? ? ? ? ? ? ? ? ? ? 1）定義：在網(wǎng)頁中引入其他網(wǎng)頁
? ? ? ? ? ? ? ? ? ? 2）src 引入地址
? ? ? ? ? ? ? ? ? ? 3）width 寬/ height 高
? ? ? ? ? ? ? ? ? ? 4）scrolling 是否滾動 （yes/no）
? ? ? ? ? ? ? ? ? ? 5）frameboeder=0 框架邊框
????????????（13）frameset框架集（不需掌握）
? ? ? ? ? ? ? ? ? ? 1）frame框架：name框架的名稱；src 文件地址；
? ? ? ? ? ? ? ? ? ? 2）屬性：cols 列， %百分比 ，數(shù)字像素 ，*剩余的寬
????????????????????????????????????rows 行
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? noresize 不允許拖動
????????????????????????????????????frameborder =“0” 框架的寬度
????????????????效果圖如下：
????????????（14）圖片的熱點區(qū)域
? ??????????????????作用：形成不規(guī)則的連接區(qū)域
????????????????????建議，使用dreamweaver繪制熱點區(qū)域（圖中熱點區(qū)域使用dreamweaver繪制）
? ??????????????????<img usemap="Map"> <map name="Map"> <area shape="" coords="" href="">
? ? ? ? ? ? 效果圖如下：
????????????????????（圖中只定義了湖南，四川，河北，可點擊跳轉(zhuǎn),圖中可以看到湖南有藍色邊框）
? ? ? ? ? ? （15）表格
? ? ? ? ? ? ? ? ? ? ? ? 1）屬性：border 邊框；width 寬度；align 對齊 （left right center）；
????????????????????????????????????????valign 垂直對齊 （top center bottom）；cellspacing 表格的間距；
? ??????????????????????????????????????cellpadding 到邊框距離；bgcolor 背景顏色；
? ? ? ? ? ? ? ? ? ? ? ? 2）子元素：tr（行）， td（列），th（標題列）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 屬性：rowspan 行合并；colspan 列合并；
? ? ? ? ? ? ? ? ? ? ? ? 3）完整表格結(jié)構(gòu)：<table>
????????????????????????????????????????????????????????????????<thead></head>
????????????????????????????????????????????????????????????????<tbody></tbody>
????????????????????????????????????????????????????????????????<tfoot></tfoot>
????????????????????????????????????????????????????????</table>
3.hbuilder-x快捷鍵分享：
? ? ? ? ? ? （1）符號表示：>表示子集；+代表兄弟；() 組；$ 序列；@ 起始位置；{}文本
????????????（2）快速生成html基本結(jié)構(gòu)：！+Tab 基礎(chǔ)的htm結(jié)構(gòu)；
? ??????????????????????????????????????????????????????????html+enter 基礎(chǔ)html結(jié)構(gòu)；
? ??????????????????????????????????????????????????????????html>(head>title)+body（光標放在最后按Tab鍵）
? ? ? ? ? ? （3）快速建立多個p標簽：????p*5
????????????????????????????????????????????????????????????p*5>{我是第$行} 遞增（1,2,3,4,5）
????????????????????????????????????????????????????????????p*5>{我是第$@-} 倒序排列（5,4,3,2,1）
????????????????????????????????????????????????????????????p*5>{我是第$@100} 從100行開始
? ? ? ? ? ? （4）快速生成表格：table>tr*3>td*3>{第$列}? (以3行3列的表格為例)
