【2021-08-03】 HTML标签学习

目录

1.video

2.audio

3.标签

4.H5语义化标签

5.表格标签

6.属性

附：vscode快捷键

---

1.video

eg：

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

• controls:是否显示控制条
• loop:是否循环播放（播放结束后从头开始播放）
• muted:是否静音播放
• autoplay:是否自动播放

---

2.audio

eg:

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

• controls:是否显示控制条
• loop:是否循环播放（播放结束后从头开始播放）
• muted:是否静音播放
• autoplay:是否自动播放      

---

3.标签

• <mark>高亮</mark>
• <cite>引用</cite>
• <em>强调</em>
• <i>斜体</i>
• <abbr title="2021年8月3日星期二">星期二 缩略词</abbr>

---

4.H5语义化标签

1. header

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

2. nav

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

3. article

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

4. aside

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

5. footer

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

6. address

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

7. section

类似div 作为html的独立功能

8. <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>

H5语义化标签 除了语义之外，与div完全相同

对于搜索引擎比较友好

语义化的代码可读性较高

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

5.表格标签

• <table>
• <thead>      tr    >     th
• <tbody>      tr    >    td
• <tfoot>

6.属性

1. align： left center right
2. border： 整数 px
3. cellpadding：内容与单元格之间的距离
4. cellspacing：单元格与单元格之间的距离
5. width：设定表格宽度
6. bgcolor：设定表格背景色
7. colspan 跨列合并
8. rowspan 跨行合并

附：vscode快捷键

• ctrl+～ 快速打开集成终端
• ctrl+d
• ctrl+f
• ctrl+x
• ctrl+c
• ctrl+v
• ctrl+alt+s 保存所有文件
• alt+shift+鼠标光标下移