DAY01-HTML5标签-优快云博客

本文链接：https://blog.youkuaiyun.com/tang7mj/article/details/140489103

DAY01 - HTML5 教程

<!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>
    给用户看的，能看见吗？ // 未来想给用户看啥就把内容放到body里面来
</body>
</html>

（文件内容参考自：02-HTML基本骨架.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>
    <!-- 这是文字，能看见吗？注释快捷键：ctrl+/ -->
    <strong>这是加粗的strong</strong>
</body>
</html>

标题标签

HTML提供了六种不同级别的标题标签，从<h1>到<h6>，分别表示从最高级到最低级的标题。

示例代码

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

（文件内容参考自：05-标题标签.html）

后面还有笔记但是由于时间有限，我后续会把笔记陆续加上。

段落标签

段落标签（<p>）用于定义文本段落。

示例代码

<!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>英伟达（NVIDIA）是一家全球领先的图形处理器（GPU）制造商和计算平台技术公司。在其工作中，英伟达使用多种编程语言来开发和优化其硬件和软件产品。</p>
    <p>英伟达（NVIDIA）是一家全球领先的图形处理器（GPU）制造商和计算平台技术公司。在其工作中，英伟达使用多种编程语言来开发和优化其硬件和软件产品。</p>
</body>
</html>

（文件内容参考自：06-段落标签.html）

换行与水平线标签

2024/7/18日补充

（课后作业day01的第一个案例招聘案例在写道水平线的时候忘了用什么标签）这里暴露了我换行标签记忆不清楚，也告诉我我记忆能力的不足，该提高自己的记忆力了。

换行标签（<br>）用于在文本中插入换行，水平线标签（<hr>）用于插入水平分割线。

示例代码

<!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>
    第二行内容
    <hr>
</body>
</html>

（文件内容参考自：07-换行与水平线标签.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>
    <b>b 加粗</b>
    <em>em 倾斜</em>
    <i>i 倾斜</i>
    <ins>ins 下划线</ins>
    <u>u 下划线</u>
    <del>del 删除线</del>
    <s>s 删除线</s>
</body>
</html>

（文件内容参考自：08-文本格式标签.html）

图像标签

图像标签（<img>）用于在网页中插入图片，可以设置图片的路径、替代文本（alt）、标题（title）、宽度和高度等属性。

基本使用

<!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>
    <!-- 1.引入图片快捷键：./ -->
    <img src="./cat.jpg.jpeg">
    <img src="./dog.jpg.jpeg">
</body>
</html>

（文件内容参考自：09-图像标签-基本使用.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>
    <!-- 这里是解决以前一个问题以前网速比较慢，可能导致图片加载不出来，不想影响网页内容的浏览，用alt替换一下 -->
    <img src="./cat1.jpg.jpeg" alt="这是一只猫">
    <img src="./dog.jpg.jpeg" title="这是一只狗">
    <!-- 浏览器缩放图片，默认是等比例缩放 -->
    <img src="./cat.jpg.jpeg" width="100">
    <img src="./dog.jpg.jpeg" height="600">
</body>
</html>

（文件内容参考自：10-图像-属性.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>
    <!-- 1.jpg -->
    <img src="./1.jpg">

    <!-- 2.gif -->
    <img src="./images/2.gif">
    
    <!-- 3.jpg  -->
    <img src="../3.jpg">
</body>
</html>

（文件内容参考自：11-相对路径.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="C:\images\cat.jpg">

    <!-- https://www.itheima.com/special/brandzly1/images/logohm.png -->
    <img src="https://www.itheima.com/special/brandzly1/images/logohm.png">
</body>
</html>

出现的问题：

问题1：问题2：

超链接

超链接用于在网页中创建链接，可以链接到其他网页或本地文件。

示例代码

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

    <!-- 跳转到本地路径：相对路径查找 -->
    <!-- target="_blank" 新窗口跳转页面 -->
    <a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>

    <!-- 开发初期，不知道超链接的跳转地址。href属性值写#，表示空链接，不会跳转 -->
    <a href="#">这是空链接</a>
</body>
</html>

（文件内容参考自：13-超链接.html）

音频

HTML5提供了<audio>标签用于在网页中嵌入音频文件，可以设置循环播放、控制按钮等属性。

示例代码

<!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>
    <!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
    <audio src="./media/music.mp3" controls loop></audio>
</body>
</html>

（文件内容参考自：14-音频.html）

视频标签

HTML5提供了<video>标签用于在网页中嵌入视频文件，可以设置自动播放、循环播放、静音等属性。

示例代码

<!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>
    <!-- 在浏览器中，想要自动播放必须有 muted 属性 -->
    <video src="./media/vue.mp4" controls loop muted autoplay></video>
</body>
</html>

（文件内容参考自：15-视频标签.html）

综合案例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>尤雨溪，前端框架<a href="#">Vue.js</a> 的作者，<a href="#">HTML5</a> 版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目<a href="#">JavaScript</a> ，最后自己也走上了开源之路，现全职开发和维护<a href="17-综合案例2-Vue简介.html">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>

（文件内容参考自：16-综合案例1-个人简介.html）

综合案例2 - Vue简介

通过综合应用各种HTML标签，创建一个包含Vue.js简介的网页。

示例代码

<!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="./16-综合案例1-个人简介.html" target="_blank">尤雨溪</a></p>
    <h2>主要功能</h2>
    <p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p>
    <p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>
    <p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能驱动复杂的单页应用。</p>
    <video src="media/vue.mp4" controls></video>
</body>
</html>

（文件内容参考自：17-综合案例2-Vue简介.html）