注释
格式 ``````
<!--下面一行代码, 代表着告诉浏览器郑伊健这三个字是标题-->
<h1>郑伊健</h1>
快捷键:ctrl + /
img 标签
img 是 Image 的缩写
作用：告诉浏览器我们需要显示一张图片
img 标签的格式
<img src="">**
img 标签中的 src 是英文 source 的缩写
所以 img 标签中的 src 就是用来告诉 img 标签，需要显示的图片名称
注意点
- img 不独占一行
- 如果我们手动指定了 img 标签显示图片的宽度和高度，有可能会导致图片变形，那么如果又想指定宽高，又不想图片变形，我们可以指定宽度和高度其中一个值
- 只要指定了高度，系统会自动根据告诉计算出宽度，等比拉伸不会变形
img 中的其他属性
-
width 宽度
-
height 高度
<img src=""* width="211">* -
这两个属性用来告诉 Img 标签将来显示的图片有多宽有多高，如果 img 标签没有指定需要显示的图片的宽高，那么系统会按照图片默认的宽高来显示；如果 img 标签指定了宽高，那么系统会按照指定的宽高来显示
-
title: 用于告诉浏览器，当鼠标悬停在图片上时需要在弹出的描述框中显示什么内容
<img src=""* title="这是什么图片">* -
alt 其实时英文 alternate 的缩写，它的作用就是用于告诉浏览器，当需要显示的图片找不到时显示什么内容
<img alt="这没有图片">
br 标签
br 标签的作用： 换行
br 标签的格式： <br>
br 标签的注意点
- 多个 br 标签可以连续使用，使用了多少个 br 标签就会换多少行
- 由于 html 的作用就是用来给文本添加语义，而 br 标签的语义是不另起一个段落换行，而在企业开发中一般情况下需要换行都是因为需要另起段落，所以在企业开发中很少使用 br 标签
路径问题
想给 src 赋值有两种方式
- 通过相对路径赋值（掌握），相对路径就是每次都从 .html 文件所在的文件夹开始查找，我们称之为相对路径
- 同级
同级就是“图片”和“ .html 文件”存储在同一个文件夹中
格式：
src="QRCode.jpg"
含义：
在 .html 文件所在的文件夹中查找名称叫做 QRCode.jpg 的图片 - 下级
下级就是“存储图片的文件夹”和“ . html 文件” 在同一个文件夹中
格式:
src="images/QRCode.jpg"
含义：
在 .html 文件所在的文件夹中找到名称叫做 images 的文件夹 然后再在 Images 文件夹中找到名称叫做 QRCode.jpg 的图片 - 上级
上级就是“存储图片的位置”和“存储代码的文件夹”在同一个文件夹中
格式：
src="../QRCode.jpg"
含义：
在 .html 文件所在的文件夹中找到这个文件夹的上一级文件夹，然后再在上一级文件夹中找到名称叫做
QRCode.jpg 其中 ../ 代表找到当前文件夹的上一级文件夹 - 通过绝对路径赋值（了解）
绝对路径就是每次都从指定的盘符开始查找
格式：
src="C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg"
含义：在 C 盘下找到 Users文件夹，然后在 Users 文件夹中找到 Jonathan_Lee 文件夹，然后在 Jonathan_Lee 文件夹中找到 Desktop 文件夹，然后在 Desktop 文件夹中找到 HTML 基础文件夹，然后在 HTML基础文件夹中找到名称叫阻碍哦 QRCode.jpg 的图片
注意 - 路径中不要出现中文，否则可能出现为止问题
- 如果是通过“相对路径”来指定图片，不能跨盘符
例如 .html 文件在 C 盘，那么不能去查找 D 盘图片
img src="QRCode.jpg"
img src="images/QRCode.jpg"
img src="../QRCode.jpg"
img src="C:\Users\Jonathan_Lee\Desktop\HTML基础\QRCode.jpg"
a 标签的基本使用
a 标签
作用：
就是用于控制页面与页面之间跳转的
a 标签的格式：
<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
<a href="https://www.nuomi.com/?cid=002540">糯米</a>
- a 标签中有一个叫做 target 属性，这个属性的作用就是专门用于控制如何跳转的，包含两个值
- _self
用于在当前选项卡中跳转，也就是不新建界面跳转，默认值为 _self
<a href="xxx" target="_self"></a> - _blank
用于在新的选项卡中跳转，也就是新建界面跳转
<a href="xxx" target="_blank"></a> - a 标签中还有一个属性，叫做 title ，a 标签中的 title 和 img 标签中的 title 一样，都是用来控制鼠标悬停时显示的提示文本的
<a href="https://nuomi.com/?cid=002540" target="_blank" title="江哥提示会转到百度糯米首页">糯米</a>
注意点
- a 标签不仅可以让文字可以点击，还可以让图片也能够被点击
<a href="images/QRCode.jpg" width="150"></a> - 一个 a 标签必须有一个 href 属性，否则 a 标签不知道要跳转到什么地方
- 如果通过 a 标签的 href 属性指定一个 URL 地址，那么 必须在地址前面加上 http:// 或者 https://
- a 标签的 href 属性除了可以指定一个网络地址以外，还可以指定一个本地地址
<a href="08-br标签.html">08-br标签</a>
<a href="text/demo/10-路径练习.html">10-路径练习.html</a>
base 标签
因为目前网页多为超链接所以在给所有超链接设置是新窗口打开还是在本窗口打开会造成繁杂的工作
base标签就是专门用来统一的指定当前网页中所有的超链接 （a 标签）需要如何打开
注意点
- base 标签必须写在 head 标签的开始标签和结束标签之间
- 如果即在 base 中制订了 target 又在 a标签中指定了 target ，那么浏览器会按照 a 标签中指定的来执行
<head>
<meta charset="UTF-8" />
<title>11-base 标签</title>
<base target="_blank">
</head>
假链接
- 点击之后不会跳转的链接我们称之为假链接
-
假链接的意义：
在企业开发前期，其它界面都没有写出来，那么我们就不知道应该跳转到什么地方，所以就只能使用假链接来代替，当项目后期其它界面都已经完成时，再将假链接替换为真链接 - 假链接的格式：
<a herf="#">xx</a><a herf="javascript:">xx</a>- 两者之间的区别：# 的假链接会自动回到网页的顶端，而 Javascript: 的假链接不会自动会到网页顶端
锚点
- 要想通过 a 标签跳转到指定的位置，那么必须告诉 a 标签一个独一无二的身份证号码，这样 a 标签才能在当前界面中找到需要跳转的目标抢位置
- 在 html 中，每一个标签都有一个名称叫做 id 的属性，这个属性就是用来给标签指定一个独一无二的身份证号码的
- 所以要想实现通过 a 标签跳转到指定的位置分为两步
- 给目标位置的标签添加一个 id 属性
然后制定一个独一无二的值 - 告诉 a 标签你需要跳转到的飙标签对应的独一无二的身份证号码是多少
格式：
<a href="#center">跳转到中部</a>
<h2 id="center">我是中部</h2>
注意点
- 通过我们的 a 标签跳转到指定的位置是没有过度动画的，是直接一下子就跳转到了指定位置
- a 标签除了可以跳转到当前界面的指定位置外，还可以跳转到其他界面的时候直接跳转到其他界面的指定位置
格式
<a href="13-锚点测试界面.html#bottm" target="_blank">跳转到锚点测试界面</a>
<h2 id="bottom">我是锚点测试界面3333</h2>
网友评论