鱼C论坛

 找回密码
 立即注册
查看: 11414|回复: 33

[学习笔记] 029 - 小姐姐,我住在这个城市 |【HTML5收官】

[复制链接]
发表于 2019-7-2 17:37:15 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

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






万众瞩目的零基础入门学习Web开发(H5&C3)开始更新了!!!


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

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

作为,吹水阁中最爱吹水(爱干无意义事情)的鱼油,整套教程的亮点(槽点)由我来承包~

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


哈哈,废话不多说了,#敲黑板时刻!





在线视频:传送门





课程思维导图

游客,如果您要查看本帖隐藏内容请回复

猛戳

                               
登录/注册后可看大图
超清





1、iframe 元素

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C-零基础入门学习Web(Html5+Css3)</title>
  6. </head>
  7. <body>
  8.    <iframe src="https://ilovefishc.com/">
  9.        <p>鱼油浏览器不支持  iframe 标签。</p>
  10.    </iframe>
  11. </body>
  12. </html>
复制代码

Snip20190703_238.png


通过设置 width 和 height 属性,可以修改宽高:

  1. <iframe src="https://ilovefishc.com/" width="66 Snip20190703_242.png 6px" height="666px">
复制代码

这样被嵌入的网页宽高就可以人为设置了。

Snip20190703_240.png


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

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

  1. <iframe src="https://fishc.com.cn/forum.php" width="666px" height="666px" sandbox>
  2.     <p>鱼油浏览器不支持  iframe 标签。</p>
  3. </iframe>
复制代码

这时 iframe 元素就只是一个“静态”页面,任何交互都木有了。

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

具体的值,参看下图:


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

  1. sandbox="allow-popups"
复制代码

这样就可以正常跳转啦,自己试试其他值。


1、meter 元素

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

  1. <p>展示给定的数据范围:</p>
  2.     <meter value="3" min="0" max="10">显示3</meter><br>
  3.     <meter value="0.6">60%</meter>
复制代码

注意哦,这个可不是下面的进度条,而是一个范围条。

Snip20190703_243.png


可以指定多个属性:

Snip20190703_244.png



1、progress 元素

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

Snip20190703_245.png


代码:

  1. 下载进度:<progress value="22" max="100"></progress>
复制代码


Snip20190703_246.png


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

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




课后作业,完成了吗?


传送门






                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列学习笔记,请订阅 专辑&#9758;传送门)(不喜欢更要订阅



                               
登录/注册后可看大图




评分

参与人数 1荣誉 +5 贡献 +3 收起 理由
宋桓公 + 5 + 3

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-7-3 19:07:49 | 显示全部楼层
真的就完结了吗?天天追番,就完了,是不是意味着JavaScript就要开始了,期待小甲鱼老师和不二大神

点评

我很赞同!: 5.0
我很赞同!: 5
CSS3 之后上 JS  发表于 2019-7-23 07:50

评分

参与人数 1荣誉 +2 鱼币 +3 贡献 +3 收起 理由
不二如是 + 2 + 3 + 3 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-7-29 21:14:00 | 显示全部楼层
催更
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-7-30 15:25:57 | 显示全部楼层
要看的呀,还没有资金买会员
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-8-30 11:34:44 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-8-31 14:26:49 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-9-2 16:34:05 | 显示全部楼层
66666666666666666666666666666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-12-11 19:52:18 | 显示全部楼层
加油,努力学习!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-2-12 01:53:47 | 显示全部楼层
课后作业 再接再厲
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-10 13:17:16 | 显示全部楼层
小姐姐加油啊!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-31 22:47:06 | 显示全部楼层
顶楼主啦..希望楼主多发精品好帖啦.....
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-5-7 10:53:13 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-5-7 15:52:58 | 显示全部楼层
·12
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-6-20 10:04:57 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-6-24 17:14:49 | 显示全部楼层
iframe 的 width, height 可以用 vw,vh 么? 不同单位的选择有没有什么经验可以分享一下呀
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-7-28 10:43:58 | 显示全部楼层
我爱学习  学习爱我
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-8-18 14:34:34 | 显示全部楼层
Are   YOU   OK>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-8-27 09:24:08 | 显示全部楼层
yc?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-1-7 14:12:23 | 显示全部楼层
回复快快快快看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-1-19 23:40:12 | 显示全部楼层
嘿,亲爱的鱼油,每天都要过得开心哦^_^
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 19:09

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表