HTML教程②-HTML元素大全(1)-表格&多媒体元素

安木夕
558 阅读8分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

02、<table>表格

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

image

元素/属性描述值/备注
<table>定义表格元素
 border表格外边框粗细，>=1，会同时开启单元格边框（1），通过css合并像素
 align整个表格相对于父容器的对齐方式right、center、left
 width、height表格宽度、高度，table/tr/td/th都支持像素、百分比
 bgcolor背景色，table/tr/td/th都支持bgcolor="#F5F5F5"
<tr>表格行(table row)，包含多个th或td
 align行内（单元格）内容的水平对齐方式，默认leftright、center、left
 valignvertical，垂直对齐默认middle，对应的css属性为vertical-aligntop、middle、bottom
 rowspan行（水平）单元格合并，合并下面的单元格，需去掉对应的单元格合并单元格的数量
<td>基本单元格（table data cell），<tr>的子元素
 align单元格内容的对齐方式right、center、left
 width单元格宽度，一列中多个高度设置则取最大值。
 colspan列（垂直）单元格合并，合并右边的单元，需去掉对应的单元格合并单元格的数量
其他语义化子元素让表格结构更清晰，也更容易进行样式管理
<thead>表头，1个可选，包0或多个<tr> 元素
<th>表头单元格(table header cell)，同<td>，默认样式：居中、加粗
 scope表头类型，（/skoʊp/范围）row=行表头，col=列表头。便于阅读器理解表格
<caption>表格标题，1个可选，可用css的caption-side设置位置
<colgroup>表格列分组，0个或多，包含多个<col>。目的是统一列样式管理
 span横跨的列数，还有width、class、style用于管列样式css支持的样式好像不多
 <col>列：<colgroup> 子元素，并不能创建列，只是管理样式
<tbody>表格主体数据区域，零个或多个 <tbody>，包含多个<tr>元素DOM中一直都会有的
<tfoot>汇总行，1个可选，包含0 或多个<tr> 元素

⌨️快捷键（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>

image.png

03、多媒体与嵌入

像<img>和<video>这样的元素被称之为替换元素，因为这些元素的内容和尺寸由外部资源所定义，而不是元素自身。

<img>图片

图片标签<img>（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，以便更好的兼容。

⚠️注意：在调试srcset、sizes的时候，img会缓存图片，手动调整浏览器窗口大小并不会立即生效，需清除缓存（或禁用缓存）。而<picture>不会有这个困扰！

<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="">

image.png

<picture>现代图片

<picture>图片，由多个媒体资源<source>组成，<picture>元素标签内部依然需要包含一个<img>元素，<picture>不支持或没有匹配到合适的<source>时，则会显示内部<img>。

元素/属性描述
<source>媒体资源<picture>的子元素
 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>

<figure>内容块语义元素

为了更好的展示图片内容，可使用 HTML5 的 <figure> 和 <figcaption> 元素，专门用来展示图形内容的语义化容器元素，不过本身并没有什么特别的样式，需css。

元素/属性描述
<figure>块元素可附标题内容元素(figure /ˈfɪɡə(r)/ 图形)，代表一段独立的内容。不一定要是一张图片，可以是几张图片、一段代码、音视频、方程、表格或别的。默认样式：缩进
<figcaption>块元素描述了 <figure> 元素的说明/标题(caption /ˈkæpʃ(ə)n/ 说明、字幕、标题)
<figure>
    <img src="https://file03.16sucai.com/2017/1100/16sucai_P591F9E071.JPG" alt="晚霞">
    <figcaption>洗一洗，那是我逝去的青春！</figcaption>
</figure>
<style>
    figure{
        display: flex;
        flex-flow: column;
        max-width: 250px;
    }
    figure figcaption{
        text-align: center;
        background-color: #2221;
        padding: 4px;
    }
</style>

image.png

<video>视频/<audio>音频

元素/属性描述
<video>媒体播放器，除了属性，还有很多JS方法事件用于视频播放控制
 src视频资源url，MP3 (音频) 和 MP4/H.264 (视频) 是被广泛支持的两种格式，MP4专利到2027
 controls启用视频控制功能
 width、height宽高
 autoplay启用自动播放，一般不建议使用
 loop启用循环播放（ /luːp/ 循环）
 muted开启静音（muted /ˈmjuːtɪd/）
 poster默认显示的海报图片URL（/ˈpəʊstə(r)/ 海报）
<source>媒体资源，代替src，可以放多个，提升浏览器对媒体格式的兼容性。<video>、<audio>、<picture>的子元素
<track>时序字幕，<video>、<audio>的子元素
 标签内的内容当浏览器不支持<video>时会显示，降级方案
<audio>音频播放器( /ˈɔːdiəʊ/ )
 同<video>和<video>基本相同，除了没有width、height、poster属性
<video width="300px" autoplay controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"></video>
<audio controls src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/viper.mp3"></audio>

<iframe>内联框架

<iframe>内联框架，嵌入一个完整的HTML页面，iframe 元素会创建其文档的内联框架，有自己的会话历史记录 (session history)和DOM 树。<iframe>嵌入的文档会被包含在 window.frames，通过脚本可以访问其contentDocument。同时在框架内部，脚本可以通过 window.parent 引用父窗口对象。

元素/属性描述
<iframe>内联框架
 srcurl地址
 height/width高度、宽度（默认300px）
 frameborder是否显示边框，1(yes)，0(no)，推荐用css设置border
 sandbox安全性相关设置，支持很多参数
 srcdoc可以被渲染到iframe的HTML 代码
 name名称，window.frames.name
<frame>HTML 4 中用来定义窗口（框架），H5已不支持

<iframe>的上下级可以相互访问，这的确很方便，但这同样非常危险，因为你的网页可被人任何人嵌入。脚本访问框架内容必须遵守同源策略（协议、端口、IP地址（域名）都相同），并且无法访问非同源的 window 对象的几乎所有属性。跨域的<iframe>通信可以通过 Worker.postMessage() 来实现。

⚠️因此被嵌入，和嵌入其他网页，都需要格外谨慎小心，注重安全防范。

  • 使用HTTPS。
  • 使用 sandbox 属性控制权限。
  • 配置 CSP 指令，在meta中配置CSP 安全策略。
  • 需重视安全问题，只有在必要时嵌入。

<embed/object> 过时的嵌入元素

<embed>和<object>元素用来嵌入多种外部内容的通用嵌入工具，如 Java 小程序、Flash、PDF、浏览器插件，甚至视频，SVG 和图像等类型。现代的WEB技术已比较成熟了，就像IE一样，插件也将逐步称为历史。

元素/属性描述
<embed> 单标签( embed /ɪmˈbed/ 嵌入)将外部内容嵌入文档
 src资源url地址
 type资源的 MIME 类型
 height/width高度、宽度
<object>嵌入一个外部资源
 data资源url地址
 type资源的 MIME 类型
 height/width高度、宽度
<object type="application/pdf" width="500" height="800" data="https://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/mypdf.pdf">
    <p>You don't have a PDF plugin, but you can <a href="mypdf.pdf">download the PDF file.</a></p>
</object>

©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址

avatar
文章
阅读
粉丝