阅读 166

认识前端的第二步

上一节认识前端的第一步中我们初步了解了一下网页的文档类型,实现了最简洁的一个网页。但实际应用中,我们的网页也不能像小说一样,光看文字吧。它的里边也可以插入一些图片以及音视频的,这样网页的功能也才更强大,色彩更炫丽。下面我们依次感受一下每个功能点的效果。

  • 插入图片
    • 先准备一张图片(假设命名为1.jpg),放在与上节建立的页面同级目录下(如果不确定是不是在同级目录,就新建一个文件夹,把页面文件和图片都放在这个文件夹中)
    • 用文本编辑器打开这个文件,加入下面一行代码(注意<img src="./1.jpg">中引用图片的名字要与实际图片名字一样),保存(一定记得保存)
    <img src="./1.jpg">
    复制代码
    • 再用浏览器打开这个文件,你就会看到页面上就出来了一张图片。
  • 插入音频
    • 准备一个音频文件(最好是mp3格式的,假设命名为music.mp3),也是放在与上节建立的页面同级目录下
    • 用文本编辑器打开这个文件,加入下面一行代码(注意<audio src="./music.mp3" controls></audio>中引用音频的名字要与实际音频名字一样
    <audio src="./music.mp3" controls></audio>
    复制代码
    • 再用浏览器打开这个文件,你就会看到页面上就出来了一个音频控制按钮,点击可以播放、暂停、快进、快退以及音量调节等。
  • 插入视频
    • 准备一个视频文件(最好是mp4格式的,假设命名为video.mp4),也是放在与上节建立的页面同级目录下
    • 用文本编辑器打开这个文件,加入下面一行代码(注意<video src="./video.mp4" controls></video>中引用视频的名字要与实际视频名字一样
    <video src="./video.mp4" controls></video>
    复制代码
    • 再用浏览器打开这个文件,你就会看到页面上就出来了一个播放视频的窗口,点击可以全屏、播放、暂停、快进、快退以及音量调节等。
  • 除此之外,我们平时看到的网页可以来回跳转,这个也很好实现。假设我们要在页面加入一个超链接,点击可以跳到百度。我们只需要加下面一句就可以(href="https://www.baidu.com"中写要跳入的地址就可以)
<a href="https://www.baidu.com">点击跳转到百度</a>
复制代码

  • 此时我们点击就可以跳到百度了
  • 还有一个很有意思的功能,就是页面的自动刷新。我们春节期间买火车票肯定都遇到买不到票的情况,了解了这个功能,以后大家就不用为买火车票发愁了(稍微夸张一些)。只需要在我们的代码中加入下面一句(content="2"表示2秒页面自己刷新一次)
<meta http-equiv="refresh" content="2">
复制代码

到这里大家是不是感觉写个页面不仅简单还很好玩儿。

  • 上述代码
我也是一个网页
<img src="./1.jpg">
<audio src="./music.mp3" controls></audio>
<video src="./video.mp4" controls></video>
<a href="https://www.baidu.com">点击跳转到百度</a>
<meta http-equiv="refresh" content="2">
复制代码
  • 大家有没有感觉这样写很乱,这还是很少几个标签,如果一个完整的页面都这么写的话,那岂不是都堆在一起了。为了把我们的代码很好的管理起来,我们也把页面结构像人一样分成head(头部)和body(身体),而整个页面就是html,所以有如下结构
<html>
<head>
</head>
<body>
</body>
</html>
复制代码

其中head标签中放一些与页面内容不太相关的东西,而body中放的一般是页面需要展示的内容,就像我们刚写的那些图片、音频、视频。还记得我们上节提到的中文乱码的问题吗,这个问题使用head中的meta标签就可以解决了,在head中添加如下代码:

<meta charset="UTF-8">
复制代码

如果还有乱码,就把这个文件另存一下,存的时候把编码也改成utf-8的(点文件->另存为,下边编码选择utf-8,保存就行)

还有上边页面自动刷新我们用到的标签它也是meta标签,所以它也应该放在头部(meta还有很多其他写法,可以自己查一下)。在头部还有一个很重要的标签就是title,听名字就是标题的意思。我们先看下现在我们页面的标题是什么。
图中红框处是标题显示内容,可以发现现在我们不写默认是文件的名字,下面我们在head中加入title

<title>这是标题</title>
复制代码

可以看到,现在标题已经变成我们改的了。

  • 完整代码
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="refresh" content="2">
	<title>这是标题</title>
</head>
<body>
	我也是一个网页
	<img src="./1.jpg">
	<audio src="./music.mp3" controls></audio>
	<video src="./video.mp4" controls></video>
	<a href="https://www.baidu.com">点击跳转到百度</a>
</body>
</html>
复制代码

其实还有很多好玩儿的标签可以实现各种不同的效果,比如表格、列表、表单等等,我在这里就不一一给大家列举了。我们可以通过相关HTML视频及W3school进行详细查阅学习。

关注下面的标签,发现更多相似文章
评论