HTML-day02

•   video-视频标签

    格式：<video src="./video/video.mp4" controls autoplay muted loop></video>

    属性：controls:是否显示控制条

    loop:是否循环播放（播放结束后从头开始播放）

    muted:是否静音播放

    autoplay:是否自动播放

•   audio-音频标签

    格式：<audio src="./video/audio.mp3" controls autoplay muted loop></audio>

    属性：controls:是否显示控制条

    loop:是否循环播放（播放结束后从头开始播放）

    muted:是否静音播放

    autoplay:是否自动播放

   标签：   <!-- 高亮标签 -->

  <mark>其它标签-mark</mark>

  <!-- 引用标签-->

  <cite>其它标签-cite</cite>

  <!-- 强调标签 -->

  <em>其它标签-em</em>

  <!-- 斜体标签 -->

  <i>其它标签-i</i>

  <!-- 缩略词标签（鼠标悬停显示title的内容） -->

  <abbr title="2021年8月3日星期二">星期二</abbr>

  

•   H5语义化标签

    1. header

      具有引导和导航作用的一个元素，通常来放置标题（导航）、logo、搜索栏

    2. nav

      可以用作页面导航的链接组，其中导航元素链接到其它页面，或者当前页面的其它部分

    3. article

      代表文档，页面中独立、完整的可被外部引用的内容，也可以嵌套使用

    4. aside

      用来表示当前页面或文章的附属信息部分，他可以包含侧边栏，广告，导航条，以及其它有别于主要内容的部分

    5. footer

      通常包含作者信息，相关链接，版权信息等

    6. address

      用来呈现文档的联系信息，作者的联系信息，地址，邮箱，电话等

    7. section

      类似div 作为html的独立功能

    8. <address>

       <details>(和下拉菜单类似)

      <summary>联系我：</summary>

      <p>邮箱： rendc@briup.com</p>

      <p>电话：12345677654</p>

      <p>地址：浦东软件园（昆山园）</p>

     </details>

     </address>

    9. <figure>（一个固定结构）

        <img src="../../Axure/day04/er-code.png" alt="图片丢失了">

        <img src="../../Axure/day04/er-code.png" alt="图片丢失了">

        <figcaption>扫码了解产品详情</figcaption>

      </figure>

 10.H5语义化标签、除了语义之外，与div完全相同（语义标签有具体含义，但用法和div相同）

      优点：对于搜索引擎比较友好

      语义化的代码可读性较高

      方便其它设备解析，比如盲人阅读器根据语义来解析这个页面

•   表格

    1.标签格式：

     table

        thead

          tr>th

        tbody

          tr>td

        tfoot

    2.属性

      align（对齐方式）： left、center、right

      border（表格边框）： 整数  px

      cellpadding（内边距）：内容与单元格之间的距离

      cellspacing（外边距）：单元格与单元格之间的距离

      width：设定表格宽度

      bgcolor：设定表格背景色

      colspan ：跨列合并

      rowspan ：跨行合并

• vscode快捷键：

  ctrl+～ 快速打开集成终端

  ctrl+d

  ctrl+f

  ctrl+x

  ctrl+c

  ctrl+v

  ctrl+alt+s 保存所有文件

  alt+shift+鼠标光标下移

• 表格运行代码：