html5 知識點總結（節(jié)選）
1.html基礎結構
?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）特殊符號
? ?????????????? 空格? ,< ; <? ,>>? ,© 版權?? ,&&
? ? ? ? （7）屬性（title蚂四，style光戈，class，id）
????????????????title?鼠標的提示 <p title="鼠標的提示">遂赠；style?元素的外觀久妆；class?<p class="red">；id?元素的唯一標識跷睦，有且只有一個
? ? ? ? ? ? （8）不可見標簽
????????????????????1）<meta charset="utf-8">不讓網頁不亂碼
? ? ? ? ? ? ? ? ? ? 2）<meta name="description" content="網頁描述">
? ? ? ? ? ? ? ? ? ? 3）<meta name="keywords" content="前端">
? ? ? ? ? ? （9）圖片（img）
? ??????????????????<img src="../img/1.jpg" width="100" alt="小王"> ./當前路徑 ../上級路徑
? ??????????????????alt 替換圖片文字筷弦；align 對齊（不需要掌握）；width 寬;hight 高抑诸；
????????????（10）超鏈接
? ? ? ? ? ? ? ? ? ? 路徑問題：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1）相對路徑：相對于當前html文件的位置烂琴，
????????????????????????????????????????????????????????????./開頭 當前目錄（可以省略），
????????????????????????????????????????????????????????????../開頭 上級目錄
? ??????????????????????????????????????????????????????????文件夾或者文件名/開頭（省略一個./）
????????????????????????????????????2）絕對路徑：http 開頭
? ??????????????????????????????????????????????????????????/開頭 代表網頁的根域名
? ? ? ? ? ? （11）錨點
? ? ? ? ? ? ? ?????????1） 錨點：頁面內容切換
? ? ? ? ? ? ? ? ? ? ? ? 2 ）定義：<a id="ch01"></a>
? ? ? ? ? ? ? ? ? ? ? ? 3）鏈接錨點： <a href="#ch01"> </a>
????????????（12）iframe
? ? ? ? ? ? ? ? ? ? 1）定義：在網頁中引入其他網頁
? ? ? ? ? ? ? ? ? ? 2）src 引入地址
? ? ? ? ? ? ? ? ? ? 3）width 寬/ height 高
? ? ? ? ? ? ? ? ? ? 4）scrolling 是否滾動 （yes/no）
? ? ? ? ? ? ? ? ? ? 5）frameboeder=0 框架邊框
????????????（13）frameset框架集（不需掌握）
? ? ? ? ? ? ? ? ? ? 1）frame框架：name框架的名稱蜕乡；src 文件地址奸绷；
? ? ? ? ? ? ? ? ? ? 2）屬性：cols 列， %百分比 层玲，數字像素 号醉，*剩余的寬
????????????????????????????????????rows 行
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? noresize 不允許拖動
????????????????????????????????????frameborder =“0” 框架的寬度
????????????????效果圖如下：
????????????（14）圖片的熱點區(qū)域
? ??????????????????作用：形成不規(guī)則的連接區(qū)域
????????????????????建議反症，使用dreamweaver繪制熱點區(qū)域（圖中熱點區(qū)域使用dreamweaver繪制）
? ??????????????????<img usemap="Map"> <map name="Map"> <area shape="" coords="" href="">
? ? ? ? ? ? 效果圖如下：
????????????????????（圖中只定義了湖南，四川畔派，河北铅碍，可點擊跳轉,圖中可以看到湖南有藍色邊框）
? ? ? ? ? ? （15）表格
? ? ? ? ? ? ? ? ? ? ? ? 1）屬性：border 邊框；width 寬度线椰；align 對齊 （left right center）胞谈；
????????????????????????????????????????valign 垂直對齊 （top center bottom）；cellspacing 表格的間距憨愉；
? ??????????????????????????????????????cellpadding 到邊框距離烦绳；bgcolor 背景顏色；
? ? ? ? ? ? ? ? ? ? ? ? 2）子元素：tr（行）莱衩， td（列）爵嗅，th（標題列）
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 屬性：rowspan 行合并；colspan 列合并笨蚁；
? ? ? ? ? ? ? ? ? ? ? ? 3）完整表格結構：<table>
????????????????????????????????????????????????????????????????<thead></head>
????????????????????????????????????????????????????????????????<tbody></tbody>
????????????????????????????????????????????????????????????????<tfoot></tfoot>
????????????????????????????????????????????????????????</table>
3.hbuilder-x快捷鍵分享：
? ? ? ? ? ? （1）符號表示：>表示子集睹晒；+代表兄弟；() 組括细；$ 序列伪很；@ 起始位置；{}文本
????????????（2）快速生成html基本結構：奋单！+Tab 基礎的htm結構锉试；
? ??????????????????????????????????????????????????????????html+enter 基礎html結構；
? ??????????????????????????????????????????????????????????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列的表格為例)
