欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML拾遗

程序员文章站 2022-03-07 20:48:56
目录一链接标签二行内元素和块元素三视频和音频四页面结构分析五iframe内联框架一链接标签1点睛path：链接路径target：链接在哪个窗口打开。常用值：_self,_blank2类型文本超链接图像超链接锚链接功能性链接（邮件链接、QQ链接）3关于QQ链接的QQ推送功能4代码代码1&......

目录

一 链接标签

二 行内元素和块元素

三 视频和音频

四 页面结构分析

五 iframe内联框架

一 链接标签

1 点睛

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

path：链接路径

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

2 类型

  • 文本超链接

  • 图像超链接

  • 锚链接

  • 功能性链接（邮件链接、QQ链接）

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

HTML拾遗

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

HTML拾遗

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的视频嵌入代码位置：

HTML拾遗

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 效果

HTML拾遗

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

上一篇： AE全版本安装包分享，免密一键安装

下一篇： 2008-ICIP - Reducing Boundary Artifacts in Image Deconvolution

推荐阅读