HTML 5 系列

一、个人归纳的常用标签：

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