欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 财经 > 金融 > 前端web开发HTML+CSS3+移动web(0基础,超详细)——第2天

前端web开发HTML+CSS3+移动web(0基础,超详细)——第2天

2024/10/24 21:28:10 来源:https://blog.csdn.net/wh992610/article/details/140790954  浏览:    关键词:前端web开发HTML+CSS3+移动web(0基础,超详细)——第2天

一,超链接标签

超链接作用:点击跳转到其他页面

 在body标签里面写字母a再回车,就会出现相应的代码,可以看到此时浏览器出现字,但是点击不起作用,不会跳转到百度。

这个时候我们将百度的网址复制到代码中,在浏览器中查看并且点击,此时会直接跳转到百度的页面

如果想要跳转到本地文件,使用./可以跳转到想要去的文件中,以下在浏览器中查看,可以看见我们跳转到了标签的语法这一文件中了,但是会把之前的页面覆盖掉。

如下,写入target标签,可以看到在跳转页面时原来的页面不会覆盖,会自动增加一个新的页面

超链接标签在写入terget标签后,会跳转到新的页面,并且不会覆盖原来的页面。

开发初期。不确定跳转地址, 在书写href属性时使用空链接

target=“-blank” 属性的作用是在新窗口打开页面

二,多媒体标签-音频和视频

1.音频标签

<audio src="音频的URL"></audio>

写入controls标签会出现音频控制面板 

写入loop标签点击完后会一直循坏播放

2.视频标签

<video src="视频的URL"></video>

在文件中加入视频文件,写入以下代码,增加相应属性进行练习,这里需要注意的是如果想要自动播放就必须要写入muted属性 

三,综合案例1-个人简介

网页制作思路;从上到下,先整体再局部,逐步分析制作

分析内容—写代码—保存—刷新浏览器,看效果(边写边保存查看)

大家可以根据以下格式进行练习,不需要在意文字是什么 只要会应用昨天学习的知识就可以。

出现问题的同学可以参考我的代码,一定要边写边保存查看!!!

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简介</title>
</head>
<body><h1>涵晗</h1><hr><p>1990年出生于 <a href="#">上海</a>,中国内地女 <a href="#">歌手</a>。2013年通过参加<a href="#">中国好声音</a>节目而正式出道,凭借其独特的嗓音和出色的演唱技巧受到广泛关注和好评。</p><img src="./photo.webp" alt="这是涵晗的照片" title="涵晗" width="200"><h2>取得成就</h2><p>在出道后的几年时间里,晗陆续发行了多张个人专辑,其中包括 <strong>《飞越》、《遇见》</strong>等,并参与创作部分作品。她善于将抒情性歌声与当下流行元素相结合,为观众带来丰富多样的音乐体验。</p><h2>音乐风格</h2><p>晗的音乐风格多元化,涉及 <ins>流行、R&B</ins>等不同类型,其演唱风格深受好评。 <ins>她时常参加各种音乐类节目和活动,与知名歌手合作,展现出良好的舞台表现力和专业素质</ins>。</p><h2>总结</h2><p>总的来说,晗凭借出色的歌唱实力和积极向上的音乐态度,在中国内地音乐圈崭露头角,备受关注和好评。她的音乐作品和舞台表现广受好评,相信将会在未来的音乐之路上取得更大的成就。</p>
</body>
</html>

四,综合案例2-vue简介

可以在两个简介里面相互跳转

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue简介</title>
</head>
<body><h1>Vue.js</h1><p> Vue.js 是一个提供了 MVVM 风格双向数据绑定的 Javascript 库,无依赖别的js库,直接引入一个js文件就可以使用,跟jquery差不多,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。</p><p>其作者是 <a href="../16.综合案例/个人简介.html" target="_blank">尤雨溪</a></p><h2>主要功能</h2><p> Vue.js 能够自动追踪依赖的模板表达式和计算属性,提供 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API</p><p> Vue.js 与页面进行交互,主要就是通过内置指令来完成的,指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。</p><p> Vue-router 是 Vue.js 官方的路由插件,与 Vue.js 深度集成,用于构建单页面应用。Vue 单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来,传统的页面是通过超链接实现页面的切换和跳转的。</p><video src="../media/vue.mp4" controls></video></body>
</html>

 后面我们开始学习表格类的知识

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com