html基础-4-超链接、图片、内联框架和音视频

最新推荐文章于 2022-08-07 22:26:15 发布

Neptuneyut

最新推荐文章于 2022-08-07 22:26:15 发布

阅读量2k

点赞数 2

分类专栏： Web前端文章标签： html

本文链接：https://blog.csdn.net/qq_42491125/article/details/105959503

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

文章目录

超链接
图片标签
内联框架
音频标签
视频标签
参考

超链接

a:超链接标签，例如<a href="https://www.baidu.com">超链接</a>

超链接是用于从一个页面跳转到另外的页面，包括跳到外部网站页面和自定义页面
通过a标签定义，href（Hypertext Reference缩写）中指定跳转地址，指定内部页面时可以引用绝对路径也可以是相对路径，相对路径同unix使用，可以使用javascript:;的属性，作为超链接的占位符，点击链接什么也不会发生
a标签虽然是行内元素，但是比较特殊，其中可以包含除开它自身的所有元素
target属性指定超链接打开方式：
- _self:默认属性，表示在当前页面打开，国外网站居多，优点是不会打开太多网页
- _blank:表示在新的页面打开，国内网站居多，会打开多个网站
href指定位置，实现长文本跳转
- #:回到顶部
- #id：回到锚定id的位置，首先需要通过id给任意标签设置一个锚点，随后就可以实现跳转到指定位置，id必须唯一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<p>
    <!--
    超链接是用于从一个页面跳转到另外的页面，包括跳到外部网站页面和内部页面
    通过a标签定义，href中指定跳转页面地址
    <a href="https://www.baidu.com">超链接</a>
    a标签虽然是行内元素，但是比较特殊，其中可以包含除开它自身的所有元素
    指定内部页面时可以引用绝对路径也可以是相对路径
    -->
    <a href="https://www.baidu.com">百度</a>
    <a href="block_element.html">内部网页</a>
    <!--
    target属性指定超链接打开方式：
    _self:默认属性，表示在当前页面打开
    _blank:表示在新的页面打开

    -->
    <a href="https://www.baidu.com" target="_blank">百度target_blank</a>
    <a href="https://www.baidu.com" target="_parent">百度target_parent</a>
    <a href="https://www.baidu.com" target="_top">百度target_top</a><br>


    <!-- 如果网页很长，需要通过按钮回到网页任意位置，也可通过超链接实现-->
    <!--如果想回到网页任意位置，只需要#加目标位置id，每一个标签都有id，保证不重复-->
    <a href="#bottom">回到底部</a><br>
    <a href="#third">跳转到第三段</a><br>
    <p>1.在生物学问题分析时，无论是通过转录组还是chip-seq等其他组学技术获得一大堆的差异基因之后，给大家留下的一个问题就是，这些差异基因属于什么功能？可能参与哪些通路？跟我研究的生物学问题是否有关？这个时候GO和KEGG pathway富集分析就登场了。
那么如何看富集到的基因功能？这个是时候有两个问题，一个问题是基因功能怎么定义，因为参与生命机体的基因所涉及到的生物学功能种类繁多、十分复杂，这就引出了GO(gene ontology)基因本体论，即严格的、标准的基因功能定义；另外一个问题是怎么样才叫富集，归到某一功能类的基因越多就是越富集吗？
对于第一个问题，基因本体论，它是由科学共同体制定的一套针对基因及相关功能的标准术语体系，相当于一本字典，这本字典里定义了每一个字、词。总体上，GO可分为生物学过程（biological process,BP）、细胞组分（cellular component,CC）和分子功能（molecular function，MF)。在每个条目（term)下又分为更为详细的条目，形成一个树状的有向（自顶向下）无环的词汇术语系统。GO富集要做就是将得到的差异基因投射到这套词汇系统的各个层次。
对于第二个问题，主要解决的是如何区分背景噪音和真正富集基因的问题。</p>
    <p>2.在生物学问题分析时，无论是通过转录组还是chip-seq等其他组学技术获得一大堆的差异基因之后，给大家留下的一个问题就是，这些差异基因属于什么功能？可能参与哪些通路？跟我研究的生物学问题是否有关？这个时候GO和KEGG pathway富集分析就登场了。
那么如何看富集到的基因功能？这个是时候有两个问题，一个问题是基因功能怎么定义，因为参与生命机体的基因所涉及到的生物学功能种类繁多、十分复杂，这就引出了GO(gene ontology)基因本体论，即严格的、标准的基因功能定义；另外一个问题是怎么样才叫富集，归到某一功能类的基因越多就是越富集吗？
对于第一个问题，基因本体论，它是由科学共同体制定的一套针对基因及相关功能的标准术语体系，相当于一本字典，这本字典里定义了每一个字、词。总体上，GO可分为生物学过程（biological process,BP）、细胞组分（cellular component,CC）和分子功能（molecular function，MF)。在每个条目（term)下又分为更为详细的条目，形成一个树状的有向（自顶向下）无环的词汇术语系统。GO富集要做就是将得到的差异基因投射到这套词汇系统的各个层次。
对于第二个问题，主要解决的是如何区分背景噪音和真正富集基因的问题。</p>
    <p id="third">3.在生物学问题分析时，无论是通过转录组还是chip-seq等其他组学技术获得一大堆的差异基因之后，给大家留下的一个问题就是，这些差异基因属于什么功能？可能参与哪些通路？跟我研究的生物学问题是否有关？这个时候GO和KEGG pathway富集分析就登场了。
那么如何看富集到的基因功能？这个是时候有两个问题，一个问题是基因功能怎么定义，因为参与生命机体的基因所涉及到的生物学功能种类繁多、十分复杂，这就引出了GO(gene ontology)基因本体论，即严格的、标准的基因功能定义；另外一个问题是怎么样才叫富集，归到某一功能类的基因越多就是越富集吗？
对于第一个问题，基因本体论，它是由科学共同体制定的一套针对基因及相关功能的标准术语体系，相当于一本字典，这本字典里定义了每一个字、词。总体上，GO可分为生物学过程（biological process,BP）、细胞组分（cellular component,CC）和分子功能（molecular function，MF)。在每个条目（term)下又分为更为详细的条目，形成一个树状的有向（自顶向下）无环的词汇术语系统。GO富集要做就是将得到的差异基因投射到这套词汇系统的各个层次。
对于第二个问题，主要解决的是如何区分背景噪音和真正富集基因的问题。</p>
    <p>在生物学问题分析时，无论是通过转录组还是chip-seq等其他组学技术获得一大堆的差异基因之后，给大家留下的一个问题就是，这些差异基因属于什么功能？可能参与哪些通路？跟我研究的生物学问题是否有关？这个时候GO和KEGG pathway富集分析就登场了。
那么如何看富集到的基因功能？这个是时候有两个问题，一个问题是基因功能怎么定义，因为参与生命机体的基因所涉及到的生物学功能种类繁多、十分复杂，这就引出了GO(gene ontology)基因本体论，即严格的、标准的基因功能定义；另外一个问题是怎么样才叫富集，归到某一功能类的基因越多就是越富集吗？
对于第一个问题，基因本体论，它是由科学共同体制定的一套针对基因及相关功能的标准术语体系，相当于一本字典，这本字典里定义了每一个字、词。总体上，GO可分为生物学过程（biological process,BP）、细胞组分（cellular component,CC）和分子功能（molecular function，MF)。在每个条目（term)下又分为更为详细的条目，形成一个树状的有向（自顶向下）无环的词汇术语系统。GO富集要做就是将得到的差异基因投射到这套词汇系统的各个层次。
对于第二个问题，主要解决的是如何区分背景噪音和真正富集基因的问题。</p>
    <p>在生物学问题分析时，无论是通过转录组还是chip-seq等其他组学技术获得一大堆的差异基因之后，给大家留下的一个问题就是，这些差异基因属于什么功能？可能参与哪些通路？跟我研究的生物学问题是否有关？这个时候GO和KEGG pathway富集分析就登场了。
那么如何看富集到的基因功能？这个是时候有两个问题，一个问题是基因功能怎么定义，因为参与生命机体的基因所涉及到的生物学功能种类繁多、十分复杂，这就引出了GO(gene ontology)基因本体论，即严格的、标准的基因功能定义；另外一个问题是怎么样才叫富集，归到某一功能类的基因越多就是越富集吗？
对于第一个问题，基因本体论，它是由科学共同体制定的一套针对基因及相关功能的标准术语体系，相当于一本字典，这本字典里定义了每一个字、词。总体上，GO可分为生物学过程（biological process,BP）、细胞组分（cellular component,CC）和分子功能（molecular function，MF)。在每个条目（term)下又分为更为详细的条目，形成一个树状的有向（自顶向下）无环的词汇术语系统。GO富集要做就是将得到的差异基因投射到这套词汇系统的各个层次。
对于第二个问题，主要解决的是如何区分背景噪音和真正富集基因的问题。</p>
    <p>在生物学问题分析时，无论是通过转录组还是chip-seq等其他组学技术获得一大堆的差异基因之后，给大家留下的一个问题就是，这些差异基因属于什么功能？可能参与哪些通路？跟我研究的生物学问题是否有关？这个时候GO和KEGG pathway富集分析就登场了。
那么如何看富集到的基因功能？这个是时候有两个问题，一个问题是基因功能怎么定义，因为参与生命机体的基因所涉及到的生物学功能种类繁多、十分复杂，这就引出了GO(gene ontology)基因本体论，即严格的、标准的基因功能定义；另外一个问题是怎么样才叫富集，归到某一功能类的基因越多就是越富集吗？
对于第一个问题，基因本体论，它是由科学共同体制定的一套针对基因及相关功能的标准术语体系，相当于一本字典，这本字典里定义了每一个字、词。总体上，GO可分为生物学过程（biological process,BP）、细胞组分（cellular component,CC）和分子功能（molecular function，MF)。在每个条目（term)下又分为更为详细的条目，形成一个树状的有向（自顶向下）无环的词汇术语系统。GO富集要做就是将得到的差异基因投射到这套词汇系统的各个层次。
对于第二个问题，主要解决的是如何区分背景噪音和真正富集基因的问题。</p>

    <!--通过href="#"回到顶部，同时也可以作为超链接的占位符-->
    <a id="bottom" href="#">回到顶部</a>
</body>
    <a href></a>
</body>
</html>

图片标签

img:图片标签，属于自结束标签，用于引入外部图片，例如<img src='https://bkimg.cdn.bcebos.com/pic/aa64034f78f0f73636642acf0155b319eac41361?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UxMTY=,xp_5,yp_5'>,就会把下面这个小姐姐引入到页面中；
在这里插入图片描述

src用于指定图片位置，可以是网址类的绝对路径，也可以是本地图片类的相对位置，方法同超链接
alt可以用来描述图片，在图片无法正常显示的时候显示，搜索引擎也会根据其中的内容来检索关联图片，若不写则搜索引擎不会搜到图片
width宽度，单位像素
height高度，任意写一个会自动缩放，两个同时更改会使图片变形，PC端不建议缩放图片，一般需要多大图片裁剪多大，移动端一般会大图缩小
图片的格式：
- jpeg（jpg）：一般显示照片
- gif：动图
- png：透明图
- webp：谷歌的图片格式，压缩比高，效果好
- base64:通过相应工具或网页将图片使用base64转成字符格式，提高网页加载速度
  图片选用原则：效果一样选择小的，效果不一样选择效果好的

内联框架

iframe:内联框架,用于向当前页面引入外部页面包括网页、视频、音频等，例如<iframe src="https://music.163.com/song?id=28287132" width="500" height="500" frameborder="0"></iframe>

src指定网页、视频、音乐的路径
frameborder指定边框的大小，常设为0
内联框架中的页面不会被搜索引擎检索

音频标签

audio引用本地音频文件,例如<audio src="source/温柔之光.mp3" controls autoplay></audio>,默认不允许用户自行操作

controls：不带属性，只用于显示控制图标
autoplay：自动播放，因浏览器有差异
loop：是否循环播放

视频标签

video引用视频文件，例如<video src="" controls></video>

视频引入与音频是一样的，也可加载外部网页，方法是原视频右键-分享-通用地址
一般不会在本地放音视频文件，会加重服务器载荷，更好的方法是第三方专业网站（七牛云）作为存储服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
    内联框架iframe是引入其他页面，可以是视频、音乐或其他任何网页
    所引页面不会被SEO搜录
    frameborder:去掉引用网页的边框
    -->
    <iframe src="https://music.163.com/song?id=28287132" width="500" height="500" frameborder="0"></iframe>
   <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=32619151&auto=1&height=66"></iframe>
    <br>
    <!--
    audio引用本地音频文件,默认不允许用户自行操作
    controls：不带属性，只用于显示控制图标
    autoplay：自动播放，因浏览器有差异
    loop：是否循环播放
    -->
    <audio src="source/温柔之光.mp3" controls autoplay></audio><br>

    <!--
    兼容性问题：
        为了解决在不同浏览器（ie8）可以正常操作，可通过以下兼容性代码
    -->
    <audio src="source/温柔之光.mp3" controls autoplay>
        <source src="source/温柔之光.mp3">
        <embed src="source/温柔之光.mp3" type="audio/mp3">
    </audio><br>

    <!--
    视频引入与音频是一样的，也可加载外部网页，方法是原视频右键-分享-通用地址
    -->
    <video src="" controls></video>
    <iframe src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=e2df2f0387c972581b0f33a356ff2fcd&tvId=17383158909&accessToken=2.f22860a2479ad60d8da7697274de9346&appKey=3955c3425820435e86d0f4cdfe56f5e7&appId=1368&height=100%&width=100%" frameborder="0" allowfullscreen="true" width="100%" height="100%"></iframe>
    <!--
    一般不会在本地放音视频文件，会加重服务器载荷，更好的方法是第三方专业网站（七牛云）作为存储服务器
    -->
</body>
</html>