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

人间造梦工厂

已于 2024-07-01 15:27:12 修改

阅读量441

点赞数 3

分类专栏： HTML、CSS 文章标签： HTML5 CSS3

于 2024-06-23 11:49:15 首次发布

本文链接：https://blog.csdn.net/chengkai730/article/details/139874942

版权

HTML、CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

链接

HTML 介绍

HTML：HyperText Markup Language，超文本标记语言，是一种用于创建网页的标准标记语言。

HTML 运行在浏览器上，由浏览器来解析。

Web 浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML 文件，并将其作为网页显示。

HTML 文件的后缀有两种：html 和 htm，两种后缀名没有区别，都可以使用。当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好，我建议统一用 .html。

在这里插入图片描述

写代码的位置：VSCode

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

在线编辑器

VSCode 安装插件 open in browser：

在这里插入图片描述

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

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

在这里插入图片描述

VS Code 可以安装 Live Preview 插件来实时预览编写的代码：

在这里插入图片描述

在编辑窗口右击鼠标，选择 Show Preview 选项：

在这里插入图片描述

显示结果：

在这里插入图片描述

HTML 版本

从初期的网络诞生后，已经出现了许多 HTML 版本：

在这里插入图片描述

需要包裹内容时，使用双标签，不需要则使用单标签。
HTML 中绝大多数都是双标签，只有极个别是单标签。
HTML 标记标签通常被称为 HTML 标签（HTML tag）。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

标签的格式：

<标签>内容</标签>

不要忘记结束标签。

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

<p>这是一个段落
<p>这是一个段落

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感： 等同于 。许多网站都使用大写的 HTML 标签。

万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML 标签列表

<!DOCTYPE> 声明

<!DOCTYPE> 声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明 HTML 的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

链接

`<meta>` 标签

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器（如 360 浏览器）会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

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，是保持对应的。

在这里插入图片描述

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
 元素定义一个段落

在浏览器的页面上使用键盘上的 F12 按键开启调试模式，或者选择 元素 选项卡，就可以看到组成标签。

在这里插入图片描述

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言：HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签（markup tag）
HTML 使用标记标签来描述网页
HTML 文档包含了 HTML 标签及文本内容
HTML 文档也叫做 web 页面

下面是一个可视化的 HTML 页面结构：

在这里插入图片描述

只有 <body> 区域（白色部分）才会在浏览器中显示。

标签的关系

标签之间有两种关系：

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

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

效果：

在这里插入图片描述

HTML 元素

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数 HTML 元素可拥有属性

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。

HTML 文档由相互嵌套的 HTML 元素构成。

程序示例：

<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

以上实例包含了三个 HTML 元素。

 元素:

<p> 这是第一个段落。</p>

这个  元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签  以及一个结束标签 

元素内容是：这是第一个段落。

<body> 元素：

<body>
<p>这是第一个段落。</p>
</body>

<body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

<html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>

元素内容是另一个 HTML 元素（body 元素）。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

  就是没有关闭标签的空元素（  标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如  ，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使   在所有浏览器中都是有效的，但使用   其实是更长远的保障。

HTML 属性

属性是 HTML 元素提供的附加信息。

HTML 元素可以设置属性。

属性一般描述于开始标签。

属性总是以名称/值对的形式出现，比如：name="value"。

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='John "ShotGun" Nelson'

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。

下面列出了适用于大多数 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>