图片标签和超链接

图片标签

图片标签用于向当前页面中引入外部图片
使用img标签来引入外部图片,img标签是一个自结束标签
img这种元素属于替换元素(块元素和行内元素之间,具有两种元素的特点)
属性:
src属性指定外部图片的路径(路径规则和超链接一样)

alt 是对图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载的时候显示
搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所识别

width 图片的宽度
heigth 图片的高度
宽度和高度如果只修改了一个,则另一个会等比例缩放

一般情况下,在pc端,不建议对图片的修改
但是在移动端,经常要对图片进行缩放(大图缩小)

图片格式:

jpg(jpeg) 支持的颜色比较丰富,不支持透明效果,不支持动图
一般显示照片

gif 支持颜色比较少,支持简单透明,支持动图
颜色单一的图片,多动图

png 支持颜色丰富,支持复杂透明,不支持动图
颜色丰富,复杂的图片(专为网页而生)

webp 这种格式是谷歌新推出的专门来表示网页中的图片的一种格式
它具备其他格式的所有优点,而且文件还小
缺点:兼容性不好

base64
将图片使用base64进行编码,这样可以将图片转化为字符,
通过字符的形式来引入图片,一般都是一些需要和网页一起加载的图片才会使用base64

图片效果一样的,用小的(gif)
效果不一样,效果好的,尽量也可以考虑大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
       
      <img src="https://pic2.zhimg.com/v2-0f7b2aa9d544a96ae6c5fbf684cd8bb8_r.jpg?source=1940ef5c" width="400">
</body>
</html>

超链接

target属性,用来指定超链接的打开位置
可选值:
self 默认值,在当前页面中打开超链接(当要返回前一个页面的时候需要点上一页)
blank 在一个新的页面中打开超链接(当要打开多个的超链接的时候不推荐,因为会覆盖前面的页面会不知道哪个是哪个)
二者各有所长,按需自选!!

使用超链接的标签是<a></a> href是其属性,可通过href去到想去的位置,当我们想要让当前页面跳转到最顶部的时候,我们可以直接将href属性值设置为#,这样点击超链接后可以直接到达顶部的位置, 且当前页面不会发生跳转
也可以转跳到指定的位置,只需将href属性设置为#+目标元素的id属性值即可, <a href="#p2">去第二段</a> <a href="#bottom">去底部</a>

        id属性(唯一不重复,类似于我们的身份证)
            每一个标签都可以添加一个id属性
            id属性就是元素的唯一标识,同一个页面中不能出现重复的id属性
            id值是区分大小写的,且必须是以字母开头的,不能以数字开头。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
     <a href="#p2">去第二段</a>
     <br><br>
     <a href="#bottom">去底部</a>
     <br><br>
     
     <p>
        我国人口总量惯性增长。第七次全国人口普查数据显示,2020年我国人口(指我国大陆31个省、自治区、直辖市和现役军人的人口,不包括居住在31个省、自治区、直辖市的港澳台居民和外籍人员)数量为141178万人,与2010年133972万人相比增加了7205万人,增段时间的增长。</p>   
        <p>我国人口增速有所放缓。在人口增速方面,从2010年到2020年间,我国人口年平均增长率为0.53%,与2000-2010年0.57%的人口年平均增长率相比,增速有所放缓。主要原因是育龄妇女人数持续减少等因素导致人口增长惯性减弱,同时生育水平略有下降。</p>
       
        劳动年龄人口数量和比例双双下降。第七次全国人口普查数据显示,2020年我国16—59岁劳动年龄人口总规模8.8亿人,与2010年相比,我国劳动年龄人口减少4000多万人,同时我国劳动年龄人口占总人口比例也有所下降。但作为人口大国,我国劳动年龄人口总量庞大,劳动力资源仍较为充沛。
        <p>人口抚养比上升。改革开放40多年以来我国人口抚养比(0-14周岁与65周岁及以上人口数加总与15-64周岁人口数之比)从1982年的62.6%下降到2010年的34.2%。第七次全国人口普我国人口受教育程度持续改善,人力资本不断提升。这一成就得益于党的十八大以来,我国教育事业投入力度进一步加大,教育普及成效显著。  ——人口城镇化水平加速提升,人口流动更趋活跃。</p>
        <p id="p2">人口城镇化水平加速提升。第七次全国人口普查数据显示,2020年我国常住人口城镇化率达到63.89 %,比2010年提高了14.21个百分点,与前一个10年提高13.46个百分点相比,常住人口城镇化率在近十年间提升速度有所加快。</p>
        
        
      
        <p>家庭户人口规模持续下降。家庭户是指以家庭成员关系为主、居住一处共同生活的人组成的户2020年我国家庭户平均人口规模为2.62,比2010年减少0.48人。家庭户规模下降的主要原因有生育率下降使得家庭子女数量减少、住房条件改善年轻人婚后独居增加和人口流动活跃带来的家庭结构变动等。  </p>
        
           <p> ——人口性别比趋于合理,家庭户人口规模持续下降。</p>
         <p>我国人口总量、直辖市和现役军人的人口,不包括居住在31个省、自治区、直辖市的港澳台居民和外籍人员)数量为141178万人,与2010年133972万人相比增加了7205万人,增长5.38%。新中国成立以来,</p>
         <p>我国人口一直保持增长趋势,虽然我国人口生育率已经于上世纪90年代降低至更替水平以下并持续至今,但由于人示,2020年流动人口规模近3.8亿人,比2010年大幅增加1.5亿人,与上一个10年流动人口增长1亿人相比,我国流动人口增长速度加快。经济和产业结构布局调整和户籍政策的改革影响了流动人口规模的变化。</p> 
         <p>——人口性别比趋于合理,家庭户人口规模持续下降。 人口性别比进一步回归合理区间。第七次全国人口普查数据显示,我国男性人口总数为72334万人,女性人口总数为68844万人,性别比为111.3,较2010年显著下降,降低了6.8,这说明出生性别比长期偏高的问题得到有效控制,性别平等的生育观念更加普及,初步达到了人口性别结构优化的目标。<p/>
         <p> 家庭户人口规模持续下降。家庭户是指以家庭成员关系为主、居住一处共同生活的人组成的有生育率下降使得家庭子女数量减少、住房条件改善年轻人婚后独居增加和人口流动活跃带来的家庭结构变动等。</p>

  
     <a id="bottom" href="#">回到顶部</a>
     <br><br><br>
     <!-- 这里的#号可以回到顶部,#还有一个功能就是可以作为一个超链接的占位符,但是他也会回到顶部,事宜不推荐使用 -->
     <a href="#">这是一个占位超链接</a>
     <br><br><br>
     <!-- 还有一个超链接占位符就是JavaScript:;此时点击这个超链接不会发生任何的改变 -->
     <a href="javascript:;">着也是一个占位符</a>
</body>
</html>

内联框架

用于当前页面引入一个其他页面
src指定引入的页面路径
frameborder指定内联框架的有无,属性值1为有边框,0为无边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <iframe src="https://www.qq.com" width="800" heighth="600" frameborder="0"></iframe>

</body>
</html>

效果如下:
在这里插入图片描述

使用内联框架的时候也只是把一个页面引入当前页面,不影响写网页的任何东西,相当于引入一个标签一样。
html到此就告一段落了,断断续续的学习终于学完了一部分,后面要加把劲了,不然赶不上了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值