Day02_HTML课堂笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48733024/article/details/119303504

Day02 HTML 课堂笔记

1 回顾

1.1 HTML 基本语法

① 文档声明

<!doctype html>

② 注释

<!-- 注释内容 -->

③ 如何掌握一个标签

1. 标签的语义、功能
2. 标签的属性以及属性值如何设置
3. 单标签还是双标签

1.2 HTML 标签

① 主体结构标签

html	根标签			 双
head	页面头部		双
body	页面主体		双

② HEAD 中的标签

meta	设置元信息	属性：charset		单
title	设置标题栏标题					双

③ 排版标签

h1 ~ h6		标题		双标签
p			段落		双标签
hr			分割线		单标签
br			换行		 单标签
pre			原格式显示   双标签
div			无语义		双标签

2 文本标签

标签名	语义和功能	单标签还是双标签
em	表示强调，默认表现为斜体字。	双标签
strong	表示强调，默认表现为粗体字	双标签
ins	表示添加的内容，默认有下划线	双标签
del	表示删除的内容，默认有删除线	双标签
sub	下标字	双标签
sup	上标字	双标签

3 图片

3.1 img 标签

标签名	语义和功能	属性	单标签还是双标签
img	图片	src：设置图片文件的地址。 alt：设置图片的替代文字。 width：设置图片的宽度。 height：设置图片的高度。	单标签

总结：

当图片无法正常显示的时候，显示替代文字。
设置 width 和 height 属性值的时候，只需要设置数字，单位是自动加的，是像素。
如果只设置 width 或者只设置 height，另外一个根据图片比例自动计算。

3.2 常见的图片格式

.jpg / .jpeg
.png
.gif

4 相对路径和绝对路径

4.1 绝对路径

前端开发所使用的绝对路径，就是文件在网络上绝对的、完整的地址，也称为 URL。

https://nimg.ws.126.net/images/1000.jpg
https://www.163.com/news/article/GFB9HM1N000189FH.html

4.2 相对路径

相对路径参考当前写代码的网页文件，找到目标文件相对于当前参考文件的位置。

目标文件在当前文件的同级或者下级以及更下级：
./ 或者 省略./直接写

目标文件在当前文件的上级或者更上级：
../		上一级目录
../../  上一级的上一级

4.3 HTML 中使用路径的场景

1. 使用 img 标签在网页中引入图片
2. 使用 video 标签在网页中引入视频
3. 使用 audio 标签在网页中引入音频
4. 使用 iframe 标签在网页中引入其他网页
5. 超链接中指定目标地址
6. 使用 link 标签引入外部的 CSS 文件
7. 使用 script 标签引入外部的 js 文件

5 超链接和锚点

5.1 a 标签

标签名	语义和功能	属性	单标签还是双标签
a	超链接	href：设置目标文件的地址。 target：设置目标文件在哪里打开，值： `_self`、`_blank`	双标签

5.2 超链接

① 跳转新的页面

<!--使用绝对路径指定目标文件地址-->
<a href="https://www.163.com/dy/article/GFASGO3M0519C6T9.html">宝格丽终止与吴亦凡合作关系</a>
<a href="http://www.baidu.com/index.html">百度</a>

<!--使用相对路径指定目标文件地址-->
<a href="../02-图片标签/01-图片标签.html">图片</a>

<!--目标网页在新窗口打开-->
<a href="http://www.atguigu.com" target="_blank">尚硅谷</a>

② 跳转到其他类型的文件

<a href="images/小乐出浴图.jpg">【图片】小乐出浴图</a><br>
<a href="resouces/小乐老师的业余生活.jpg" target="_blank">【图片】小乐老师的业余生活</a><br>
<a href="resouces/如何30岁之前走上人生巅峰.pdf">【pdf】如何30岁之前走上人生巅峰</a><br>
<a href="resouces/如何拥有百亿资产.docx">【word文档】如何拥有百亿资产</a><br>
<a href="resouces/小乐老师的私房照片.7z">【压缩文件】小乐老师的私房照片</a><br>
<a href="resouces/小乐老师的性福生活.mp4">【视频文件】小乐老师的性福生活</a><br>

**注意：**超链接目标文件的类型如果是浏览器能够打开的，点击超链接浏览器打开目标文件；如果目标文件的类型浏览器无法打开，点击超链接下载。

③ 超链接其他特殊功能

<a href="mailto:fuming@atguigu.cn">发邮件</a>
<a href="tel:18618176338">打电话</a>
<a href="sms:18618176338">发短信</a>

④ href 的值是空的

<a href="">重新加载本页面</a>

超超链接 href 属性为空，点击超链接，重新加载本页面！

5.3 锚点

① 如何设置锚点

第一种方式使用 a 标签设置

<a name="锚点名"></a>

第二种方式任何标签都可以设置 id 属性

任何标签，只要设置了 id 属性，此处位置就是锚点了，锚点名就是 id 属性的值。

<div id="锚点名"></div>
<p id="锚点名"></p>

② 如何跳转到锚点

<!-- 跳转到本页面内的指定锚点 -->
<a href="#锚点名">超链接内容</a>

<!-- 跳转到其他页面指定的锚点 -->
<a href="目标页面的路径#锚点名">超链接内容</a>

<!-- 跳转到本页面顶部 -->
<a href="#">返回页面顶部</a>

任务&作业

1. 整理笔记 梳理知识点
2. 课堂案例
3. 作业：
   超链接和相对路径练习