前端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-个人简介

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

分析内容---写代码---保存---刷新浏览器，看效果（边写边保存查看）

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

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

html 复制代码

<!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简介

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

html 复制代码

<!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>

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