HTML知识点总结

1.常见浏览器内核

Chrome: Blink

Opera: Webkit

Firefox: Gecko

IE：Trident

Safari：WebKit

2.web标准三层组成

结构(网页元素)、表现(外观样式)和行为(交互)

3.标签语义化

在合适的位置放上合适的标签，让网页结构更清晰。先确定语义化标签，再选用合适的CSS。

优点： 1.方便阅读和维护

            2.浏览器更好地解析

            3.利于搜索引擎优化

4.常用标签

4.1 排版标签：标题 h、段落 p、水平线 hr、换行 br、span或div

4.2 文本格式化标签：加粗 b / strong、倾斜 i / em、下划线 u / ins、删除线s / del

4.3 图像标签 img

属性：src必须、alt没有内容时、title悬停时显示、width、height、border

4.4 链接标签 a 

属性：href

4.5 注释标签：<!--   -->

4.6 表单：

表单域 form

表单控件：input组 type=[text、password、checkbox、button、submit、reset、image、file]、select组、textarea

表单属性：value、selected、checked

4.7 表格 - 展示数据，更整齐和规范

组成：tr、td、th

属性：cellspaceing单元格之间的距离

           cellpadding单元格内容与边框的距离

标题: caption

合并：跨行合并 rowspan、跨列合并 colspan

      1. 先确定跨行or跨列

      2. 先上后下、先左后右，找到目标单元格的rowspan 和 colspan

      3. 删除的个数等于合并数-1

4.8 列表

5. HTML5

新语义化标签、本地存储、连接特性、网页多媒体、三维及图形特效

5.1语义化标签

header、nav、article、section、aside、footer

5.2多媒体标签audio和video

audio(支持ogg、mp3、wav格式)，使用多个source支持多种格式。 

<audio src="./music.mp3" autoplay controls loop>

　　<source src="./music.mp3" type="audio/mpeg">

　　<source src="./music1.ogg" type="audio/ogg">

　　换个浏览器吧

</audio>

chrome禁用了autoplay，

 

video(支持ogg、mp4、webm)

chrome禁用了autoplay，可以添加muted(静音)属性解决

poster是没有播放时的图片

5.3 表单

移动端表现更好，如显示不同的键盘及输入picker控件

input  type=[email、url、date、time、month、week、number、tel、search、color]

表单属性：required、placeholder、autofocus(自动获得焦点)、autocomplete(off / on, 表单需要name属性，会自动提示提交过的值)、multiple多选文件提交