HTML拾遗

作者: 亖呉?盀
来源: 51数据库
2021-07-31

一?链接标签

二?行内元素和块元素

三?视频和音频

四?页面结构分析

五?iframe内联框架

一?链接标签

1?点睛

path：链接路径

target：链接在哪个窗口打开。常用值：_self,_blank

2?类型

文本超链接
图像超链接
锚链接
功能性链接（邮件链接、QQ链接）

3?关于QQ链接的QQ推送功能

4?代码

代码1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 用name做锚标记 -->
        <a name="top">顶部的锚标记</a>
        
        <!--
         target：表示窗口在哪里打开
         _blank：打开一个新的页
         _self:在自己网页打开
         -->
        <a  target="_blank">
            <img src="./resource/logo.png" alt="logo图标" title="请点击我" width="100" height="30">
        </a>
        
        <a  target="_blank">
            <img src="./resource/tree.jpg" alt="logo图标" title="请点击我" width="900" height="900">
        </a>
        
        <!--
        特殊符号：&nbsp;
        空格：&nbsp
        版权：&copy;
        &ge;大于等于
        &gt;大于
        &le;小于等于
        &lt;小于
         -->
        <p>
            空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
        </p>
        <p>
            &copy;我的版权
        </p>
        <p>
            &ge;大于等于
            &gt;大于
            &le;小于等于
            &lt;小于
        </p>
        <!--
        锚链接
        1 需要一个锚标志
        2 跳转到锚标志
         -->
        <a >跳到顶部的锚标记</a>
        <!-- 用name做锚标记 -->
        
        <!-- 功能性链接 -->
        <!-- 邮件链接 -->
        <a >邮件链接</a>
        

        <!--
        QQ链接：QQ推广
        http://www.51sjk.com/Upload/Articles/1/0/264/264072_20210708002018793.html
        -->
        <a target="_blank" ><img border="0" src="http://www.51sjk.com/Upload/Articles/1/0/264/264072_20210708002018809.jpg"
             alt="点击这里给我发消息" title="点击这里给我发消息" /></a>
    </body>
</html>

代码2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <a >跳到其他页面的锚标记处</a>
    </body>
</html>

二?行内元素和块元素

1?块元素

无论内容多少，该元素独占一行。

举例：

h1到h6

2?行内元素

内容掌开宽度，左右都是行内元素的可以排在一行。

举例：

strong

三?视频和音频

1 视频元素

video

2?音频元素

audio

3?实战

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <!--
     音频和视频：
     src：资源路径
     controls：控制条
     autoplay：自动播放
     -->
    <body>
        <video src="./resource/video/WhatsNew_Equalizer.mp4" controls autoplay></video>
        <audio src="./resource/audio/alarm.mp3" controls autoplay>
        </audio>
    </body>
</html>

四?页面结构分析

1?点睛

2?实战

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <header><h1>头部</h1></header>
        <section><h1>内容</h1></section>
        <footer><h1>底部</h1></footer>
    </body>
</html>

五?iframe内联框架

1?点睛

path：引用页面地址。

mainFrame：框架标识名。

2?扩展

bilibili的视频嵌入代码位置：

3?实战

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!--
        下面是bilibili的一个视频嵌入代码位置,从bilibili的分享中直接拷贝过来的
         -->
        <iframe src="//player.bilibili.com/player.html?aid=626346364&bvid=BV16t4y1Q7WH&cid=211336824&page=1" scrolling="no"
         border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
        <hr />
        <!-- 下面是百度的内联框架 -->
        <iframe src="http://www.51sjk.com/Upload/Articles/1/0/264/264072_20210708002018840.com" width="500" height="300"></iframe>
        <!-- 内联框架和a标签配合使用 -->
        <!-- 内联框架相对于一个容器，展示了a标签中csdn的内容，通过iframe的name和a标签的target进行关联 -->
        <hr />
        <iframe src="" name="csdn" width="500" height="300"></iframe>
        <a  target="csdn">我的CSDN</a>
    </body>
</html>

4?效果