HTML基础

HTML 的基本结构及常用的HTML标签。

南风与鱼

2686人浏览 · 2024-03-13 19:33:06

南风与鱼 · 2024-03-13 19:33:06 发布

一、HTML结构

1、什么是HTML页面

就是HTML超文本标记语言：

超文本：文本、声音、图片、视频、表格、链接

标记：由许许多多的标签组成

HTML页面是运行到浏览器上面的

2、认识HTML标签

🌻HTML代码是由“标签”构成的。

形如：

<body>hello</body>

标签名 (body) 放到 < > 中。

大部分标签成对出现，<body>为开始标签，</body>为结束标签。

少数标签只有开始标签，称为“单标签”。

开始标签和结束标签之间，写的是标签的内容(hello)。

开始标签中可能会带有 "属性"，id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)。

<body id="myId">hello</body>

3、HTML文件基本结构

html 标签是整个 html 文件的根标签（最顶层标签）。

head 标签中写页面的属性。

body 标签中写的是页面显示的内容。

title 标签中写的是页面的标题。

4、标签层次结构

其中:

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)。

title 是 head 的子标签，head 是 title 的父标签。

head 和 body 之间是兄弟关系。

每一个标签相当于是一个对象，程序员可以通过代码拿到这些对象，拿到之后就可以对这些对象进行增删查改。

可以打开任何一个网页查看页面的结构，F12 或者右键审查元素，开启开发者工具，切换到 Elements 标签，就可以看到页面结构细节。

标签之间的结构关系, 构成了一个 DOM 树。

DOM 是 Document Object Mode (文档对象模型) 的缩写。

5、vscode开发工具搭建

在刚开始写页面代码的时候我们使用的是记事本，但这样效率太低。除了用记事本写，我们还可以用idea、vscode等工具来写代码，而idea有商业版和社区版，但是社区版的代码高亮、代码补全、代码缩进等功能容易出现问题。所以这里我们选择vscode，它是企业开发前端非常常用的一个开发工具。

5.1vscode安装

🌴 打开浏览器直接搜vscode，然后进入官网路径：

🌴 进去之后点击Dowmload：

🌴然后按自己的电脑型号进行选择，因为博主使用的是Windows操作系统，所以点击第一个即可：

🌴 然后开始下载，等下载完成后，我们直接安装即可。

5.2插件安装

打开vscode软件，搜索下面插件，按照下图步骤依次安装即可。

5.2.1 Auto Rename Tag

Auto Rename Tag插件是一款在VS Code中方便重命名HTML/XML标签的工具。当我们修改HTML或XML文件中的一个标签名称时，插件会自动找到对应的结束标签，并将其名称同步进行修改。这样可以减少手动修改结束标签名称的麻烦，提高开发效率。

5.2.2 Live Server

Live Server是一个在VS Code中运行的插件，它提供了一个本地开发服务器，可以实时监测文件的变动并自动刷新网页。它的作用是方便开发人员在本地开发环境中实时预览网页的变化，加快开发效率。与传统的开发方式相比，Live Server省去了手动刷新网页的步骤，使开发过程更加高效和便捷。

5.2.3 view-in-browser

View-in-browser是一个在Visual Studio Code中打开当前文件或文件夹在浏览器中预览的插件。它可以在Chrome、Firefox、Edge等浏览器中打开HTML、CSS、JavaScript等文件，并实时更新预览结果。使用该插件可以方便地在浏览器中查看和调试网页，而无需切换到浏览器窗口。此外，View-in-browser还支持在浏览器中预览markdown文件和其他文本文件。插件提供了一些配置选项，可以自定义浏览器的路径和使用的命令行选项，以满足不同的需求。

6、快速生成代码框架

🌴在 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架。

细节解释：

<!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" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放 (这个属性对于移动端开发更重要一些)。

二、HTML常见标签

1、注释标签

注释对程序员来说非常重要，因为有时我们写的代码可能是让别人看的，而别人的代码可能会被我们看到，这时候程序有无注释就显得非常重要了。需要注意的是注释不会显示在界面上，它存在的目的是提高代码的可读性。

ctrl + / 快捷键可以快速进行注释/取消注释。

注释的原则：

要和代码逻辑一致。

尽量使用中文。

因为用户也能看到注释，所以不要传递负能量。

2、标题标签：h1 - h6

🌻有六个, 从 h1 - h6. 数字越大, 则字体越小。

3、段落标签

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落，例如以下文本：

“人间灯火万点如星河。慷慨去也，浩然归也。为君倒满一杯酒，日月在君杯中游。”

“从童年起，我便独自一人，照顾着历代的星辰。但遇见你以后，念念落地生根，未来欢愉在等。”

“山间风，水边风，御剑远游脚下风，圣贤书中翻书风，风吹浮萍有相逢。”

“天上月，人间月，负笈求学肩上月，凭栏高处眼中月，月落山河有圆缺。”

“遇事不决，可问春风，春风不语，既随本心。”

“少年高高提起的双手之间，有缕缕春风欢快萦绕双袖，如一尾尾青色蛟龙在云海游曳。”

“那年冬天，女子终究还是没能熬过年关，没能等到儿子贴上春联和门神，死了。她闭眼之前，小镇刚好下起了雪，她让儿子出去看雪。”

🌾展示结果：

p 标签表示一个段落

<p>这是一个段落</p>

通过 p 标签改进上述代码, 每个段落放到 p 标签中。

🌾展示结果：

注意:

p 标签之间存在一个空隙。

当前的 p 标签描述的段落, 前面还没有缩进。

自动根据浏览器宽度来决定排版。

html 内容首尾处的换行, 空格均无效。

在 html 中文字之间输入的多个空格只相当于一个空格。

html 中直接输入换行不会真的换行, 而是相当于一个空格。

4、换行标签：br

br 是 break 的缩写, 表示换行。

注意：

br 是一个单标签(不需要结束标签)。

br 标签不像 p 标签那样带有一个很大的空隙。

<br/> 是规范写法，不建议写成 <br>。

🌾展示结果：

5、格式化标签

加粗: strong 标签和 b 标签

倾斜: em 标签和 i 标签

删除线: del 标签和 s 标签

下划线: ins 标签和 u 标签

上述每一种作用都有两种标签，但这两者在语义上有一些区别。前者用于强调重要的文本内容，表示内容的重要性或紧迫性。后者没有强调文本内容的语义含义，它主要用于样式目的。

🌾展示结果：

6、图片标签：img

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

<img src="rose.jpg">
此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中。

img 标签的其他属性：

alt: 替换文本。当文本不能正确显示的时候, 会显示一个替换的文字。

title: 提示文本。鼠标放到图片上, 就会有提示。

width/height: 控制宽度高度。高度和宽度一般改一个就行, 另外一个会等比例缩放，否则就会图片失衡。

border: 边框。参数是宽度的像素，但是一般使用 CSS 来设定。
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px"
border="5px">
注意:

属性可以有多个, 不能写到标签之前。

属性之间用空格分割, 可以是多个空格, 也可以是换行。

属性之间不分先后顺序。

属性使用 "键值对" 的格式来表示。

🌲关于目录结构：

对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好。

(1) 相对路径: 以 html 所在位置为基准, 找到图片的位置。

同级路径: 直接写文件名即可 (或者 ./)
下一级路径: image/xxx.jpg
上一级路径: ../image/xxx.jpg

(2) 绝对路径: 一个完整的磁盘路径, 或者网络路径。

磁盘路径 D:\rose.jpg
网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

🍂代码示例：

1) 使用相对路径1: 直接写文件名

2) 使用相对路径2: 创建一个 img 目录和 html 同级, 并放入一个 jianlai.png

3) 使用相对路径3: 将图片放在和文件夹同级的地方, 然后访问上级目录的 jianlai.png

4) 使用绝对路径1: 最好使用 / , 不要使用 \

🌾展示结果：

5) 使用绝对路径2: 使用网络路径

🌾展示结果：

7、超链接标签：a

7.1 href

href必须具备, 表示点击后会跳转到哪个页面。
<a href="http://www.baidu.com">百度</a>

链接的几种形式:

外部链接: href 引用其他网站的地址

内部链接: 网站内部页面之间的链接，写相对路径即可。

在一个目录中, 先创建一个 html01，再创建一个 html02

空链接: 使用 # 在 href 中占位。

下载链接: href 对应的路径是一个文件(可以使用 zip 文件) 。

网页元素链接: 可以给图片等任何元素添加链接。

7.2 target

target打开方式默认是 _self，如果是 _blank 则用新的标签页打开。

如果target属性值为_self，默认在当前页面打开，会把当前的页面覆盖掉；如果target属性值为_blank，则会打开一个新的页面。

8、表格标签

8.1 基本使用

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格、会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)，它里边的内容居中加粗展示
tbody: 表格的主体区域

table 包含 tr , tr 包含 td 或者 th.

用上述标签制作一个简易的表格：

🌵代码示例：

<!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>
    <table>
        <tr>
           <td>姓名</td> 
           <td>性别</td> 
           <td>年龄</td> 
        </tr>
        <tr>
           <td>陈平安</td> 
           <td>男</td> 
           <td>13</td> 
        </tr>
        <tr>
           <td>齐静春</td> 
           <td>男</td> 
           <td>32</td> 
        </tr>
        <tr>
           <td>阿良</td> 
           <td>男</td> 
           <td>28</td> 
        </tr>
    </table>
</body>
</html>

🌴效果展示：

通过最终页面显示我们发现这个表格好像没有达到我们想要的预期效果，这是因为表格中还有一些属性我们没有设置。

表格标签有一些属性，可以用于设置大小边框等，但是一般使用 CSS 方式来设置。

这些属性都要放到 table 标签中：

align 是表格相对于周围元素的对齐方式。align="center" (不是内部元素的对齐方式)。
border 表示边框。1 表示有边框(数字越大, 边框越粗)，"" 表示没边框。
cellpadding: 内容距离边框的距离，默认 1 像素。
cellspacing: 单元格之间的距离，默认为 2 像素。
width / height: 设置尺寸。

注意，这几个属性，vscode 都提示不出来。

🌵改进后代码示例：

<!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>
    <table border="1" width="500" height="100" cellspacing="0" cellpadding="50" align="center">
        <tr>
           <td>姓名</td> 
           <td>性别</td> 
           <td>年龄</td> 
        </tr>
        <tr>
           <td>陈平安</td> 
           <td>男</td> 
           <td>13</td> 
        </tr>
        <tr>
           <td>齐静春</td> 
           <td>男</td> 
           <td>32</td> 
        </tr>
        <tr>
           <td>阿良</td> 
           <td>男</td> 
           <td>28</td> 
        </tr>
    </table>
</body>
</html>

🌴改进后效果展示：

8.2 合并单元格

跨行合并: rowspan="n"
跨列合并: colspan="n"

步骤：

先确定跨行还是跨列
找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
删除的多余的单元格

我们将陈平安和齐静春的性别合并到一起，将阿良的姓名、性别、年龄整体合并到一起。

🌵代码示例：

<!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>
    <table border="1" width="500" height="100" cellspacing="0" cellpadding="50" align="center">
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </thead>
        <!-- <tr>
           <td>姓名</td> 
           <td>性别</td> 
           <td>年龄</td> 
        </tr> -->
        <tbody>
            <tr>
                <td>陈平安</td> 
                <td rowspan="2">男</td> 
                <td>13</td> 
             </tr>
             <tr>
                <td>齐静春</td> 
                <!-- <td>男</td>  -->
                <td>32</td> 
             </tr>
             <tr>
                <td colspan="3">阿良/男/28</td> 
                <!-- <td>男</td> 
                <td>28</td>  -->
             </tr>
        </tbody>
    </table>
</body>
</html>

🌵效果展示：

9、列表标签

主要是用来布局的，整齐好看：

无序列表[重要] ul li
有序列表[用的不多] ol li
自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的。

注意：

元素之间是并列关系
ul/ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 dd
li 中可以放其他标签
列表带有自己的样式, 可以使用 CSS 来修改 (例如前面的小圆点都会去掉)

快捷键：ul>li*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>
    <h1>无序列表</h1>
    <!-- disc(默认实心圆)
    square(方块)
    circle(空心圆) -->
    <ul type="circle">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
    </ul>
</body>
</html>

🌵有序列表：

<!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>
    <!-- a 表示小写英文字母编号
    A 表示大写英文字母编号
    i 表示小写罗马数字编号
    I 表示大写罗马数字编号
    1 表示数字编号（默认） -->
    <ol type="I" start="3">
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
</body>
</html>

🌵自定义列表：

<!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>
    <dl>
        <dt>自定义列表标题
            <dd>自定义列表内容1</dd>
            <dd>自定义列表内容2</dd>
            <dd>自定义列表内容3</dd>
        </dt>
    </dl>
</body>
</html>

10、表单标签

表单是让用户输入信息的重要途径，用户可以通过表单标签来完成服务器的一次交互。

表单标签分成两个部分:

表单域: 包含表单元素的区域，重点是 form 标签。

表单控件: 输入框, 提交按钮等，重点是 input 标签。

10.1 form 标签

<form action="test.html">
   ... [form 的内容]
</form>
描述了要把数据按照什么方式，提交到哪个页面中。

10.2 input 标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框

type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等。

name: 给 input 起了个名字，尤其是对于单选按钮，具有相同的 name 才能多选一。

value: input 中的默认值。

checked: 默认被选中(用于单选按钮和多选按钮)。

maxlength: 设定最大长度。

1) 文本框

<input type="text">

<!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>
    <form action="">
        姓名<input type="text">
    </form>
</body>
</html>

2) 密码框

<input type="password">

<!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>
    <form action="">
        姓名<input type="text">
        <br>
        密码<input type="password">
    </form>
</body>
</html>

3) 单选框

性别: 
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果。

<!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>
    <form action="">
        姓名<input type="text">
        <br>
        密码<input type="password">
        <br>
        性别<input type="radio" name="sex">男
        <input type="radio" name="sex" chacked="chacked">女
    </form>
</body>
</html>

4) 复选框

爱好:
<input type="checkbox"> 阅读 <input type="checkbox"> 跑步 <input type="checkbox">
打游戏

<!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>
    <form action="">
        姓名<input type="text">
        <br>
        密码<input type="password">
        <br>
        性别<input type="radio" name="sex">男
        <input type="radio" name="sex" chacked="chacked">女
        <br>
        爱好
        <input type="checkbox">阅读
        <input type="checkbox">跑步
        <input type="checkbox">打游戏
    </form>
</body>
</html>

5) 普通按钮

<input type="button" value="我是个按钮">
当前点击了没有反应，是因为需要搭配 JS 使用。
<input type="button" value="我是个按钮" onclick="alert('hello')">

<!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>
    <form action="">
        姓名<input type="text">
        <br>
        密码<input type="password">
        <br>
        性别<input type="radio" name="sex">男
        <input type="radio" name="sex" chacked="chacked">女
        <br>
        爱好
        <input type="checkbox">阅读
        <input type="checkbox">跑步
        <input type="checkbox">打游戏
        <br>
        <input type="button" value="我是个按钮" onclick="alert('Hello')">
    </form> 
</body>
</html>

6) 提交按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
提交按钮必须放到 form 标签内，点击后就会尝试给服务器发送。

<!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>
    <form action="">
        课程：<input type="text" name="course">
        <input type="submit">
    </form>
</body>
</html>

7) 清空按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>
清空按钮必须放在 form 中，点击后会将 form 内所有的用户输入内容重置。

<!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>
    <form action="">
        课程：<input type="text" name="course">
        <input type="submit">
        <input type="reset" value="清空">
    </form>
</body>
</html>

8) 选择文件

<input type="file">
点击选择文件, 会弹出对话框, 选择文件。

<!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>
    <form action="">
        课程：<input type="text" name="course">
        <input type="submit">
        <input type="reset" value="清空">
        <input type="file">
    </form>
</body>
</html>

11、label 标签

搭配 input 使用，点击 label 也能选中对应的单选/复选框，能够提升用户体验感。

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应(此时点击才是有用的)。
<label for="male">男</label> <input id="male" type="radio" name="sex">

<!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>
    <label for="male">男</label>
    <input type="radio" name="sex" id="male">
    <label for="female">女</label>
    <input type="radio" name="sex" id="female">
</body>
</html>

12、select 标签

下拉菜单

option 中定义 selected="selected" 表示默认选中。

注意! 可以给第一个选项, 作为默认选项。
<select>
    <option>北京</option>
    <option selected="selected">上海</option>
</select>

<!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>
    <select>
        <option>--请选择年份--</option>
        <option selected="selected">--公元1年--</option>
        <option>--公元2年--</option>
        <option>--公元3年--</option>
        <option>--公元4年--</option>
        <option>--公元5年--</option>
    </select>
</body>
</html>

13、textarea 标签

<textarea rows="3" cols="50">
    
</textarea>
文本域中的内容, 就是默认内容, 注意, 空格也会有影响。

rows 和 cols 也都不会直接使用, 都是用 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>
    <textarea cols="30" rows="5"></textarea>
</body>
</html>

14、无语义标签: div & span

无语义就是没有固定的用途，即拿着这个标签啥都可以干。

div 标签, 是 division 的缩写, 含义是分割

span 标签, 含义是跨度

就是两个盒子，用于网页布局：

div 是独占一行的, 是一个大盒子。

span 不独占一行, 是一个小盒子。

<!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>
    <div>
        <div>
            <span>运动</span>
            <span>阅读</span>
            <span>听歌</span>
        </div>
        <div>运动</div>
        <div>阅读</div>
        <div>听歌</div>
    </div>
</body>
</html>

三、综合案例

🌴展示简历信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
</head>
<body>
    <h1>陈平安</h1>
    <div>
        <h2>基本信息</h2>
        <img src="img/pingan.png" width="280" height="300">

        <span><p>求职意向:C++开发</p></span>
        <span><p>联系方式:15719399317</p></span>
        <span><p>个人邮箱:2788587039@qq.com</p></span>
        <span><p><a href="https://gitee.com/orange-sea-c">我的Gitee</a></p></span>
        <span><p><a href="https://blog.csdn.net/weixin_65931202?type=blog">我的博客</a></p></span>
    </div>
    <div>
        <h2>教育背景</h2>
        <ol>
            <li>6 - 14岁 骊珠洞天 木胎境</li>
            <li>15 - 20岁 藕花福地 英魂境</li>
            <li>21 - 24岁 落魄山 金刚境</li>
            <li>25 - 33岁 剑气长城 山巅境</li>
            <li>34 - 42岁 问剑正阳山 归真</li>
        </ol>
    </div>
    <div>
        <h2>专业技能</h2>
        <ul>
            <li>剑仙斩蛟龙</li>
            <li>编草鞋</li>
            <li>剑气护体</li>
        </ul>
    </div>
    <div>
        <h2>个人项目</h2>
        <ol>
            <li>
                <h3>留言墙</h3>
                <p>开发时间:公元33年~公元99年</p>
                <p>功能介绍</p>
                <ul>
                    <li>支持留言发布</li>
                    <li>支持匿名留言</li>
                </ul>
            </li>
            <li>
                <h3>学习小助手</h3>
                <p>开发时间:公元99年~公元111年</p>
                <p>功能介绍</p>
                <ul>
                    <li>支持错题检测</li>
                    <li>支持同学探讨</li>
                </ul>
            </li>
        </ol>
    </div>
    <div>
        <h2>个人评价</h2>
        <p>言念君子 温其如玉</p>
    </div>
</body>
</html>

🌴填写简历信息：

使用表格进行整体布局

使用各种 input 标签 + textarea 实现页面中的输入控件

input 标签搭配合适的 label 提升用户体验

针对下拉框这种选项较多的, 使用 Emmet 快捷键提高输入效率

图标图片可以去找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历信息表</title>
</head>
<body>
    <table>
        <thead><h3>请填写简历信息</h3></thead>
        <tr>
            <td>
                <lable for="name">姓名</lable>
            </td>
            <td>
                <input type="text" name="" id="name">
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id="male" checked="checked">
                <label for="male">
                    <img src="male.png" width="20" height="20">男
                </label>
                <input type="radio" name="sex" id="female">
                <lable for="female">
                    <img src="female.png" width="20" height="20">女
                </lable>
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>
                <select name="" id="">
                    <option value="">--请选择年份--</option>
                    <option value="">2000</option>
                    <option value="">2001</option>
                    <option value="">2002</option>
                    <option value="">2003</option>
                    <option value="">2004</option>
                    <option value="">2005</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择月份--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择日期--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <lable for="school">就读学校</lable>
            </td>
            <td>
                <input type="text" id="school">
            </td>
        </tr>
        <tr>
            <td>应聘岗位</td>
            <td>
                <input type="checkbox" name="" id="fe">
                <lable for="fe">前端开发</lable>
                <input type="checkbox" name="" id="server">
                <lable for="server">后端开发</lable>
                <input type="checkbox" name="" id="test">
                <lable for="test">测试开发</lable>
                <input type="checkbox" name="" id="yunwei">
                <lable for="yunwei">运维开发</lable>
            </td>
        </tr>
        <tr>
            <td>掌握的技能</td>
            <td>
                <textarea cols="30" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td>项目经历</td>
            <td>
                <textarea cols="30" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" id="read">
                <lable for="read">我已仔细阅读公司的招聘要求</lable>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">查看我的状态</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><h3>请应聘者确认</h3></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <ul>
                    <li>以上信息是有效的</li>
                    <li>可以尽早来公司实习</li>
                    <li>可以接受加班</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

四、Emmet 快捷键

快速输入标签

input[tab]

快速输入多个标签

div*3[tab]

标签带id

div#sex[tab]

标签带类名

div.sex[tab]

标签带子元素

ul>li*3[tab]

标签带兄弟元素

span+span

标签带内容

div{hello}

标签带内容(带编号)

div{$.hello}

五、HTML 特殊字符

有些特殊的字符在 html 文件中是不能直接表示的，需要借助以下符号来显示：

🌴空格： 
🌴小于号：<
🌴大于号：>
🌴按位与：&

<!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>这里是五个空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用来显示页面</p>
    <p>&lt;</p>
    <p>&gt;</p>
    <p>&amp;</p>
</body>
</html>