一、个人归纳的常用标签：
1）页面结构类：
- <section> -表单、清单、文章分块等内容
- <nav>
- <aside> -和页面内容关联度较低的内容：例如广告、搜索内容、分享链接等
- <main>
- <footer> -标签内部可以包含版权、来源信息、法律限制等文本或者链接信息。
- <header> -头部信息区可以包含
<nav>导航栏等内容信息 - <article> - 完整独立内容块，如文章或者新闻报道
2）语义标签：
- <figure> - 一个和文档有关的图例示例https://www.w3school.com.cn/tags/tag_figure.asp
- <figcaption> -图例说明
- <mark>
- <video>
- <audio>
<source>- 为video和audio指定 媒体源<track>- 为video和audio指定 文本轨道（字幕）<canvas>- 位图区域<svg>- 矢量图<progress>- 进度条<meter>- 滑动条
<audio controls> <!--source多配合audio video内部标签使用 --> <source src="horse.ogg" type="audio/ogg"> 你的浏览器不支持音频文件 </audio> <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese"> <!--主浏览器都不支持，track目前不用深究--> <!--标签定义嵌入的内容，比如插件--> <embed src="" />
二、结构语义化：
<!-- 头部 --> <header> <nav></nav> </header> <!-- 内容区 --> <main> <!-- 左侧 --> <article> <!-- 左侧标题 --> <header></header> <!-- 图片区块 --> <figure> <img> <figcaption></figcaption> </figure> </article> <!-- 右侧 --> <aside> <!-- 友情链接 --> <nav></nav> <section></section> </aside> </main> <!-- 底部 --> <footer></footer>
三、层级关系：
window > document > html > body
window是BOM的核心对象，它一方面用来获取和设置浏览器的属性和行为，另一方面作为一个全局对象。document对象是一个跟文档相关的对象，拥有一些操作文档内容的功能，但是地位没有window高。html元素对象跟document元素对象是属于html文档的DOM对象，可以认为就是html源代码中那些标签化成的对象
四、替换元素 vs 不可替换元素
<input> 和 <img> 虽然是行内元素，但是它们是可以设置宽和高的，因为它们涉及到可替换元素和不可替换元素。
- 替换元素：
就是浏览器根据元素的标签和属性，来决定元素的具体显示内容<img>、<input>、<textarea>、<select>、<object> - 不可替换元素：HTML 大多数元素都是不可替换的，即其内容直接展现给浏览器 <p>
五、行内元素 vs 块级元素
| 块级元素 | 行内元素 |
| 独占一行，多个块状元素标签写在一起，默认排列方式为从上至下，宽度自动填充父元素宽度 | 相邻的行内元素会排列在同一行，不会自动进行换行，宽度随元素内容变化 |
| 可设置width、height | 设置 width、height无效 |
| 可设置margin、padding | 可设置padding会撑大空间；maigin左右， |
| 对应：dispaly:block | 对应dispaly:inline |
| select、em、acronym定义只取首字母缩写 | |
| div、form、p、h1~h6、table~td系列、ul、ol、li、hr、 | a、span、img、input、button、textarea、label、i、code、br、b字体加粗 |
行内元素和块级元素转换
display: inline- 转换为行内元素display: block- 转换为块级元素display: inline-block- 转换为行内块元素
行内块状元素：
1）可设置width、height
2）可设置margin、padding
3）不自动换行，默认排列方式为从左到右
六、新增HTML5的API：
- HTML Geolocation 地理位置
- HTML Drag & Drop拖放
- HTML Local Storage 本地存储
- HTML Application Cache 应用程序缓存
- HTML Web Workers web工作者
- HTNL SSE
posted on
