Web前端HTML+CSS全套（1~20）

最新推荐文章于 2024-09-09 21:14:24 发布

祀斋M.R.2

最新推荐文章于 2024-09-09 21:14:24 发布

阅读量2.2k

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_72482505/article/details/127372364

版权

Web前端HTML+CSS全套（1~20）

拨云见日

CSS基础
切图流程
PC企业站布局
PC游戏站布局

溯本求源

HTML扩展
CSS扩展
HTMLS新语法
CSS3新语法
兼容与hack

风生水起

弹性布局
网格布局
移动端布局
响应式布局（一套代码适应不同设备）
bootstrap （快速搭建网页框架）

巧夺天工

预编译CSS
postcss（工程化）
CSS架构（需求点，需求点如何配合使用）
高级功能（CSS高级用法）
CSS与JS交互

1. 什么是HTML，CSS?

HTML、CSS是网站开发的基础编程语言（一般情况下要配合使用）

HTML：结构（搭结构）（搭房子）
CSS：样式（美化）（装修）
JavaScript：行为（与用户进行交互）（安装设施）

一个网站是由多个网页组成的整体。每一个网页（详情页）就是一个.html文件。浏览器上看到的网站就是代码解析后的样子。可以通过鼠标右键选择查看源代码。

如何写代码，写代码的环境

如何写.HTML文件

直接使用文本文档（改后缀为.html即可生成一个html文件）（低效，易出问题）
使用vs code(“代码编辑器”)
下载地址：https://code.visualstudio.com/

如何看到效果

在浏览器中打开

2. 如何使用vs code

安装插件（扩展）
通过下载插件的方式拓展适用范围和便捷性（常用插件：语言包，open in browser，view in browser）

学习编辑器的基本使用

折行
设置
文件——首选项——设置中可以：设置字体大小，是否换行 word wrap
搜索

快捷键

保存：Ctrl + S
全选：Ctrl + A
剪切：Ctrl + X
复制：Ctrl + C
粘贴：Ctrl + V
撤销：Ctrl + Z
前进：Ctrl + Y
生成注释：Ctrl + /
选择相同元素的下一个：Ctrl + D
从头选中一行：Shift + end
从尾选中一行：Shift + home
快速复制一行：Shift + alt+↓
快速移动一行：Shift + ↑/↓
向后缩进：tab
向前缩进：tab + shift
创建标签：单词+tab
创建初始代码：！+tab
多光标：alt + 鼠标左

3. 浏览器

用于看HTML代码

主流浏览器是Chrome（谷歌浏览器）（chrome开发工具：F12 ）（调节页面大小：Ctrl+鼠标滚轮）
市场上常见浏览器有：IE（旧），Edge（新），火狐，Safari，Chrome，Opera等
五大浏览器的区别独特的解释语法（FireFox最接近ECMA的标准）渲染效果不同性能不一样，支持脚本的执行速度等不一样

调试工具

4.网站开发

深入了解网站开发

UI设计师（UID）
设计稿

web前端开发工程师（H5开发）
设计稿——>代码
数据库数据——>显示到页面
HTML,CSS，JavaScript

web后端开发工程师
数据存储，管理

5.web三大核心技术

–HTML：结构（搭结构）（搭房子）
–CSS：样式（美化）（装修）
–JavaScript：行为（与用户进行交互）（安装设施）

请添加图片描述

6. HTML的基础结构和属性

HTML：超文本标记语言（Hyper Text Markup Language），标准通用标记语言下的一个应用。是网页制作必备的编程语言。

超文本：文本内容+非文本内容（图片，视频，音频等）
标记（标签）：<单词>（单标签:<>　双标签:<></>）

单标签：<header>
双标签：<header>hello world</header>

创建标签的快捷键：单词+tab-><单词>（自动识别单双标签）

标签可以上下排列也可以进行组合嵌套

<header>hello
  <div>
  a1
      <div>b1</div>嵌套2
      <div>b2</div>嵌套2
      <div>b3</div>嵌套2
 </div>嵌套1
  <div>a2</div>嵌套1
  <div>a3</div>嵌套1
  <div>a4</div>嵌套1
</header>            
<footer>cccc</footer>

Web中核心语言HTML的规范:HTML5

HTML速查表 ，HTML元素表
请添加图片描述
标签的属性：用于修饰标签，设置当前标签功能

设置属性语法格式：<标签属性1=“值1” 属性2=“值2”>

<header title="hello"> world</header>
<footer title="hi">html</footer>

7.HTML初始代码

每个.html文件都需要添加初始代码
.html文件的规范写法必须添加初始代码

创建初始代码：！+tab

<!DOCTYPE html>   <!-- 文档声明：这是一个html文件 -->
<html lang="en">  <!-- lang="en"表示初始为英文网站 lang="zh-CN"表示一个中文网站 -->
    <!-- html文件的最外层标签：包裹着所有html标签代码 -->
<head>
    <meta charset="UTF-8">
    <!-- 元信息：是编写网页中的一些赋值信息 -->
    <!-- UTF-8表示使用国际编码，让网页不出现乱码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title> <!-- 设置网页标题 -->
</head><!-- 与头部相关的内容 -->
<body>
网页内容
</body>    <!-- 显示网页内容的区域 -->

</html>

手写

<!DOCTYPE html>
<html lang="zh-CN"> <!--  lang="zh-CN"表示一个中文网站 -->
<head>
    <meta charset="UTF-8">  <!-- UTF-8表示使用国际编码，让网页不出现乱码 -->
 
    <title>这是网页</title>
</head>
<body>
   手写练习
</body>
</html>

在这里插入图片描述

8.HTML注释

写法：

<!--注释的内容-->浏览器中看不到，只能在代码中看到

快捷键：

生成注释（按两次取消注释）：

Ctrl + /
Shift + alt+a

意义：

把暂时不用的代码注释起来，方便以后使用
对开发人员进行提示

9.HTML语义化

根据网页中内容的结构,选择适合的HTML标签进行编写。
HTML语义化的好处：

在没有CSS的情况下，页面也能呈现出很好的内容结构、代码结构。
有利于SEO，让搜索引擎爬虫更好的理解网页，从而获取更多的有效信息，提升网页的权重。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。

10.HTML的标题与段落

HTML速查表

标题

 网页标题(双标签）：<title>这是网页</title>
 内容标题(双标签):<h1>内容标签</h1>...  <h6>内容标签</h6>

在一个网页中，h1标签最重要，并且一个.html文件中只能出现一次h1标签。h2~h6可以有多个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 
    <title>这是网页</title>
</head>
<body>
    hello
            <h1>内容标签</h1> <!-- 一个网页中h1只能出现一次 -->
            <h2>内容标签</h2>
            <h2>内容标签</h2>
            <h2>内容标签</h2>
            <h3>内容标签</h3>
            <h3>内容标签</h3>
            <h3>内容标签</h3>
            <h4>内容标签</h4>
            <h4>内容标签</h4>
            <h4>内容标签</h4>
            <h5>内容标签</h5><!-- 在网页中不经常使用 -->
            <h5>内容标签</h5><!-- 在网页中不经常使用 -->
            <h5>内容标签</h5><!-- 在网页中不经常使用 -->
            <h6>内容标签</h6><!-- 在网页中不经常使用 -->
            <h6>内容标签</h6><!-- 在网页中不经常使用 -->
            <h6>内容标签</h6><!-- 在网页中不经常使用 -->
</body>
</html>

段落

段落（双标签）：<p>具体段落内容</p>

查看源代码 调试工具

标题，段落练习

<!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>
    <p>《链锯人》是作者藤本树著作的漫画作品，第1部于2018年12月3日在《周刊少年JUMP》上连载 [1-2]  ，于2020年12月宣布完结。
        第2部于2022年7月13日在《少年JUMP+》上连载。</p>
    <p> 漫画单行本由集英社出版，繁体中文版由东立出版社发行，中国大陆电子版由哔哩哔哩漫画发布</p>
    <h2>设定</h2>
    <p>故事发生在一个与现代社会相近，但充斥着被称为“恶魔”的怪物横行的世界。
        恶魔是带着动植物、概念等所有事物的名称而诞生，超越人类智慧的怪物。
        人们认为该名称越是恐怖，恶魔的力量就越大。恶魔可以透过补充人类的血液维持力量和治愈伤势。
        占据人类尸体的恶魔称为“魔人”，虽有人类的外貌，但人格是恶魔，仅有少数可保持理性的特例。
        恶魔猎人是指与恶魔缔结契约，以消灭恶魔为业的人，包括政府辖下的“公安对魔特异课”和民间的恶魔猎人。</p>

</body>
</html>

11. 文本修饰标签

HTML速查表

强调（双标签）：<strong>加粗强调</strong><!-- 表示强调，会对文本进行加粗 -->
               <em>斜体强调</em><!-- 表示强调，会对文本进行斜体 -->
              

               **区别**：
               1. 写法与展示效果有区别，strong加粗，em斜体
               2. strong的强调性更强

下标文本：<sub></sub>
上标文本：<sup></sup>

示例：勾股定理

<!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>Document</title>
</head>
<body>
    <p>a<sup>2</sup>+b <sup>2</sup>=c <sup>2</sup></p>
    <p>H<sub>2</sub>O</p>
</body>
</html>

效果：

 删除的文本：<del></del>
 插入的文本：<ins></ins>

示例：打折

<!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>Document</title>
</head>
<body>
    <p>原价<del>300</del>,现价<ins>100</ins></p>
</body>
</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>Document</title>
</head>
<body>
    <p> <strong>《链锯人》</strong> 是作者<em>藤本树</em>著作的漫画作品 <del> 于2020年11月宣布完结</del>
        <ins>于2020年12月宣布完结</ins> 。</p>
        <p>チェンソーマン <sup>原版名称</sup>
    地    区 <sub>日本</sub> </p>
        
</body>
</html>

12.图片标签与图片属性

添加图片标签：img+tab

图片标签（单标签）：<img src="" alt="">

src：引入图片地址
alt：当图片出现问题，可以显示一段友好的提示文字（没有问题时不显示）
title：提示信息
width，height：图片大小（无论图片有没有加载好，图片上下的段落位置不发生改变）（可以用谷歌浏览器调试器Network调节网速体验区别）

添加图片练习

<!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>Document</title>
</head>
<body>
    <p>电锯人</p>
    <img src="https://c-ssl.duitang.com/uploads/blog/202107/09/20210709180439_778cc.jpg" alt="问题提示文字：电锯人-雷赛"title="电锯人-雷赛"width="30" height="36">
    <p>雷赛</p>
</body>
</html>

设置图片大小时注意是width=不是~~width ：~~

13.引入文件的地址路径

地址：

相对路径（相当于某一个文件进行引入）
绝对路径

**相对路径**：
.在路径中表示当前路径
..在路径中表示上一路径

相对路径的引入：

<!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>Document</title>
</head>
<body>
    <p>电锯人</p>
    <img src="./20200408234249_ofmki.jpg" alt="问题提示：帕瓦"title=“帕瓦” width="30" height="36">
    <p>帕瓦</p>
</body>
</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>Document</title>
</head>
<body>
    <p>电锯人</p>
    <img src="./电锯人/20200408234249_ofmki.jpg" alt="问题提示：帕瓦"title=“帕瓦” width=" 30 " height=" 36 ">
    <p>帕瓦</p>
</body>
</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>Document</title>
</head>
<body>
    <p>电锯人</p>
    <img src="../电锯人/20200408234249_ofmki.jpg" alt="问题提示：帕瓦"title=“帕瓦” width=" 30 " height=" 36 ">
    <p>帕瓦</p>
</body>
</html>

请添加图片描述

**绝对路径**：
不会参照某个参照物进行引入
无论当前文件在那个文件夹都能找到
例如："E:\22230311\电锯人\20200408234249_ofmki.jpg"

绝对路径的引入：

<!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>Document</title>
</head>
<body>
    <p>电锯人</p>
    <img src="E:\22230311\电锯人\20200408234249_ofmki.jpg"alt="问题提示：帕瓦"title=“帕瓦” width=" 30 " height=" 36 ">
    <p>帕瓦</p>
</body>
</html>

盘符可以不用写

目前学习推荐使用相对路径
E:/22230311/电锯人/20200408234249_ofmki.jpg->
E:\22230311\电锯人\20200408234249_ofmki.jpg斜线可以改成反斜线（计算机内部），但养成写斜线的习惯因为网络地址只能用斜线。

14.跳转链接

链接标签（双标签）：<a></a>
base（单标签）：

href属性：链接的地址 target属性：可以改变链接打开方式，
默认情况下：在当前页面打开-self ，新窗口打开-blank
如何默认打开新窗口：base（单标签）一般加在head里

示例：原窗口

<!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>
    <a href="https://baike.baidu.com/item/%E7%94%B5%E9%94%AF%E4%BA%BA/54625036"target="_blank">电锯人</a> <!-- 在新窗口打开  -->
    <a href="https://baike.baidu.com/item/%E5%B8%95%E7%93%A6/24304218">
 <img src="E:\22230311\电锯人\20200408234249_ofmki.jpg"alt="问题提示：帕瓦"title=“帕瓦” width=" 300 " height=" 360 "> 
    </a><!-- 默认在原窗口打开  -->
</body>
</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>
    <base target="_blank">  <!-- 默认打开新窗口  -->
</head>
<body>
    <a href="https://baike.baidu.com/item/%E7%94%B5%E9%94%AF%E4%BA%BA/54625036">电锯人</a>
    <a href="https://baike.baidu.com/item/%E5%B8%95%E7%93%A6/24304218">
        <img src="E:\22230311\电锯人\20200408234249_ofmki.jpg"alt="问题提示：帕瓦"title=“帕瓦” width=" 300 " height=" 360 ">
    </a>
</body>
</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>Document</title>
</head>
<body>
    <a href="./html/列表页.html">列表页</a>
    <img src="./电锯人图片/电次.jpg" alt="图片没了">
</body>
</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>Document</title>
</head>
<body>
    <a href="./详情页.html">详情页</a>
   <img src="../电锯人图片/雷赛.jpg" alt="图片没了">
</body>
</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=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="../首页.html">首页</a>
    <img src="../电锯人图片/帕瓦.jpg" alt="图片没了">
</body>
</html>

15.跳转锚点

跳转页面：跳转到另一个页面
跳转锚点：同一个页面内进行跳转

实现方式：

实现1：（#号与id映射，形成对应关系）
#号
id属性

<!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>Document</title>
</head>
<body>
    <a href="#电次">电次</a>
    <a href="#雷赛">雷赛</a>
    <a href="#帕瓦">帕瓦</a>
<h2 id=“电次”>电次</h2>
<p>父母欠债离世，为了替父母偿还债务一直为黑帮工作，与电锯恶魔波奇塔共同生活和与恶魔战斗，而后黑帮被丧尸恶魔操控，电次被其引导诱杀。
    电锯恶魔波奇塔为救电次，自愿成为电次的心脏，而后复活。
   </p>
   <p> 被玛奇玛收养，此后成为公安恶魔猎人，为了追求各种各样平凡的目标而奋斗。</p>
<h2 id=“雷赛”>雷赛</h2>
<p>咖啡店服务员，苏联的“豚鼠”（即小时候被苏联秘密幽禁的秘密武器），炸弹恶魔，恶魔名波姆。
    黑发碧眼，遇见电次时脸上时常挂着红晕。</p>
    <p>戴着带有拉环的项圈，拉下拉环时能够变身为恶魔。</p>
    <p>为获得链锯恶魔的心脏而与电次交往，但逐渐爱上了电次，与电次的战斗令链锯恶魔的影像公之于众。
        在与电次赴约的路上被玛奇玛和天使恶魔袭击并被支配。</p>
<h2 id="帕瓦">帕瓦</h2>
<p>东京公安对魔特异4课的恶魔猎人，“血之恶魔”的魔人，电次的搭档。
    自称“本大爷”，头上长有恶魔之角，眼中有十字。喜欢血与猫，讨厌说谎，自称猫是唯一的友人。</p>
    <p>擅长使用血液战斗，但容易暴走。</p>
    <p>向电次承诺如果能夺回被恶魔掳走的猫，就给他揉胸。</p>
</body>
</html>

实现2：
#号
name属性（加给a标签，不写在h2里)

<!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>Document</title>
</head>
<body>
    <a href="#电次">电次</a>
    <a href="#雷赛">雷赛</a>
    <a href="#帕瓦">帕瓦</a>
    <a name="电次"></a>
<h2 >电次</h2>
<p>父母欠债离世，为了替父母偿还债务一直为黑帮工作，与电锯恶魔波奇塔共同生活和与恶魔战斗，而后黑帮被丧尸恶魔操控，电次被其引导诱杀。
    电锯恶魔波奇塔为救电次，自愿成为电次的心脏，而后复活。
   </p>
   <p> 被玛奇玛收养，此后成为公安恶魔猎人，为了追求各种各样平凡的目标而奋斗。</p>
   <a name="雷赛"></a>
<h2 >雷赛</h2>
<p>咖啡店服务员，苏联的“豚鼠”（即小时候被苏联秘密幽禁的秘密武器），炸弹恶魔，恶魔名波姆。
    黑发碧眼，遇见电次时脸上时常挂着红晕。</p>
    <p>戴着带有拉环的项圈，拉下拉环时能够变身为恶魔。</p>
    <p>为获得链锯恶魔的心脏而与电次交往，但逐渐爱上了电次，与电次的战斗令链锯恶魔的影像公之于众。
        在与电次赴约的路上被玛奇玛和天使恶魔袭击并被支配。</p>
        <a name="帕瓦"></a>
<h2 >帕瓦</h2>
<p>东京公安对魔特异4课的恶魔猎人，“血之恶魔”的魔人，电次的搭档。
    自称“本大爷”，头上长有恶魔之角，眼中有十字。喜欢血与猫，讨厌说谎，自称猫是唯一的友人。</p>
    <p>擅长使用血液战斗，但容易暴走。</p>
    <p>向电次承诺如果能夺回被恶魔掳走的猫，就给他揉胸。</p>
</body>
</html>

16.特殊符号

编写一些文档时，经常会遇到输入法无法输入的字符，如（注册商标）、（版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空白的字符都是特殊符号，在HTML中，为这些特殊字符准备了专门的代码。
请添加图片描述

1.&+字符
2.解决冲突左右尖括号、添加多个空格的实现
3.&lt：< ， &gt：>

17.列表标签

无序列表

<ul>：列表最外层容器
<li>: 列表项

注：
ul和li必须是组合出现，他们之间不允许有其他标签
type属性：改变前面标记的样式（一般都是用CSS去控制）

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
    <li>第五项</li>
</ul><!-- 正确的写法 -->

<ul>
    <p></p><!-- 错误 -->
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
    <li>第五项</li>
</ul><!-- 错误的写法 -->

练习

<!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>
        <strong>小目标</strong>
    </h1>
    <ul><!-- 无序标签 -->
        <li> <a href="#"> <ins>先挣一个亿</ins></a> </li><!-- 下划线 -->
        <li> <a href="#"><em>再挣两个亿</em></a> </li><!-- 斜体 -->
        <li> <a href="#"><strong>躺平当咸鱼</strong></a></li><!-- 加粗强调 -->
    </ul><!-- 正确的写法 -->
    
</body>
</html>

有序列表

<ol>：列表最外层容器
<li>: 列表项

注：
ol和li必须是组合出现，他们之间不允许有其他标签
type属性：改变前面标记的样式（一般都是用CSS去控制）
注：
有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。

<!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>
        <strong>小目标</strong>
    </h1>
    <ol><!-- 有序标签 -->
        <li> <a href="#"> <ins>先挣一个亿</ins></a> </li><!-- 下划线 -->
        <li> <a href="#"><em>再挣两个亿</em></a> </li><!-- 斜体 -->
        <li> <a href="#"><strong>躺平当咸鱼</strong></a></li><!-- 加粗强调 -->
    </ol><!-- 正确的写法 -->
    
</body>
</html>

定义列表

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述

定义列表：列表项需要添加标题进行描述的内容

<!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>
        <strong>小目标</strong>
    </h1>
 <dl>
    <dt>目标1</dt>
<dd>先挣一个亿</dd>
<dt>目标2</dt>
<dd>再挣两个亿</dd>
<dt>目标3</dt>
<dd>躺平当咸鱼</dd>
 </dl>
    
</body>
</html>