:::warning ⚠️注意：语义化块元素在一些古老的浏览器存在兼容性问题，如IE8。 :::

<h2>div布局</h2>
<div style="height: 280px;">
        <div class="header">div class="header" </div>
        <div class="nav">div class="nav"</div>
        <div style="height: calc(100% - 140px);">
                <div class="left">div class="left"</div>
                <div class="right">div class="right"</div>
        </div>
        <div class="footer">div class="footer"</div>
</div>
<h2>语义布局</h2>
<div style="height: 280px;">
        <header class="header">header class="header" </header>
        <nav class="nav">div class="nav"</nav>
        <main style="height: calc(100% - 140px);">
                <aside class="left">aside class="left"</aside>
                <article class="right">article class="right"</article>
        </main>
        <footer class="footer">footer class="footer"</footer>
</div>
<!--样式-->
<style>
        .header,
        .footer {
                background-color: antiquewhite;
                height: 40px;
                text-align: center;
                line-height: 40px;
                float: none;
        }
        .nav {
                background-color: aquamarine;
                height: 40px;
                line-height: 40px;
                text-align: center;
        }
        .left {
                background-color: rgb(201, 223, 215);
                float: left;
                width: 150px;
                height: 100%;
                text-align: center;
        }
        .right {
                background-color: rgb(238, 252, 206);
                float: left;
                height: 100%;
                width: calc(100% - 150px);
                text-align: center;
        }
</style>

超链接

元素是最常用的超链接标签，主要属性是href这是网络互联的重要特性。行内元素，不会换行。双标签：标签内可以放其他内容，如文字、图片。

⚠️当不希望a标签执行跳转，用来执行其onclick事件时，需设置href="javascript:void(0)"，申明不执行跳转。

<a href="http://www.baidu.com" target="_self" title="鼠标悬停提示的内容">显示的内容=a标签=百度</a>
<a href="../ftest/html.md">相对地址</a>
<!-- 页面内#锚点跳转 -->
<a href="#">默认#-跳转到头部</a>
<a href="#m1">a标签的name属性作为锚点</a>   <!--a name="m1"-->
<a href="#hp">任意元素的id属性作为锚点</a>
<a href="javascript:void(0)">不执行a标签跳转</a>

当a标签设置了href属性后，就是一个可以点击操作的超链接了，鼠标样式为小手形状（pointer），同时有三种显示模式（默认样式），都可以通过css样式（伪元素选择器）调整。

• 未点击时，显示为蓝色字体+下划线
• 点击访问过，显示为紫色字体+下划线
• 鼠标点击链接时，显示为红色字体+下划线

  元素标签的样式应该遵循上面的基本逻辑，基本原则就是让人容易分辨出这是一个超链接。

02、表格

是一个嵌套组合的复合元素，块元素，一个表格table，有多个行，每行有多个单元格组成，常用于展示集合数据。包含多种特有的子元素，构成表格的各个部分。
表格元素结构/顺序：<table>►<caption>►<colgroup>►<thead>►<tbody>/<tr>►<tfoot>

元素/属性	描述	值/备注
的子元素 元素。目的是统一列样式管理子元素，并不能创建列，只是管理样式，包含多个元素 元素 定义表格元素 border 表格外边框粗细，>=1，会同时开启单元格边框（1），通过css合并 像素 align 整个表格相对于父容器的对齐方式 right、center、left width、height 表格宽度、高度，table/tr/td/th都支持 像素、百分比 bgcolor 背景色，table/tr/td/th都支持 bgcolor="#F5F5F5" 表格行(table row)，包含多个th或td align 行内（单元格）内容的水平对齐方式，默认left right、center、left valign vertical，垂直对齐默认middle，对应的css属性为vertical-align top、middle、bottom rowspan 行（水平）单元格合并，合并下面的单元格，需去掉对应的单元格 合并单元格的数量 基本单元格（table data cell）， align 单元格内容的对齐方式 right、center、left width 单元格宽度，一列中多个高度设置则取最大值。 colspan 列（垂直）单元格合并，合并右边的单元，需去掉对应的单元格 合并单元格的数量 其他语义化子元素 让表格结构更清晰，也更容易进行样式管理 表头，1个可选，包0或多个 表头单元格(table header cell)，同 ，默认样式：居中、加粗 scope 表头类型，（/skoʊp/范围）row=行表头，col=列表头。 便于阅读器理解表格 表格标题，1个可选，可用css的caption-side设置位置 表格列分组，0个或多，包含多个 span 横跨的列数，还有width、class、style用于管列样式 css支持的样式好像不多 列： 表格主体数据区域，零个或多个 DOM中一直都会有的 汇总行，1个可选，包含0 或多个 :::warning ⌨️快捷键（VSCode）： 多组标签文本输入：标签名*数量{文本内容}，后面加上花括号，自动补充标签内容。如table>tr*2>td*4{单元格} ::: <table border="2" width="500px" bgcolor="#F5F5F5" align="center" style="border-collapse:collapse;font-size: large;"> <colgroup> <col> <col width="30%" style="background-color: azure;"> <col class="col" span="2"> </colgroup> <thead height="40px"> <tr> <th width="30%">name</th> <th>age</th> <th colspan="2">birthday</th> </tr> </thead> <tr align="center"> <!--数据行--> <td align="right" bgcolor="lightblue" rowspan="2">zhangsan</td> <td>22</td> <td colspan="2">2000-12-12</td> </tr> <tr align="left"> <!--数据行--> <td align="center">23</td> <td>2000-12-12</td> <td>多了一格</td> </tr> </table> <style> .col{ border: 2px solid red; width: 200px; } </style> 03、多媒体与嵌入 像和 这样的元素被称之为替换元素，因为这些元素的内容和尺寸由外部资源所定义，而不是元素自身。 0.7 倍 1.0 倍 1.2 倍 1.5 倍 2.0 倍 图片 图片标签（image）单标签行内元素，最核心属性src指向图片地址，可以是网络路径、文件地址。行内元素，不会自动换行，可嵌套在a标签里面，实现图片点击跳转效果。 元素/属性 描述 值/备注 src 图片资源的地址，支持网络路径、文件路径。 资源路径说明 alt 图片无效时的占位文字，建议填写有意义内容（或空），阅读器会读 这是一个充满人性化的属性！ height、width 高宽，只设置一个属性会自动等比缩放，所以一般设置一个即可 尺寸，图片无效时尺寸也无效了 srcset 候选图像：图像url 宽度w/像素密度x，多个逗号分割，优先于src。 根据屏幕密度，和sizes的设置来选择（下载）图像。 配合sizes实现响应式图片 sizes 资源的大小：媒体条件 尺寸值，多个逗号隔开。 基于媒体查询选择最合适图像（srcset）及设置图像显示大小 sizes="(max-width: 600px) 200px, 50vw border 边框粗细，已废弃，由css的border代替 像素 align 相对于父容器内的对齐排列方式。已废弃 top、bottom、middle、left、right 新的srcset、sizes属性可用来更好的实现响应式图片，以适应不同分辨率的设备。不过老旧的浏览器并不支持，所以仍需保留src，以便更好的兼容。 :::warning ⚠️注意：在调试srcset、sizes的时候，img会缓存图片，手动调整浏览器窗口大小并不会立即生效，需清除缓存（或禁用缓存）。而不会有这个困扰！ ::: <img src="../res/sk (13).png" width="50px" title="鼠标悬停显示文字" border=3 ></img> <img src="" alt="图片不存在" /> <img src="../res/sk (19).png" align="left" width="50px" height="40px" /> <a href="http://www.baidu.com"><img src="../res/sk (2).png" height="60px" /></a> <img src="../static/images/128.png" srcset="../static/images/128.png 350w, ../static/images/256.png 750w, ../static/images/512.png 900w, ../static/images/1024.png 1000w" sizes="(max-width: 320px) 100px, (max-width: 450px) 200px, (max-width: 700px) 300px, (max-width: 800px) 400px, (max-width: 900px) 500px, 1024px"> <img srcset="/res/head-48.gif 300w, /res/qq.png 600w" sizes="(min-width: 500px) 600px,300px" src="/res/head-48.gif" alt=""> 现代图片 图片，由多个媒体资源组成，元素标签内部依然需要包含一个元素，不支持或没有匹配到合适的时，则会显示内部<img>。 元素/属性 描述 媒体资源 的子元素 srcset 资源url media 媒体查询 media="(min-width: 800px)"大于800px时命中 type 资源的MIME 类型 type="image/svg+xml" 在图片格式上，推荐多用新的图形，如.svg、.webp、.jpeg，可以在有高质量的同时有较低的文件大小。 <picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg" alt=""> </picture> <picture> <source srcset="/res/qq-128.png" media="(min-width: 500px)"> <img src="/res/head-48.gif" alt=""> </picture> 内容块语义元素 为了更好的展示图片内容，可使用 HTML5 的 和