前端Web开发HTML5+CSS3+移动web视频教程 Day1

链接

HTML 介绍

在这里插入图片描述

写代码的位置：VSCode

看效果的位置：谷歌浏览器

安装插件 open in browser：

在这里插入图片描述

接下来要保证每次用 open in browser 打开的是谷歌浏览器。只需要将谷歌浏览器变为默认的浏览器就可以了。

首先进入控制面板，找到默认程序：

在这里插入图片描述

VSCode Ctrl + b 折叠侧边栏。

在这里插入图片描述

效果：

在这里插入图片描述

修改代码，加上标签：

在这里插入图片描述

点击刷新按钮，刷新网页，查看效果：

在这里插入图片描述

需要包裹内容时，使用双标签，不需要则使用单标签。

HTML 中绝大多数都是双标签，只有极个别是单标签。

HTML 基本骨架就是网页模板，所有网页都要基于这个模板来编写代码。这个模板由几个固定的标签组成，用这几个标签来表示 HTML 的不同位置。写代码时可以根据位置的不同来对号入座。

最外层是一对 html 标签，html 标签表示整个网页。

HTML 基本骨架

在这里插入图片描述

用快捷键生成模板的效果：

在这里插入图片描述

在浏览器中打开时是一个空白的白板，没有任何内容：

在这里插入图片描述

如果想要展示一些文字，需要将文字写在 body 标签内部。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>想要展示的文字。
</body>
</html>

效果：

在这里插入图片描述

注意这里代码里的网页标题是 Document，浏览器网页的标题同样也是 Document，是保持对应的。

标签的关系

标签之间有两种关系：

父子（嵌套）
兄弟（并列）

<html><head></head><body></body>
</html>

注释

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>这是文字，能看见吗？<br><!-- 这是注释，浏览器不显示。 --><!-- 可以给代码加注释 --><strong>111. 这是加粗的内容。</strong><!-- <strong>222. 这是加粗的内容。</strong> -->
</body>
</html>

效果：

在这里插入图片描述

标题标签

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>

效果：

在这里插入图片描述

段落标签

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>有些亲贵却不在乎前车之鉴，多尔衮一垮台，便纷纷来永平府设立王庄、田庄。这两年山川秀美的所在，不时出现楼阁亭台点缀的花园、歇山顶的高大堂屋、卷棚式的青砖住房，一派华美富丽，乡下人都看得目瞪口呆了。</p><p>虹桥镇的东岳庙前和通向四乡的大路口，早已布棚林立，摊贩如云了。火势旺盛的炉边，热气腾腾，铜勺敲着锅边当当响，卖的是油炸果子、油豆腐、豆浆、豆腐脑、杂碎汤；提篮挎筐的小贩声声吆喝，叫卖着酱鸡、卤蛋、夹肉火烧、点红馒头；茶棚、酒棚随处可见；落花生、炒栗子、金黄柿子、山里红，更摆得一堆一堆的。小地摊最多，在兜售用麦草、箔纸编制的各种玩具：身上写着“富贵有余”字样的红鱼，手捧大元宝笑嘻嘻的“招财童子”，盛满银锭、金光闪闪的“聚宝盆”，象征福气的红绒蝙蝠，等等。摊贩的主顾主要倒不是赛神队伍，而是这些来自方圆百里内的游人看客。这里既有身着直领衫、交领衫、毡帽布鞋，被满洲人称为“蛮子”的汉人，又有长袍短褂、皮帽皮靴，被汉人叫做“鞑子”的满洲人、蒙古人；既有缠腰带、背褡裢、一脸风霜的庄户人，又有长衫翩翩、满面书卷气的文人。不管是哪种人，都将在这纷纷攘攘的庙会上吃饱喝足看够，然后买点小玩艺儿带回家：买个“聚宝盆”，叫做“求财如意”；买只绒蝙蝠，叫做“戴福还家”。只这吉兆，就够叫人舒心快意的了。这就难怪太阳才上一竿，镇上已经万头攒动，一片嘈杂了。</p>
</body>
</html>

效果：

在这里插入图片描述

换行与水平线标签

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>第一行内容。还是第一行内容。<br>第二行内容。<br>第三行内容。<!-- 可以添加多个换行，从而产生空行 --><br><br><br>新的一行。<hr>
</body>
</html>

效果：

在这里插入图片描述

文本格式化标签

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><strong>strong 加粗</strong><br><b>b 加粗</b><br><em>em 倾斜</em><br><i>i 倾斜</i><br><ins>ins 下划线</ins><br><u>u 下划线</u><br><del>del 删除线</del><br><s>s 删除线</s><br>嵌套写法：<br><strong><em>加粗斜体</em></strong>
</body>
</html>

效果：

在这里插入图片描述

图像标签

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="./1.jpg"><img src="./2.jpg">
</body>
</html>

两张图片不会换行，除非一张图片太大了，导致放不下，下一张图片会看起来放在了下一行，其实还是在同一行。或者下一张图片比较大，在上一张图片后面放不下，就会单独放到一行中。

在实际工作当中，设置图片的高度和宽度，都是通过 CSS 来设置的，对 HTML 的高度和宽度两个属性，只需要了解即可。

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 网速较慢时，图片加载不出来，有了替换文本，不用猜也能知道图片是什么内容。 --><img src="./11.jpg" alt="周依然"><img src="./2.jpg" title="还是周依然">
</body>
</html>

效果：

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 单独指定图片的高度或者宽度时，图片会按比例放大或缩小，同时指定图片的高和宽时，图片尺寸将会变为指定的值 --><img src="./1.jpg" alt="" width="600"><img src="./1.jpg" alt="" width="900" height="200">
</body>
</html>

效果：

在这里插入图片描述

路径

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="E:\杂\2.jpg" alt=""><img src="E:/杂/2.jpg" alt="">
</body>
</html>

不希望下载图片，而是使用网络图片：

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- https://www.itheima.com/images/logo.png --><img src="https://www.itheima.com/images/logo.png">
</body>
</html>

超链接

在这里插入图片描述

超链接标签是双标签 a，中间包裹内容。

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="https://www.baidu.com/">跳转到百度</a> <!-- 好使 --><br><a href="www.baidu.com/">跳转到百度</a> <!-- 不好使 --><br><!-- 可以跳转本地文件 --><a href="./01-标签的写法.html">跳转到01-标签的写法</a>
</body></html>

对于超链接，按住 Ctrl 键就能在新窗口中打开。

在这里插入图片描述

或者再加一个属性，也能实现新窗口打开：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="https://www.baidu.com/" target="_blank">跳转到百度</a> <!-- 好使 --><br><a href="www.baidu.com/">跳转到百度</a> <!-- 不好使 --><br><!-- 可以跳转本地文件 --><a href="./01-标签的写法.html">跳转到01-标签的写法</a>
</body></html>

开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#">空链接</a>
</body></html>

音频标签

音频标签在网页中插入声音。

在这里插入图片描述

音频标签是 audio 双标签，src 属性是必须要有的属性。

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><audio src="./media/music.mp3"></audio>
</body></html>

此时打开浏览器是没有声音的，因为浏览器把自动播放的功能都是禁用的。而且也看不出来有没有添加成功，因为没有任何提示信息，打开浏览器就是一个空白的白板。如图：

在这里插入图片描述

可以使用 controls 属性显示音频控制面板，面板能看到就说明声音插入成功了。

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><audio src="./media/music.mp3" controls></audio>
</body></html>

效果：

在这里插入图片描述

controls 属性的完整写法为 controls = "controls"，但是在书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。因此 controls = "controls" 可以简写为 controls。

添加 loop 属性可以让音频自动循环播放，一次播放完了后自动开始从头播放。

添加 autoplay 属性将不会起任何作用，因为浏览器是禁用自动播放的。

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><audio src="./media/music.mp3" controls loop autoplay></audio>
</body></html>

视频标签

在这里插入图片描述

视频标签在网页中插入一个视频。

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="./media/vue.mp4"></video>
</body>
</html>

效果：

在这里插入图片描述

看不出来是不是一个视频，下面添加控制面板：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="./media/vue.mp4" controls></video>
</body>
</html>

效果：

在这里插入图片描述

点击播放按钮就可以开始播放视频了。

添加 muted 属性时，打开浏览器时默认声音是关闭的，可以手动打开。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="./media/vue.mp4" controls loop muted></video>
</body>
</html>

效果：

在这里插入图片描述

有了 muted 属性之后再添加 autoplay 属性时，当打开浏览器时，视频将自动播放且静音播放。如果没有 muted 属性却有 autoplay 属性，当打开浏览器时视频将不会播放。

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="./media/vue.mp4" controls loop muted autoplay></video>
</body>
</html>

综合案例一个人简介

VSCode 自动换行：alt + z

<!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>尤雨溪，前端框架<a href="#">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目<a href="#">JavaScript</a>，最后自己也走上了开源之路，现全职开发和维护<a href="#">Vue.js</a>。</p><img src="./photo.jpg" alt="尤雨溪的照片" title="尤雨溪"><h2>学习经历</h2><p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。</p><h2>主要成就</h2><p>尤雨溪<strong>大学专业并非是计算机专业</strong>，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，<ins>正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯</ins> 。</p><p>2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p><h2>社会任职</h2><p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。</p>
</body>
</html>

效果：

在这里插入图片描述

综合案例二 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 (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p><p>其作者为<a href="./个人简介.html" target="_blank">尤雨溪</a> </p><h2>主要功能</h2><p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p><p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。</p><video src="./media/vue.mp4" controls></video>
</body>
</html>