title: 二、HTML学习笔记（HTML标签-上）
date: 2024/02/02
HTML 语法规范
基本语法概述
-
HTML 标签是由
尖括号包围的关键词，如：<html> -
绝大部分标签是成对出现的，我们称之为
双标签，第一个称为开始标签，第二个称为结束标签，并且结束标签需要加/，如：<html></html>、<div></div> -
有一些特殊标签是单个出现的，无需结束标签，我们称之为
单标签，只需要自身添加/即可，如：<br />
-
01-HTML 语法规范.html<html></html> <div></div> <br />
标签关系
标签关系可以分为两类：
包含关系和并列关系
-
包含关系
<head> <title></title> </head> -
并列关系
<head></head> <body></body>
HTML 基本结构标签
第一个 HTML 网页
每个网页都会有一个基本的结构标签（骨架标签），页面内容也是在这些基本标签上书写。
HTML 页面也被成为 HTML 文档
| 表签名 | 定义 | 说明 |
|---|---|---|
<html> | HTML标签 | 页面中最大的标签，称为根标签 |
<head> | 文档的头部标签 | 其中必须包含 title 标签 |
<title> | 文档的标题标签 | 设置网页标题 |
<body> | 文档的主体标签 | 元素包含文档的所有内容，页面内容基本都是放到 body 标签中 |
-
02-第一个页面.html<html> <head> <title>我的第一个页面</title> </head> <body> 键盘敲烂，月入过万 </dody> </html>
网页开发工具（ Visual Studio Code）
VSCode 的使用
-
双击打开软件
-
新建文件（Ctrl + N）
-
保存文件（Ctrl + S），注意保存为
html格式 -
输入
!生成页面骨架结构，注意是英文的感叹号 -
右键选择
Open In Defult Browser或Open In Other Browser
03-vscode创建页面.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>我利用vscode创建的第一个页面</title> </head> <body> 键盘敲烂，月入过万 </body> </html>
VSCode 插件以及快捷键
略
新增标签含义
-
<!DOCTYPE>标签， 文档类声明，作用就是告诉浏览器使用哪个版本的 HTML 来解析代码 -
<html lang="en">，lang=“en"作用是定义当前文档的显示语言，en：英文、zh-CN：中文 -
<meta charset="UTF-8">，charset="UTF-8"作用是定义当前文档使用的字符集，UTF-8、GB2312、GBK、BIG5，其中UTF-8被称为万国码
HTML 常用标签
标签语义
学习标签是有技巧的，重点是记住每个标签的语义，简单理解就是记住每个
标签的含义，即这个标签是用来做什么的
根据标签的语义，在合适的地方合理使用标签，可以让页面结构更加清晰
标题标签
为了使网页更具有语义化，我们通常会在页面中使用到
标题标签，HTML 提供了6种不同等级的标题标签，从大到小依次是<h1> ~ <h6>
<!-- 标题标签独占一行，显示的时候不与其他标签显示在一行-->
<h1>我是一级标题标签</h1>
语义：在页面中作为标题使用，根据标题大小和重要程度递减
-
04-标题标签.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>标题标签</title> </head> <body> <h1>标题一共六级选</h1> <h2>文字加粗一行显</h2> <h3>由大到小一词减</h3> <h4>从重到轻随之变</h4> <h5>语法规范书写后</h5> <h6>具体效果刷新见</h6> </body> </html>
段落标签和换行标签
段落标签
在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示，在 HTML 标签中，
<p>标签用于定义段落，它可以将整个网页分为若干段落
<p>我是一个段落标签</p>
语义：可以吧 HTML 文档分割为若干段落
换行标签
在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，才会自动换行，如果需要强制换行，则需要使用
<br />换行标签
<br />
语义：强制换行
-
05-段落标签和换行标签.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>段落标签和换行标签</title> </head> <body> <p>第一段<br />第一段</p> <p>第二段</p> <p>第三段</p> </body> </html> -
06-体育新闻案例.html略
文本格式化标签
在网页中，有时我们需要对文字格式进行设置，比如
加粗、倾斜、、删除线下划线等效果，这时就需要 HTML 中的文本格式化标签，使文字以特殊的形式显示
| 标签 | 作用 | 说明 |
|---|---|---|
<strong>或<b> | 加粗 | 推荐使用<strong> |
<em>或<i> | 倾斜 | 推荐使用<em> |
<del>或<s> | 删除线 | 推荐使用<del> |
<ins>或<u> | 下划线 | 推荐使用<ins> |
语义：突出文字重要性
-
07-文本格式化标签.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>文本格式化标签</title> </head> <body> 我是<strong>加粗</strong>文字 我是<em>倾斜</em>文字 我是<del>删除线</del>文字 我是<ins>下划线</ins>文字 </body> </html>
盒子标签
在编写 HTML 页面的时候，如果将所有代码都编写到一起，会显得代码结构混乱，此时应使用
<div>或<span>标签来对页面结构进行划分，使页面结构更加清晰。它们俩没有具体的语义，只是用来装内容的
<!-- div 标签独占一行，显示的时候不与其他标签显示在一行-->
<div></div>
<!-- span 标签显示的时候可以与其他标签显示在一行-->
<span></span>
-
08-盒子标签.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>盒子标签</title> </head> <body> <div>我是 div 标签，我自己独占一行</div> <div>我是 div 标签，我自己独占一行</div> <span>百度</span> <span>新浪</span> <span>搜狐</span> </body> </html>
图像标签和路径
图像标签
在 HTML 中，可以使用
<img>标签向页面中添加图片
<!-- src 是 img 标签的必须属性，它用于指定所要显示的图片的路径 -->
<img src="图片路径" />
| 属性 | 值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 当图片加载失败无法显示，显示此文字 |
| title | 文本 | 图片的标题，当鼠标移入图片，显示此文字 |
| width | 像素 | 图片宽度 |
| hight | 像素 | 图片高度 |
| border | 像素 | 图片边框粗细 |
-
09-图像标签.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>图像标签</title> </head> <body> <img src="img.jpg" /> <img src="img1.jpg" alt="图片加载失败" /> <img src="img.jpg" alt="图片加载失败" title="我是pink老师" /> <img src="img.jpg" alt="图片加载失败" title="我是pink老师" width="500" /> <!-- 在实际开发中，宽度和高度一般只设置其中一个，另一个会等比例进行调整--> <img src="img.jpg" alt="图片加载失败" title="我是pink老师" width="500" hight="200" /> <img src="img.jpg" alt="图片加载失败" title="我是pink老师" width="500" border="15" /> </body> </html>
路径
页面中的图片往往会有很多，如果都与 HTML 文件放到统一文件夹下，会显得很乱，所以需要把图片文件放到其他指定文件夹中，而在添加图片时，就需要编写图片路径来指定图片位置
-
相对路径
以当前文件所在文件夹为参考，目标文件相对于向前文件位置的路径
路径 符号 说明 同一级 ./或不写如 <img src="./img.jpg" />或<img src="img.jpg" />下一级 /如 <img src="./img/img.jpg" />上一级 ../如 <img src="../img/img.jpg" /> -
绝对路径
目标文件相对于盘符的路径，或者网络路径
-
11、12、13-相对路径和绝对路径.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>图像标签</title> </head> <body> <!-- 同一级 --> <img src="./img.jpg" /> <img src="img.jpg" /> <!-- 下一级 --> <img src="./img/img.jpg" /> <!-- 上一级 --> <img src="../img/img.jpg" /> <!-- 绝对路径 --> <img src="D:\html\img\img.jpg" /> <!-- 网络路径 --> <img src="http://www.itcast.cn/images/logo.gif" /> </body> </html>
超链接标签
在 HTML 中，
<a>标签用来定义超链接标签，作用是从一个页面跳转至另一个页面
超链接的语法规范
<a href="跳转目标地址" target="目标窗口的打开方式">文本或图片</a>
| 属性 | 说明 |
|---|---|
| href | 必须属性，制定目标网页的地址 |
| target | 指定目标页面的打开方式，默认是 _self（当前窗口），还有 _blank（新开窗口） |
链接的分类
-
外部链接：跳转至自身网站以外的网页
-
内部链接：跳转至自身网站内部的其他网页
-
空链接：
href="#"，可以点击，但不会跳转 -
下载链接：目标地址是一个文件地址，而不是网页地址
-
网页元素链接：标签内不仅可以添加文本，也可以插入图片、表格、音频、视频等，都可以将其变为超链接
-
锚点链接：内面内部跳转至指定页面位置，
href="#目标元素id"
-
14-超链接标签.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>超链接标签</title> </head> <body> <!-- 外部链接，当前窗口打开 --> <a href="https://www.baidu.com" target="_self">百度</a> <!-- 外部链接，新开窗口打开 --> <a href="https://www.baidu.com" target="_blank">百度</a> <!-- 内部链接，新开窗口打开 --> <a href="./09-图像标签.html" target="_blank">图像标签</a> <!-- 空链接 --> <a href="#">空链接</a> <!-- 下载链接 --> <a href="./img.zip">空链接</a> <!-- 图片链接 --> <a href="https://www.baidu.com"> <img src="./img.jpg" /> </a> <!-- 锚点链接 --> <div id="head"></div> <a href="#head">锚点链接</a> </body> </html>
HTML 中的注释和特殊字符
注释
如果需要在 HTML 文档中添加一些便于阅读和理解的文字，但又不想这些文字显示在页面上，就可以使用
注释标签，HTML 中的注释以<!-- 文字内容 -->表示，快捷键：Ctrl + /
特殊字符
在 HTML 中，有一些字符是无法直接显示在页面上，或者显示有问题，这时就需要特殊字符来帮助显示
| 特殊字符 | 代码 |
|---|---|
| |
| < | < |
| > | > |
| & | & |
| ¥ | ¥ |
| © | © |
| ® | ® |
| ° | ° |
| ± | ± |
| × | × |
| ÷ | ÷ |
| ² | ² |
-
16-注释标签和特殊字符.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatiable" content="ie=edge"> <title>注释标签和特殊字符</title> </head> <body> <!-- 这段话不会显示在页面上 --> 百 度 1 < 2 <p>是段落标签 </body> </html>
5040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
