HTML 标签

1 HTML 定义

HTML 超文本标记语言一一 Hyper Text Markup Language。

超文本是什么? 链接

标记是什么? 标记也叫标签,带尖括号的文本

2 标签语法

  • 标签成对出现,中间包裹内容
  • <>里面放英文字母(标签名)
  • 结束标签比开始标签多 /
  • 双标签:成对出现 的标签
  • 单标签只有开始标签,没有结束标签,比如:<br>:换行 <hr>:水平线

3 HTML 基本骨架

HTML 基本骨架是 网页模板

VSCode快速生成骨架:在HTML文件(.html)中,!(英文)配合Enter/Tab键

  • html:整个网页
  • head:网页头部 ,存放给浏览器 看的代码,例如CSS
  • body:网页主体,存放给用户看的代码,例如图片、文字
  • title:网页标题

4 标签的关系

作用:明确代码的书写位置

  • 父子关系(嵌套关系)
  • 兄弟关系(并列关系)

比如外边的框和手机的图片就是父子关系; 手机的图片和名字就是兄弟关系

5 标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

例子:

标签名:h1 - h6 双标签

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>  
</body>
</html>

运行结果:

经验:h1标签在一个网页中 只能用一次 ,用来放 新闻标题网页的logo

6 段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

标签名:p (双标签)

显示特点:独占一行、段落之间存在间隙

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <h1>一级标题</h1>
    <p>Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用(SPA)提供驱动。</p>
    <p>Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用(SPA)提供驱动。</p>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

效果:

7 换行和水平线标签 单标签

  • 换行:<br>
  • 水平线:<hr>
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    第一行内容
    <br>
    <br>
    第二行内容
    <hr>
</body>
</html>

运行结果:

8 文本格式化标签

作用:为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <strong>strong 加粗</strong>
    <em>em 倾斜</em>
    <ins>ins 下划线</ins>
    <del>del 删除线</del>
</body>
</html>

运行结果:

不会换行

9 图像标签

作用:在网页中插入图片

标签名:<img src="图片的 URL">

标签属性:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <img src="./20250609204549.jpg" alt="此图片无法显示" title="蓝蓝的天空">
</body>
</html>

10 路径

  • 相对路径:从当前文件位置出发查找目标文件
  • 绝对路径:从盘符出发查找目标文件

10.1 相对路径

/ 表示进入某个文件夹里面
表示当前 文件所在文件夹
../ 表示进入当前的上一级文件夹
../../ 表示进入当前文件夹的上上一级文件夹

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <img src="./1.jpg" alt="此图片无法显示">
    <img src="./img/6.jpg" alt="">
    <!-- ../ 进入了上一级文件夹 -->
    <img src="../HTML_img/4.jpg" alt="">
</body>
</html>

10.2 绝对路径

绝对路径的应用场景:友情链接

正反路径写法都可以

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <img src="D:\Code\HTML_img\4.jpg" alt="">
    <img src="D:/Code/HTML_img/4.jpg" alt="">
    <!-- 可以复制网上在线的图片链接,不用下载图片 -->
    <img src="https://csdnimg.cn/release/mpfev3/mp_v3/logo-dIbdY6cU.png" alt="">
</body>
</html>

运行结果

11 超链接

<a href="https://www.baidu.com">跳转到百度</a>

添加属性:target="_blank" 可以让跳转的页面在一个新的网页下打开

经验:开发初期,不知道超链接要跳转的地址,href 属性值写 #,它是空链接,不会跳转

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <!-- target="_blank" 新窗口跳转页面 -->
    <a href="https://blog.csdn.net/qq_56808981?type=blog" target="_blank">跳转到作者 CSDN 主页</a>
    <a href="./1.jpg" target="_blank">跳转到本地的一张图片</a>
</body>
</html>

12 音频标签

<audio src="音频的URL"></audio>

在 HTML5 里面,如果属性名和属性值完全一样,可以简写为一个单词

13 视频标签

<video src="视频的URL"></video>

参考链接:

03-标签语法_哔哩哔哩_bilibili
04-HTML基本骨架_哔哩哔哩_bilibili
05-标签的关系_哔哩哔哩_bilibili
07-排版标签-标题和段落_哔哩哔哩_bilibili
09-文本格式化标签_哔哩哔哩_bilibili
10-图像标签_哔哩哔哩_bilibili
11-路径-相对和绝对_哔哩哔哩_bilibili
12-超链接标签_哔哩哔哩_bilibili
13-多媒体标签-音频和视频_哔哩哔哩_bilibili

相关推荐
小林学习编程5 分钟前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏6 分钟前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头2 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心3 小时前
vben 之 axios 封装
前端·javascript·学习
遗憾随她而去.3 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09013 小时前
浅析Web存储系统
前端