当前位置： 首页 > news >正文

【前端基础】摩天之建的艺术：html（上）

news 2025/6/18 10:16:15

文章目录

  • 1.什么是html？
  • 2.html文件基本结构
  • 3.htm常见标签
    • 3.1 注释标签
    • 3.2 标题标签
    • 3.3 段落标签
    • 3.4 换行标签
    • 3.5 格式化标签
    • 3.6 图片标签
    • 3.7 超链接标签
  • 希望读者们多多三连支持
  • 小编会继续更新
  • 你们的鼓励就是我前进的动力！

从本篇开始学习前端基础之 html 的搭建路程，实现一个基本的静态网站框架，一般使用的软件是 VSCODE，可以自行上网查询下载配置教程

1.什么是html？

html 即超文本标记语言（HyperText Markup Language）
它是用于创建网页的标准标记语言，html 借助各类标签来对网页的结构和内容加以描述

html 代码是由标签构成的

💻比如：

<body>hello</body>
  • 标签名 (body) 放到 < > 中
  • 大部分标签成对出现，<body> 为开始标签，</body> 为结束标签
  • 少数标签只有开始标签，称为 “单标签”
  • 开始标签和结束标签之间，写的是标签的内容(hello)
  • 开始标签中可能会带有 “属性”，id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)

2.html文件基本结构

<html><head><title>第一个页面</title></head><body>hello world</body>
</html>
  • html 标签是整个 html 文件的根标签(最顶层标签)，所有代码都是写在这里面的
  • head 标签中写页面的属性
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)，title 是 head 的子标签，head 是 title 的父标签，head 和 body 之间是兄弟关系

标签之间的结构关系, 构成了一个 DOM 树：
在这里插入图片描述

🔥值得注意的是：

<!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></body>
</html>

按住 SHIFT + !，按 ENTER 键，此时能自动生成代码的主体框架

  • <!DOCTYPE html> 称为 DTD (文档类型定义)，描述当前的文件是一个 HTML5 的文件
  • <html lang="en"> 其中 lang 属性表示当前页面是一个 “英语页面”，这里暂时不用管(有些浏览器会根据此处的声明提示是否进行自动翻译)
  • <meta charset="UTF-8"> 描述页面的字符编码方式，没有这一行可能会导致中文乱码
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">。name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域。content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽，并设置初始缩放为不缩放(这个属性对于移动端开发更重要一些)
  • 记得每次修改代码需要 CTRL + S 保存代码才会在网页上生效

✏️展示效果：

在这里插入图片描述

可以在浏览器界面按 F12 打开开发者工具查看页面结构，每个标签相当于一个对象，程序员可以通过这些代码对网页进行增删查改

3.htm常见标签

3.1 注释标签

<!-- 我是注释 -->

可以通过 CTRL + / 快捷键快速进行注释/取消注释

🔥值得注意的是： 可以 F12 查看注释

3.2 标题标签

✏️举个例子：

<!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><h1>这是一级标签</h1><h2>这是二级标签</h2><h3>这是三级标签</h3><h4>这是四级标签</h4><h5>这是五级标签</h5><h6>这是六级标签</h6>
</body>
</html>

从 h1-h6，数字越大，则字体越小

✏️展示效果：

在这里插入图片描述

3.3 段落标签

✏️举个例子：

<!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><p>最终还是败给资本了</p><p>我几乎每个星期四都在转发，但是就是没人V我50，不知道是不是有人在背后做局阴我</p><p>可能是我动了谁的汉堡 香辣鸡腿堡 劲脆鸡腿堡 新奥尔良烤鸡腿堡 老北京鸡肉卷 墨西哥鸡肉卷 深海鳕鱼堡 田园脆鸡堡 川辣嫩牛五方 薯条（小/中/大） 土豆泥 香甜粟米棒 四季鲜蔬 玉米色拉 胡萝卜餐包 深海鳕鱼条 上校鸡块 鸡米花 奥尔良烤翅 吮指原味鸡 香辣鸡翅 葡式蛋挞 草莓蛋挞 脆皮甜筒 草莓圣代 巧克力圣代 咖啡 果汁 冰爽茶 纯牛奶 红茶 蜂蜜茶 奶茶 百事可乐 七喜 美年达</p><p>资本你赢了！</p>
</body>
</html>

用 p 标签表示一个段落，因为代码里的换行在网页里只会显示为一个空格

  • p 标签之间存在一个空隙
  • 当前的 p 标签描述的段落，前面还没有缩进(未来 css 会学)
  • 自动根据浏览器宽度来决定排版
  • html 内容首尾处的换行，空格均无效
  • 在 html 中文字之间输入的多个空格只相当于一个空格

✏️展示效果：

在这里插入图片描述

3.4 换行标签

✏️举个例子：

<!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><p>最终还是败给资本了</p><p>我几乎每个星期四都在转发,但是就是没人V我50,<br/>不知道是不是有人在背后做局阴我</p><p>可能是我动了谁的汉堡 香辣鸡腿堡 劲脆鸡腿堡 新奥尔良烤鸡腿堡 老北京鸡肉卷 墨西哥鸡肉卷 深海鳕鱼堡 田园脆鸡堡 川辣嫩牛五方 薯条（小/中/大） 土豆泥 香甜粟米棒 四季鲜蔬 玉米色拉 胡萝卜餐包 深海鳕鱼条 上校鸡块 鸡米花 奥尔良烤翅 吮指原味鸡 香辣鸡翅 葡式蛋挞 草莓蛋挞 脆皮甜筒 草莓圣代 巧克力圣代 咖啡 果汁 冰爽茶 纯牛奶 红茶 蜂蜜茶 奶茶 百事可乐 七喜 美年达</p><p>资本你赢了！</p>
</body>
</html>

br 是 break 的缩写，表示换行

  • br 是一个单标签(不需要结束标签)
  • br 标签比 p 标签的间隔空隙小
  • <br/> 是规范写法，不建议写成 <br>

✏️展示效果：

在这里插入图片描述

3.5 格式化标签

✏️举个例子：

<!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><strong>strong 加粗</strong><b>b 加粗</b><br><em>em 倾斜</em><i>i 倾斜</i><br><del>del 删除线</del><s>s 删除线</s><br><ins>ins 下划线</ins><u>u 下划线</u>
</body>
</html>

使用 css 也可以完成类似的效果，但是 html 里也有相关的实现，实际开发中以 css 方式为主

  • 加粗： strong 标签 和 b 标签
  • 倾斜： em 标签 和 i 标签
  • 删除线： del 标签 和 s 标签
  • 下划线： ins 标签 和 u 标签

🔥值得注意的是： strong 和 b 的区别在于强调的程度不同，比如在爬取网站的重要内容时，会优先爬取 strong 的文本，其他标签也是同理

3.6 图片标签

<img src=" ">

img 标签必须带有 src 属性，表示图片的路径

这里图片路径分为两种

  • 绝对路径：
    磁盘路径 C:\Users\ZHANGZHANHUA\Desktop\微信图片_20250603234406.png
    网络路径 https://blog.csdn.net/Zero_VPN?spm=1011.2415.3001.5343

  • 相对路径：
    同级路径 直接写文件名即可 (或者 ./)
    下一级路径 image/1.jpg
    上一级路径 ../image/1.jpg

图片标签的其他属性：

  • alt：替换文本，当文本不能正确显示的时候，会显示一个替换的文字
  • title：提示文本，鼠标放到图片上，就会有提示
  • width/height：控制宽度高度. 高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡
  • border：边框，参数是宽度的像素，但是一般使用 css 来设定

✏️举个例子：

<!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><img src="C:\Users\ZHANGZHANHUA\Desktop\壁纸\微信图片_20250603234406.png" alt="不能显示" title="这是磁盘图片链接" width="1200px" height="800px" border="4px">
</body>
</html>

✏️展示效果：

在这里插入图片描述

3.7 超链接标签

✏️举个例子：

<!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><a href="https://blog.csdn.net/Zero_VPN?spm=1011.2415.3001.5343" target="_blank">我的博客</a><a href="#">空链接</a><a href="https://blog.csdn.net/Zero_VPN?spm=1011.2415.3001.5343"><img src="C:\Users\ZHANGZHANHUA\Desktop\壁纸\微信图片_20250603234406.png" alt="不能显示" title="这是磁盘图片链接" width="120px" height="80px"></a><a href="test.zip">下载文件</a>
</body>
</html>
  • href：必须具备，表示点击后会跳转到哪个页面
  • target：打开方式，默认是 _self，在当前页面跳转，如果是 _blank 则用新的标签页打开

🔥值得注意的是： 使用 # 在 href 中占位表示空连接，禁止 a 标签跳转: <a href="javascript:void(0);"> 或者 <a href="javascript:;">

✏️展示效果：

在这里插入图片描述

希望读者们多多三连支持

小编会继续更新

你们的鼓励就是我前进的动力！

请添加图片描述

http://www.lryc.cn/news/571208.html

相关文章：

  • 点云提取车道线 识别车道线
  • Rust 学习笔记：关于 OOP 和 trait 对象的练习题
  • 基于CNN的FashionMNIST数据集识别6——DenseNet模型
  • KingbaseES在线体验平台深度测评：基于MCP接口管理的Oracle风格SQL实战
  • 不同建模方式的介绍 RTL建模笔记（1）
  • 【技术】记一次 Docker 中的 ES 数据迁移，使用 Reindex API
  • C++初阶-queue和deque（队列和双端队列）
  • 台积电（TSMC）工艺库命名规则
  • 在 HTTP 请求返回的状态码不为 200 时，重新发送请求
  • idea中配置svn及提交提示“未检测到更改”提示
  • 条件查询详细说明
  • 为编写Python脚本实现H3C交换机自动化配置笔记一
  • Java编程之外观模式
  • JSON编辑器：三种模式的应用（三）
  • 重构气血经络的数学模型：气血经络级联控制系统核心方程
  • 第17天：数据库学习笔记1
  • MySQL 默认连接数
  • .sstop勒索加密数据库恢复---惜分飞
  • 从电商平台下载数据的项目经验分享 (part 1)
  • 前后端拦截器+MDC实现纯数字 traceId 全链路日志追踪（axios + Spring Boot 超详细实战）
  • DeepSeek 大型 MoE 模型大规模部署压测学习
  • FlinkCDC-Hudi数据实时入湖原理篇
  • JVM监控的挑战：Applications Manager如何提供帮助
  • Spring Boot集成Kafka全攻略：从基础配置到高级实践
  • 多模态大语言模型演进：从视觉理解到具身智能的技术突破
  • Linux运维新人自用笔记（部署 ​​LAMP：Linux + Apache + MySQL + PHP、部署discuz论坛）
  • 5.安装IK分词器
  • ELK在Java的使用
  • Selenium(选择元素，浏览器/元素操作，等待，页面交互)
  • Windows Python 环境管理终极对比：极简方案 VS 传统方案（仅需 2 个软件实现全流程自动化）