DAY01 - HTML5 教程
目录
标签的写法
在HTML中,标签是网页元素的基础。每个标签都有其特定的功能。标签可以分为双标签和单标签两类。双标签如<strong></strong>
,单标签如<hr>
。
示例代码
<strong>文字内容</strong> // 记得ctrl+s保存
<hr> // 告诉我们网页中也允许单标签的存在
HTML基本骨架
HTML文档的基本结构包括声明文档类型(<!DOCTYPE html>
)、html标签(<html>
)、head标签(<head>
)和body标签(<body>
)。
示例代码
<!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)
设置属性![](https://i-blog.csdnimg.cn/direct/7b14e78a9aee4c539dceb6bd6b306d35.png)
<!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)
其他内容
除了上述示例代码,学习HTML时还可以通过以下几点提升技能:
- 实践项目:通过创建实际项目来巩固所学的知识,如个人网站、博客等。
- 在线资源:利用W3Schools、MDN Web Docs等在线资源学习更多标签和属性的使用。
- 代码优化:学习如何优化HTML代码,提高网页加载速度和性能。
- 响应式设计:了解并实践如何使用HTML5和CSS3创建响应式网页,适应不同设备的显示。
通过不断学习和实践,掌握HTML5将为未来的前端开发打下坚实的基础。