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

澪贰

发布于 2025-07-14 08:21:52

4500

文章被收录于专栏：学习学习

从本篇开始学习前端基础之 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>