当前位置： 移动技术网 > IT编程>网页制作>HTML > HTML拾遗

HTML拾遗

2020年07月13日  | 移动技术网IT编程  | 我要评论

目录

一 链接标签

二 行内元素和块元素

三 视频和音频

四 页面结构分析

五 iframe内联框架

一 链接标签

1 点睛

<a href="path" target="目标窗口位置"></a>

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 href="index1.html" target="_blank">
            <img src="./resource/logo.png" alt="logo图标" title="请点击我" width="100" height="30">
        </a>
        
        <a href="index1.html" 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 href="#top">跳到顶部的锚标记</a>
        <!-- 用name做锚标记 -->
        
        <!-- 功能性链接 -->
        <!-- 邮件链接 -->
        <a href="mailto:798103175@qq.com">邮件链接</a>
        

        <!--
        QQ链接：QQ推广
        https://shang.qq.com/v3/widget.html
        -->
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=42309833&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:798103175:53"
             alt="点击这里给我发消息" title="点击这里给我发消息" /></a>
    </body>
</html>

代码2

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

二 行内元素和块元素

1 块元素

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

举例：

p

h1到h6

2 行内元素

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

举例：

a

strong

em

三 视频和音频

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 点睛

<iframe src="path" name="mainFrame" width="" height=""></iframe>

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="https://www.baidu.com" width="500" height="300"></iframe>
        <!-- 内联框架和a标签配合使用 -->
        <!-- 内联框架相对于一个容器，展示了a标签中csdn的内容，通过iframe的name和a标签的target进行关联 -->
        <hr />
        <iframe src="" name="csdn" width="500" height="300"></iframe>
        <a href="https://blog.csdn.net/chengqiuming" target="csdn">我的CSDN</a>
    </body>
</html>

4 效果

本文地址：https://blog.csdn.net/chengqiuming/article/details/107300225

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网