不二如是 发表于 2019-7-2 17:37:15

029 - 小姐姐，我住在这个城市 |【HTML5收官】

本帖最后由 不二如是 于 2022-11-17 17:45 编辑

上一集： 028 - 一个时代的结束(下)



万众瞩目的零基础入门学习Web开发（H5&C3）开始更新了！！！{:10_298:}

在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。

很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？

作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～

关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程

哈哈，废话不多说了，#敲黑板时刻！{:10_281:}



在线视频：传送门



课程思维导图

**** Hidden Message *****
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清



1、iframe 元素

iframe 元素是网页中包含另外一个文档的内联框架。

例如，在一个本地页面中，直接嵌入我们的鱼C主页：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
</head>
<body>
   <iframe src="https://ilovefishc.com/">
       <p>鱼油浏览器不支持iframe 标签。</p>
   </iframe>
</body>
</html>


通过设置 width 和 height 属性，可以修改宽高：

<iframe src="https://ilovefishc.com/" width="666px" height="666px">
这样被嵌入的网页宽高就可以人为设置了。



动态设定后，但从视觉上能达到以假乱真的境界。

sandbox 属性是 iframe 元素的重点，默认添加就意味着开启“限制”。

<iframe src="https://fishc.com.cn/forum.php" width="666px" height="666px" sandbox>
    <p>鱼油浏览器不支持iframe 标签。</p>
</iframe>
这时 iframe 元素就只是一个“静态”页面，任何交互都木有了。

单击阿，页面广告阿，这些交互行为都木有了。

具体的值，参看下图：


如果想让页面正常点击跳转，就指定 sandbox 属性值：

sandbox="allow-popups"
这样就可以正常跳转啦，自己试试其他值。


1、meter 元素

meter 元素用来在网页中显示一个范围内的测量值/分数值。

<p>展示给定的数据范围：</p>
    <meter value="3" min="0" max="10">显示3</meter><br>
    <meter value="0.6">60%</meter>
注意哦，这个可不是下面的进度条，而是一个范围条。



可以指定多个属性：




1、progress 元素

prgress 元素是我们常见的进度条，只支持两个属性，和 meter 元素最大的区别。



代码：

下载进度：<progress value="22" max="100"></progress>



如何实现一个带提示值的进度条呢？

就需要 JavaScript 啦，源码请看本讲的课后作业哦！



课后作业，完成了吗？

传送门



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

下一集：030 - 鸟枪换大炮 |【CSS3 开箱】



如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）

http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif



吃掉大鲨鱼 发表于 2019-7-3 19:07:49

真的就完结了吗？天天追番，就完了，是不是意味着JavaScript就要开始了，期待小甲鱼老师和不二大神

月亮惹的祸30 发表于 2019-7-29 21:14:00

催更

程序猪 发表于 2019-7-30 15:25:57

要看的呀，还没有资金买会员

莫西莫西 发表于 2019-8-30 11:34:44

{:5_105:}

by2014 发表于 2019-8-31 14:26:49

{:5_95:}

药水哥 发表于 2019-9-2 16:34:05

66666666666666666666666666666

lby2010 发表于 2019-12-11 19:52:18

加油，努力学习！

LuckyTiger66 发表于 2020-2-12 01:53:47

课后作业 再接再厲

MYlindaxia 发表于 2020-3-10 13:17:16

小姐姐加油啊！

aa887498 发表于 2020-3-31 22:47:06

顶楼主啦..希望楼主多发精品好帖啦.....

Yijiangyayaya 发表于 2020-5-7 10:53:13

{:5_92:}

zhanjiafei 发表于 2020-5-7 15:52:58

·12

Fire4EVER 发表于 2020-6-20 10:04:57

1

xuan1788 发表于 2020-6-24 17:14:49

iframe 的 width, height 可以用 vw，vh 么？ 不同单位的选择有没有什么经验可以分享一下呀

周断天 发表于 2020-7-28 10:43:58

我爱学习学习爱我

我要好好学习= 发表于 2020-8-18 14:34:34

Are   YOU   OK>

昵称_cwb 发表于 2020-8-27 09:24:08

yc?

natapon 发表于 2021-1-7 14:12:23

回复快快快快看

笙歌醉梦 发表于 2021-1-19 23:40:12

嘿，亲爱的鱼油，每天都要过得开心哦^_^
页: [1] 2
查看完整版本: 029 - 小姐姐，我住在这个城市 |【HTML5收官】