HTML/CSS/JS学习笔记 Day2（HTML--C2 网页标签）

给bug两拳

已于 2024-09-11 14:55:34 修改

阅读量2.4k

点赞数 57

分类专栏：前端学习（HTML/CSS/JS）文章标签： html

于 2024-09-06 09:59:00 首次发布

本文链接：https://blog.csdn.net/m0_75036068/article/details/141951506

版权

前端学习（HTML/CSS/JS）专栏收录该内容

7 篇文章 0 订阅

订阅专栏

跟着该视频学习，记录笔记：【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358

Day2 内容梳理：

②其他属性：alt/title/width/height/border

HTML 2.网页标签

2.1 基础标签的含义

在VS Code中新建文件并将后缀改为.html后，在一行打一个英文的感叹号再点击Tab，得到系统默认的网页骨架，如下：

接下来将逐行解释每个标签的作用。

文档类型声明标签<!DOCTYPE>

作用是告诉浏览器该使用哪种HTML版本来显示网页

比如：<!DOCTYPE html>指当前页面采取的是HTML5版本来显示网页

注意：

必须写在整个页面的第一行。
<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签

语种标签<html lang=” ”>

比如<html lang=”en”>，用途是将当前文档显示的语言定义为英语，

分两类：”en”代表英文网页，”zh-CN”代表中文网页。

不过无论写的是en还是zh-CN，我们都可以在html代码中写各种语言。lang这个属性的作用是帮助浏览器和搜索引擎更好地分辨网页语言，并让用户决定是否翻译网站语言，如下：

字符集<meta charset=” ”>

字符集（Character set）是多个字符的集合，便于计算机能够识别和存储各种文字。

在head标签内，可通过<meta charset=“”>来规定HTML文档应该采用哪种字符编码。

Charset常用的值由UTF-8、G8K、BIG5、GB2312。其中UTF-8也被称为“万国码”，基本包含了全世界所有国家需要用到的字符。

注意只能写成UTF-8，其他格式（比如utf8、UTF8）都可能引起乱码。

2.2 语义标签

语义标签分为：标题标签、段落标签、换行标签

不采用语义标签就会导致所有内容都是同样的格式，不利于阅读，如下图：

标题标签 <h1>到<h6>

HTML提供了6个等级的网页标题，从<h1>到<h6>，按照重要性递减。

它们都是双标签的，比如：

<h1>这里是一级标题</h1>

补充一下，修改后记得先保存，再右键单击，点击”open in default browser”即可看到效果：

左侧是没使用标题标签的情况，右侧是使用了之后：

<h1>到<h6>的标题字体会逐渐变小变细，区别可参考下图（内容截取自笔记最上方的视频）：

其中h2标题的“文字加粗一行显”指的是只有被囊括在双标签内的文字才算是标题。比如：

<h2>这是一个标题</h2>123

这行代码只会显示“这是一个标题”，而不显示“123”。

段落标签<p></p>

双标签<p></p>用于定义段落，比如：

特点：文本在段落中会根据浏览器窗口的大小自动换行；段落和段落之间有明显空隙。

换行标签<br />

一般在HTML中，段落中的文字遇到浏览器窗口的边缘时才会自动换行，如果希望某段文本强制换行，则需要使用单标签<br/>。br是单词break（打断）的缩写。比如：

补充：可通过文本间隔来区分段落标签和换行标签。段落标签会使段落之间有较大缝隙，而换行标签则不会。

文本格式化标签

是文字以特殊效果呈现，有粗体、斜体、下划线等等。

语义	标签	更推荐的标签（因为语义更强烈）
加粗	<strong></strong>或者<b></b>	<strong>双标签
倾斜	<em></em>或者<i></i>	<em>双标签
删除线	<del></del>或者<s></s>	<del>双标签
下划线	<ins></ins>或者<u></u>	<ins>双标签

使用效果如下：

<!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 />
    这是<strong>加粗</strong>的文字。<br />
    这是<em>倾斜</em>的文字。<br />
    这是<del>带删除线</del>的文字。<br />
    这是<ins>带下划线</ins>的文字。<br />
</body>
</html>

无语义标签 <div>、<span>

<div>和<span>无语义，它们的作用像是盒子，用来装内容。

div是division的缩写，表示分割、分区。而span则是跨度、跨距。

特点：

<div>双标签用于布局，但是一对<div>会独占一整行，所以可以理解为大盒子。
<span>双标签也用于布局，而一对对<span>可以显示在同一行，可以理解为小盒子

举个例子：

图像标签 & 路径

①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）	³