认识前端的第二步

刘龙腾
661 阅读5分钟

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

  • 插入图片
    • 先准备一张图片（假设命名为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进行详细查阅学习。

avatar
文章
阅读
粉丝