跟着该视频学习，记录笔记：【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358
Day3 内容梳理：
目录
②其他属性：alt/title/width/height/border
HTML 2.网页标签
2.2 语义标签（下）
图像标签 & 路径
①src属性
<img>是一个单标签，用于定义HTML页面中的图像。
使用格式：
<img src=”图像URL” />其中src是<img>图像标签的特性，要填入的“图像URL”负责帮网页找到对应图像的文件路径和文件名。
比如我要下图文件夹中的HTML.png显示在网页中，在“图像URL”处就要写HTML.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>
这是一个图像<br />
<img src="HTML.png" />
</body>
</html>
若图片展示不成功，很可能是该图片和该代码不在同一文件夹下。
②其他属性：alt/title/width/height/border
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必要属性 |
| alt | 文本 | 替换文本。是在图像显示不出来的时候用文字替换。 |
| title | 文本 | 提示文本 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
alt，替换文本，例子：
（名为AAAA的图片不存在，因此会显示替换文字）
title，鼠标悬停在图片上时会显示的文字，例子：
width、height：单独使用时，是等比缩放图片的大小。若同时规定两者的数值，则是压扁或拉长图片。实际应用时往往只修改width或heigh。
border，规定边框的粗细，给图片加边框，例子：
图片多了一个15像素宽的黑色边框：
③图像标签注意要点：
- 图像标签可以有多个属性，但都必须写在src=”图像URL”的后面。
- 除了src以外的属性之间不分先后顺序，src与其他属性之间、其他属性之间均以空格相互隔开。
- 属性采用键值对的格式，即key=”value”（属性=“属性值”）。
- src这个属性是必须要写的，其他属性按需求加即可。
④图像路径
目录文件夹：普通文件夹，里面存放了素材和文件
根目录：打开目录文件夹看到的内容就是根目录。
如果是文件夹嵌套文件夹，点开里层文件夹所看到的就不是根目录。
有一种很便捷地新建文件的方式，点击“文件”--“打开文件夹”，打开目录文件夹（这里选的是名为“案例”的文件夹），点击“选择文件夹”。
然后会有下图的变化：
点击图中黄圈圈起来的按钮，然后再给新文件起名，就创建成功了。优点是方便管理文件。
当页面中的图片较多时，往往会新建一个文件夹来存放这些图像文件，会出现如下的情况：
此时html文件想要访问图片就需要图片路径了。
- 相对路径
以引用文件所在的位置为参考，从而建立出的目标路径。
| 相对路径分类 | 符号 | 说明 |
| 同一级路径 | 图像文件位于HTML文件的同一级，比如<img src=”html.png”> | |
| 下一级路径 | / | 图像文件位于HTML文件的下一级，比如<img src=”封面图片/html.png”> |
| 上一级路径 | ../ | 图像文件位于HTML文件的上一级，比如<img src=”../html.png”> |
需要特别注意的是，上一级路径的符号是两个点+一个右斜杠。另外，它指的是图片和包含该html的文件夹出于同一层级。
2、绝对路径
情况1：电脑上的绝对路径
比如我点开D盘中的VS Code，这是它的绝对路径：
采用绝对路径的问题在于，程序只能在特定电脑上运行，换个电脑运行则会因为绝对路径不同而报错，所以平时较少使用。
情况2：网站上的绝对路径
只要电脑能上网，就能获取到这张图片的网址。
将网址粘贴进src属性里，得到：
补充：绝对路径是左斜线\，相对路径是右斜线/，写的时候注意区分。
超链接标签 <a>
语法格式
用双标签<a>来包含文字或图像。比如：
<a href = “新窗口的地址” target=”页面打开方式”> 目标文本或图像 </a>标签中的“a”是单词anchor的缩写，意为“锚”
超链接标签中有两个属性需要注意，href和target
| 属性 | 作用 |
| href | 是必须要写的属性（类似于用图像标签就一定要写src），用于指定所要链接的目标的URL地址。当为标签加上href属性后，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，是指在当前的窗口打开。而_blank是指在新窗口中打开。 |
6种超链接标签
①外部链接
外部链接的URL地址必须以http:// 开头。
比如链接到CSDN：
<!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>
<h4>1、外部链接：跳转到CSDN网页 </h4>
<a href="http://www.csdn.net"> CSDN网页 </a>
</body>
</html>
点击后跳转到CSDN官网：
保留这个CSDN网页不关掉，在HTML代码中加个target=_self，保存代码后就能看到这个CSDN网页被刷新为超链接地址，也就是在当前网页中进行跳转，而非新开个窗口（target=_blank是新开个窗口）
②内部链接
内部链接的URL地址不用以以http:// 开头。
比如将两个html文件放在文件夹的同一层级下，然后从名为”创建新文件.html”跳转到“ABCD.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>
<h4>1、外部链接：跳转到CSDN网页 </h4>
<a href="http://www.csdn.net" target="_self"> CSDN网页 </a>
<h4>2、内部链接：跳转到名为“ABCD”的内部网页</h4>
<a href="ABCD网页.html" target="_self"> ABCD网页 </a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ABCD</title>
</head>
<body>
<h4>这是一个名“ABCD”的内部网页，内容有XXXXXXXXXXX</h4>
</body>
</html>
点击下图的紫色字体“ABCD网页”，跳转到该网页：
③空链接
当还未确定链接的目标时，链接标签为：
<a href=”#”>空页面</a>即使是空链接，也必须要加href属性。不加的话就只是该网站的一句话，不具备链接跳转功能。
④下载链接
如果href的地址是一个文件或者压缩包，点击该链接的时候就会下载这个文件。
⑤网页元素链接
网页中的各种网页元素都可以添加超链接，比如文本、图像、表格、音频、视频。
比如通过“html.png”这个网页图片跳转CSDN网站。
点击上图后跳转到：
⑥锚点链接
是页面目录。点击目录后，能跳转到当前页面的对应位置。
首先把href属性设置为“#名字”的形式，比如：
<a href=”#Chapter2”>第二章节</a>然后找到目标位置的标签，添加一个id属性=刚才起的名字，比如：
<h3 id=”Chapter2”>第二章内容</h3>下面的例子比较短，跳转效果不太明显，建议拿文本较长的分章节内容自己试试：
<!DOCTYPE html>
<br lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锚点标签的练习</title>
</head>
<h2>HTML学习目录</h2>
<a href="#Chapter0">C0 概述</a> </br>
<a href="#Chapter1">C1 基础内容</a> </br>
<a href="#Chapter2">C2 网页标签</a> </br>
<h3 id="#Chapter0">C0 概述</h3>
<h4>0.1 HTML网页介绍</h4>
HTML指的是超文本标记语言（Hyper Text Markup Language），是一种标记语言而非编程语言。</br>
超文本的两层含义：(1)超越了文本限制，可以加入图片、声音、动画、多媒体等内容。(2)超链接文本，可以从一个文件跳转到另一个文件，与世界个体的主机的文件相互链接。
<h4>0.2 网页的形成过程</h4>
前端人员开发代码-->浏览器解析、渲染-->生成Web页面
<h4>0.3 浏览器</h4>
国际上常用的五大浏览器：IE、Firefox（火狐）、Chrome（谷歌）、Safari、Opera</br>
目前的国内浏览器一般都会采用Webkit或Blink内核，在此至上再增添新内容。
<h4>0.4 Web的标准</h4>
需要Web标准是因为浏览器不同会导致显示页面、排版有差异。</br>
Web标准的构成有三个方面：结构（Structure）、表现（Presentation）、行为（behavior）</br>
符合Web标准的最佳体验方案：结构、表现、行为相分离。换句话说，也就是结构、表现、行为分别写到HTML文件、CSS文件、JavaScript文件中，互不影响。
<h3 id="Chapter1">C1 基础内容</h3>
<h4>1.1 基本语法规范（标签格式 & 标签关系）</h4>
<h4>1.2 基本结构标签</h4>
<h4>1.3 开发工具 & 插件</h4>
<h4>1.4 几种快捷键</h4>
<h3 id="Chapter2">C2 标签</h3>
<h4>2.1 基础标签的含义（文档类型声明标签 & 语种标签 & 字符集）</h4>
<h4>2.2 语义标签（标题标签/段落标签/换行标签/文本格式化标签/无语义标签/图像标签/超链接标签</h4>
</body>
</html>点击“HTML学习目录”下的内容，就能跳转到对应章节
2.3 注释
以<!—开头，以-->结尾，快捷键是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>
<!--这是一段注释-->
<!-- 添加注释的快捷键：ctrl+/ -->
</body>
</html>上面代码添加的两个注释都不会显示在网页中，如下图：
2.4 特殊字符
| 特殊字符 | 描述 | 字符的代码 |
| 空格 | | |
| < | 小于 | < |
| > | 大于 | > |
| & | 和 | & |
| ￥ | 人民币符号 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘 | × |
| ÷ | 除 | ÷ |
| 2 | 平方2（也叫上标2） | ² |
| 3 | 立方3（也叫上标3） | ³ |
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
发表评论 取消回复