表格标签、框架标签与超链接

时间：2022-11-23 13:30:00 p28k2aqjg连接器

今日汇总

- 表格标签
- iframe(框架标签)
- a(超链接)
- audio/video

表格标签

table——外框

border——边框
cellpadding——单元格内补
cellsapcing——单元格间距

tr——表中行
td——普通单元格

rowspan——同一列多行使用行合并
colspan——同一行多列使用列合并

th——表头单元格(中间，粗)`

  <table border="" style="text-align: center; width: 60%;" align="center">         <tr>             <th>IDth>             <th>Nameth>             <th>Ageth>         tr>         <tr>             <td rowspan="2">01td>             <td>海绵宝宝td>             <td>22td>         tr>         <tr
        
         >
        
            <td colspan="2">派大星td>
        tr>
        <tr>
            <td colspan="3">
                <table border="" style="width: 100%; text-align: center;">
                    <tr>
                        <td style="width:50% ;">海底td>
                        <td>蟹堡王td>
                    tr>
                table>
            td>
    table>

运行结果如下：

iframe（框架标签）

src——网页地址 width height（宽、高）
frameborder——边框（1-有边框 0-无边框）
scrolling——yes-有滚动条 no-无滚动条
./——当前路径
…/上级路径

<iframe width="600" height="500" scrolling="no" src="./视频标签.html" frameborder="1">iframe>
    <hr>
    <iframe src="./图片标签.html" frameborder="0">iframe>

运行结果如下：

a（超级链接）

必须有属性href——当href为空时，点击超级链接时会刷新页面
href的值可以是其他域名网站下方的某一个地址，链接其他网站
href的值可以使用相对路径
target（打开新网页）——href结合target 当target的值为_blank时会在新的空白页打开
_self 当前页

<a href="">超级链接a>
    <a href="https://www.baidu.com/">百度一下，你就知道a>
    <a href="../day0719/国际.html">国际热搜词a>
    <a href="./style样式.html">style样式a>
    <a href="https://www.baidu.com/" target="_blank">百度一下，你就知道a>

    <div>
        <a href="">图片a>  
        <a href="">新闻a>  
        <a href="">音乐a>  
        <a href="">知道a>
    div>

    <ul>
        <li><a href="" style="color: black; text-decoration: none; ">图片a>li>
        <li><a href="">新闻a>li>
        <li><a href="">音乐a>li>
        <li><a href="">知道a>li>
    ul>

超级链接锚点——目标位置要有id（id必须以字母开头）
href的值要以#开头并于内容和id的值一致
当href的值为#时代表回到最顶层
所有的毛带都不需要刷新页面

<a href="#p28" style="text-decoration: none;">滚动到p28a>
    <a href="#p48" style="text-decoration: none;">滚动到p48a>
    <p>p1p>
    <p>p2p>
    <p>p3p>
    <p>p4p>
    <p>p5p>
    <p>p6p>
    <p>p7p>
    <p>p8p>
    <p>p9p>
    <p>p10p>
    <p>p11p>
    <p>p12p>
    <p>p13p>
    <p>p14p>
    <p>p15p>
    <p>p16p>
    <p>p17p>
    <p>p18p>
    <p>p19p>
    <p>p20p>
    <p>p21p>
    <p>p22p>
    <p>p23p>
    <p>p24p>
    <p>p25p>
    <p>p26p>
    <p>p27p>
    <p id="p28">p28p>
    <p>p29p>
    <p>p30p>
    <p>p31p>
    <p>p32p>
    <p>p33p>
    <p>p34p>
    <p>p35p>
    <p>p36p>
    <p>p37p>
    <p>p38p>
    <p>p39p>
    <p>p40p>
    <p>p41p>
    <p>p42p>
    <p>p43p>
    <p>p44p>
    <p>p45p>
    <p>p46p>
    <p>p47p>
    <p id="p48">p48p>
    <p>p49p>
    <p>p50p>
    <p>p51p>
    <p>p52p>
    <p>p53p>
    <p>p54p>
    <p>p55p>
    <p>p56p>
    <p>p57p>
    <p>p58p>
    <p>p59p>
    <p>p60p>
    <p>p61p>
    <p>p62p>
    <p>p63p>
    <p>p64p>
    <p>p65p>
    <p>p66p>

    <a href="#" style="text-decoration: none;">回到顶点a>

图片标签

img 行内元素没有闭合标签
src 图片地址
网络地址（并不是所有的网络图片都可以直接使用，比如有些网络使用了反爬技术）
本地地址
width——属性width不需要带单位 style里面的width需要
alt——图片加载失败显示文本信息

<img src="http://contentcms-bj.cdn.bcebos.com/cmspic/3635d7c5fc2eea3cfb54ed52b677865c.jpeg?x-bce-process=image/crop,x_0,y_0,w_2306,h_1256" width="300">
    <img src="./img/1.jpeg" width="300">
    <img src="./img/2.jpeg" alt="图片加载失败">
    <hr>
    <div style="display:inline-block; text-align: center;">
        <a href="https://www.tmall.com/" target="_blank">
            <img src="./img/1.jpg" width="100">
            <p>天猫p>
        a>
    div>
    <div style="display:inline-block; text-align: center;">
        <a href="https://www.jd.com/" target="_blank">
            <img src="./img/2.jpg" width="100">
            <p>京东p>
        a>
    div>
    <div style="display:inline-block; text-align: center;">
        <a href="https://www.amazon.cn/" target="_blank">
            <img src="./img/3.jpg" width="100">
            <p>亚马逊p>
        a>
    div>

（运行结果自行研究）

audio/video

audio（video）

src 音频（视频）地址可以使用网络地址也可以使用本地文件
controls 显示音频（视频）组件在不同浏览器下外观不一致（一般都需要重写播放器外观）
autoplay 自动播放属性在谷歌浏览器由于安全策略禁止使用
一般声音 audio 支持mp3 0gg（体积特别小）等常见格式
一般视频 video 支持mp4 0gv（体积特别小）等常见格式

<audio src="./audio/听.mp3" controls>audio>
    <audio src="https://audio04.dmhmusic.com/71_53_T10055694882_128_4_1_0_sdk-cpm/cn/0412/M00/82/35/ChAKEV_tN8CAMUMXAD7QLIo7sJ8299.mp3?xcode=a313b127ceb43f24a7033a4a7de2b96e08259c5" controls>audio>

    <hr>

    <video src="./video/强森.mp4" controls width="600">video>
    <video src="./video/生活.mp4" controls width="600">video>

（运行结果自行研究）

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

表格标签、框架标签与超链接

今日汇总

相关文章