学习HTML播放视频、音频，语义标签、其它标签、表格等

播放视频音频

视频

 <video src="../图片文件/编译原理.mp4" controls autoplay muted loop>您的浏览器不支持 video 标签</video>
//controls属性会出现播放控制条（单值属性）
//autoplay为自动播放 
//muted为静音播放 
//loop为循环播放 

网页效果：

音频

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

属性含义与video的相同
网页效果：

其它标签

高亮

 <mark>文本高亮展示</mark><br/>

网页效果：

举例：

<p>Do not forget to buy <mark>milk</mark> today.</p>

效果：

Do not forget to buy milk today.

缩略词

abbr标签指示简称或缩写，比如 “WWW” 或 “NATO”。通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。

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

网页效果：
（当鼠标悬停在星期二上时，会显示2021年8月3日星期二字样）

语义标签

header

//网站头部
    <header class="header">
//该标签具有引导和导航作用，通常来放置标题（导航）logo 搜索栏 
        <div class="logo">天猫</div>
        </header>

网页效果：

nav

//导航
        <nav class="header_nav">
            <ul>
                <li>个人用户</li>
                <li>企业用户</li>
                <li>其它业务</li>
            </ul>
        </nav>
//定义导航链接的部分，其中导航元素链接到其它页面，或者当前页面的其它部分

网页效果：

举例：
（通过超链接将其与其它页面连接起来）

article

//核心内容
    <article>
//该标签规定独立的自包含内容，页面中独立、完整的、可被外部引用的内容，也可以嵌套使用 

        <section>预约外币</section>
        <section>金融服务</section>
        <figure>
            <img src="../图片文件/手机.png" alt="图片不见了">
            <figcaption>扫码了解产品详情</figcaption>
        </figure>
    </article>

aside

 <aside>
// <aside> 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。
//用来表示当前页面或文章的附属信息部分，他可以包含侧边栏，广告，导航条，以及其它有别于主要内容的部分
        <div>
            广告词
        </div>
        <nav>
            <ul>
                <li>个人用户</li>
                <li>企业用户</li>
                <li>其它业务</li>
            </ul>
        </nav>
    </aside>

footer

    <footer>
//通常包含作者信息，相关链接，版权信息等
        关于百度About Baidu使用百度前必读帮助中心京公网安备11000002000001号京ICP证030173号©2021 Baidu 互联网药品信息服务资格证书
        (京)-经营性-2017-0020信息网络传播视听节目许可证 0110516
    </footer>

网页效果：

address

<address>
//用来呈现文档的联系信息，作者的地址、邮箱、电话等
        邮箱：2457878601@qq.com
        <details>
            <summary>联系我吧：</summary>
            <p>电话：18912345678</p>
            <p>地址：浦东软件园</p>
        </details>
    </address>

网页效果：

section

//标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
        <section>预约外币</section>
        <section>金融服务</section>
//类似div,作为html的独立功能

details

  <details>
  //用于描述文档或文档某个部分的细节
            <summary>联系我吧：</summary>
            <p>电话：18912345678</p>
            <p>地址：浦东软件园</p>
        </details>
//详情

figure

 <figure>
//<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。 
            <img src="../图片文件/手机.png" alt="图片不见了">
            <figcaption>扫码了解产品详情</figcaption>
//该标签定义 figure 元素的标题（caption）。 
//"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
        </figure>

表格

table

//表格
        <table border="1" cellspacing="0" cellpadding="2">
//align：规定表格相对周围元素的对齐方式（left center right）
//border：规定表格边框的宽度（整数px）
//cellpadding：规定 表格内容 与 单元格 之间的距离
//cellspacing：规定 单元格 与 单元格 之间的距离
//width：设定表格宽度
//bgcolor：设定表格背景色
            <thead bgcolor="#8AC6D1">
//<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
                </table>

tr>th

HTML 表单中有两种类型的单元格：
表头单元格 - 包含表头信息（由 th 元素创建）
标准单元格 - 包含数据（由 td 元素创建）

                <tr>
//<tr> 标签定义 HTML 表格中的行
//tr 元素包含一个或多个 th 或 td 元素
                    <th>姓名</th>
//th定义表格内的表头单元格,th 元素内部的文本通常会呈现为居中的粗体文本
                    <th>性别</th>
                    <th>年龄</th>
                </tr>

tr>td

     <tr>
                    <td>larry</td>
// td定义表格内的标准单元格，元素内的文本通常是左对齐的普通文本
                    <td>男</td>
                    <td>28</td>
                </tr>

网页效果：

作业展示

简历

课表

//colspan规定单元格可横跨的列数（跨列合并）
//rowspan规定单元格可横跨的行数(跨行合并)
 <td rowspan="2" style="height: 150px; width: 50px;"  bgcolor="#78fee0"  >计算机组成原理@励志—1B301</td>