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

HTML零基础入门教学

news 2025/7/10 8:21:35

一. HTML语言

二. HTML结构

三. HTML文件基本结构

四. 准备开发环境

五. 快速生成代码框架

六. HTML常见标签

6.1 注释标签

6.2 标题标签：h1-h6

6.3 段落标签：p

6.4 换行标签：br

6.5 格式化标签

6.6 图片标签：img

6.7 超链接标签：a

6.8 表格标签

6.9 列表标签

6.9.1 无序列表

6.9.2 有序列表

6.9.3 自定义列表

6.10 表单标签

6.10.1 form标签

6.10.2 input标签

6.11 label标签

6.12 select标签

6.13 textarea标签

6.14 无语义标签：div & span

七. 综合示例：展示简历信息

八. 综合示例：填写简历信息

九. Emmet快捷键

十. HTML特殊字符

此篇博客讲解如何零基础入门HTML。干货满满！！！

一. HTML语言

HTML是超文本标记语言。

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

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

二. HTML结构

HTML 代码是由 "标签" 构成的。

形如:

<body>hello</body>

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

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

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

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

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

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

三. HTML文件基本结构

下面我们来看看一个基本的HTML文件结构式什么样的。打开记事本，新建一个文件，写上下面的代码：

<html><head><title>第一个页面</title></head><body>hello world</body>
</html>

然后保存这个文件，文件后缀为.html。

双标签：有开始有结束

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性。
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题。

标签之间的结构关系，构成了一个 DOM 树：

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

所有的标签都是HTML的子标签。head与body是兄弟标签，head和title是父子标签。

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

我们双击运行上面的html后缀文件，就可以打开浏览器如下：

按下F12就可以出现上图右边的代码显示。

四. 准备开发环境

在企业中我们习惯于使用VsCode软件来进行Web开发。还没有安装VsCode的小伙伴可以移步我这篇文章（vscode配置C/C++环境（保姆级详细教程）_vscode配置c++环境-CSDN博客）。

我们这里主要讲一下如何搭建Web开发的配置。我们点击VsCode左侧扩展图标：

在里面搜索安装三个扩展，分别是：

好勒。环境配置完毕，下面可以开始进行第一份正式代码编写了！！！

五. 快速生成代码框架

直接输入！+回车即可生成以下代码：

这里讲一下浏览器解码规则：

假如我们设置编码规则为 UTF-8：

那么打开网页效果为：

是可以正常显示的。而如果编码规则改为 ISO，那么：

这里就变成了乱码。

六. HTML常见标签

6.1 注释标签

注释不会显示在界面上. 目的是提高代码的可读性。

<!-- 我是注释 -->

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 -->
</body>
</html>

6.2 标题标签：h1-h6

有六个，从h1-h6，数字越大，字体越小：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6>
</body>
</html>

6.3 段落标签：p

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 -->css中的1px并不等于设备的1px在css中我们一般使用px作为单位还有一个因素也会引起css中px的变化在移动端浏览器中以及某些桌面浏览器中
</body>
</html>

虽然我们在HTML编写时进行了换行，但是实际在浏览器页面打开换行变成了一个空格：

是并没有换行的。 在body中的换行，实际在页面上显示是一个空格。如果我们想要一段一段的显示，那么需要用到p标签：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的1px并不等于设备的1px</p><p>在css中我们一般使用px作为单位</p><p>还有一个因素也会引起css中px的变化</p><p>在移动端浏览器中以及某些桌面浏览器中</p>
</body>
</html>

注意：

p 标签之间存在一个空隙

当前的 p 标签描述的段落, 前面还没有缩进。 (未来 CSS 会学)

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

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

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

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

6.4 换行标签：br

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

br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
<br/>是规范写法。不建议写成<br>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的1px并不等于<br/>设备的1px</p><p>在css中我们一般使用px作为单位</p><p>还有一个因素也会引起css中px的变化</p><p>在移动端浏览器中以及某些桌面浏览器中</p>
</body>
</html>

换行标签换行之后间隙比段落标签间隙小。

6.5 格式化标签

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

<strong>strong 加粗</strong>
<b>b 加粗</b><em>倾斜</em>
<i>倾斜</i><del>删除线</del>
<s>删除线</s><ins>下划线</ins>
<u>下划线</u>

如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的<strong>1px</strong>并不等于<br/>设备的1px</p><p>在css中<em>我们一般使用</em>px作为单位</p><p>还有一个<del>因素</del>也会引起css中px的变化</p><p>在<ins>移动端浏览器</ins>移动端浏览器中以及某些桌面浏览器中</p>
</body>
</html>

使用 CSS 也可以完成类似的效果. 实际开发中以 CSS 方式为主。

6.6 图片标签：img

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

<img src="rose.jpg">

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中。（ 可以根据绝对/相对路径自行设置 ）

下面演示打开网页图片：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的<strong>1px</strong>并不等于<br/>设备的1px</p><p>在css中<em>我们一般使用</em>px作为单位</p><p>还有一个<del>因素</del>也会引起css中px的变化</p><p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1659552792,3869332496&fm=253&gp=0.jpg">以及某些桌面浏览器中</p>
</body>
</html>

img 标签的其他属性：

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字。alt后面的文案，只有当图片加载失败的时候才会展示。如果图片加载成功，这个文案就不会展示。
title: 提示文本. 鼠标放到图片上, 就会有提示。
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡。
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定。

<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">

属性与属性之间可以用空格或者换行隔开。

首先来看alt：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的<strong>1px</strong>并不等于<br/>设备的1px</p><p>在css中<em>我们一般使用</em>px作为单位</p><p>还有一个<del>因素</del>也会引起css中px的变化</p><p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic." alt="图片加载失败">以及某些桌面浏览器中</p>
</body>
</html>

这个图片的网址是错误的，那么网页上就会出现：

然后title：

我们平常进行搜索的时候。我们将鼠标放在这个bing图片上的时候，会出现一个《返回到必应搜索》的提示，这就是title的效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的<strong>1px</strong>并不等于<br/>设备的1px</p><p>在css中<em>我们一般使用</em>px作为单位</p><p>还有一个<del>因素</del>也会引起css中px的变化</p><p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1659552792,3869332496&fm=253&gp=0.jpg" title="这是一张风景图片">以及某些桌面浏览器中</p>
</body>
</html>

可以看到是出现了效果的。

然后width/height属性：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的<strong>1px</strong>并不等于<br/>设备的1px</p><p>在css中<em>我们一般使用</em>px作为单位</p><p>还有一个<del>因素</del>也会引起css中px的变化</p><p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1659552792,3869332496&fm=253&gp=0.jpg" width="100px" height="100px">以及某些桌面浏览器中</p>
</body>
</html>

对比于之前图片是明显变小的（px是像素的意思）

最后是border属性：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 这是注释 --><p>中的<strong>1px</strong>并不等于<br/>设备的1px</p><p>在css中<em>我们一般使用</em>px作为单位</p><p>还有一个<del>因素</del>也会引起css中px的变化</p><p>在<ins>移动端浏览器</ins>移动端浏览器中<img src="https://ss2.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1659552792,3869332496&fm=253&gp=0.jpg" width="100px" height="100px" border="10px">以及某些桌面浏览器中</p>
</body>
</html>

6.7 超链接标签：a

href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

<a href="http://www.baidu.com">百度</a>

链接的几种形式：

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://news.qq.com/">跳转到腾讯网</a>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://news.qq.com/">跳转到腾讯网</a><a href="1.html">跳转到1.html页面</a>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://news.qq.com/">跳转到腾讯网</a><a href="1.html">跳转到1.html页面</a><a href="#">跳转到当前页面</a>
</body>
</html>

下载链接：href对应的路径是一个文件（可以使用zip文件）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://news.qq.com/">跳转到腾讯网</a><a href="1.html">跳转到1.html页面</a><a href="#">跳转到当前页面</a><a href="D:\Microsoft edge download\citation-network1.zip">下载文件</a>
</body>
</html>

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

例如：

点击这个图片之后，会跳转到bing搜索主页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://news.qq.com/">跳转到腾讯网</a><a href="1.html">跳转到1.html页面</a><a href="#">跳转到当前页面</a><a href="D:\Microsoft edge download\citation-network1.zip">下载文件</a><a href="http://www.sogou.com"><img src="../OIP.jpg" alt=""></a>
</body>
</html>

点击之后：

锚点链接：指我点击页面中的某一个链接(锚点链接)，就会跳到这个页面的指定位置(锚点)。

例如多个网站中的回到顶部按钮就是用锚点做的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p name="top" id="top"></p><a href="https://news.qq.com/">跳转到腾讯网</a><a href="1.html" target="_blank">跳转到1.html页面</a><a href="#">跳转到当前页面</a><a href="D:\Microsoft edge download\citation-network1.zip">下载文件</a><a href="http://www.sogou.com"><img src="../OIP.jpg" alt=""></a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><a href="#top">回到顶部</a>
</body>
</html>

点击之后：

确实是回到了顶部。

上面都是说的href属性，下面来看看target属性有什么用：

我们如果不想要跳转之后仍然在当前页面，我们可以修改target属性，默认是_self，即当前页面跳转，还可以设置为_blank，即重新打开一个页面显示跳转结果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="https://news.qq.com/">跳转到腾讯网</a><a href="1.html" target="_blank">跳转到1.html页面</a><a href="#">跳转到当前页面</a><a href="D:\Microsoft edge download\citation-network1.zip">下载文件</a><a href="http://www.sogou.com"><img src="../OIP.jpg" alt=""></a>
</body>
</html>

可以看到点击之后打开了一个新页面。

如果我们要禁止a标签跳转：

<a href="javascript:void(0);"> 或者 <a href="javascript:;">

6.8 表格标签

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

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

表格标签有一些属性, 可以用于设置大小边框等。但是一般使用 CSS 方式来设置。
这些属性都要放到 table 标签中。

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table border="1px" width="500px" height="200px" cellspacing="0" cellpadding="50" align="center"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr> </thead> <tr><td>姓名</td><td>性别</td><td>年龄</td></tr>   <tr><td>张三</td><td>男</td><td>3</td></tr>    <tr><td>李四</td><td>男</td><td>4</td></tr>    <tr><td>王五</td><td>女</td><td>5</td></tr> </table>
</body>
</html>

合并单元格：

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table border="1px" width="500px" height="200px" cellspacing="0" cellpadding="50" align="center"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr> </thead>   <tr><td>张三</td><td rowspan="2">男</td><td>3</td></tr>    <tr><td>李四</td><!-- <td>男</td> --><td>4</td></tr>    <tr><td colspan="2">王五/女</td><!-- <td>女</td> --><td>5</td></tr> </table>
</body>
</html>

6.9 列表标签

6.9.1 无序列表

无序列表：ul li

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>这是一个无序列表</h1><ul><li>这是内容一</li><li>这是内容一</li><li>这是内容一</li></ul>
</body>
</html>

如果想修改列表前面的图形，可以用type属性：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>这是一个无序列表</h1><ul type="disc"><li>这是内容一</li><li>这是内容二</li><li>这是内容三</li></ul><ul type="square"><li>这是内容一</li><li>这是内容二</li><li>这是内容三</li></ul><ul type="circle"><li>这是内容一</li><li>这是内容二</li><li>这是内容三</li></ul>
</body>
</html>

6.9.2 有序列表

有序列表： ol li

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>这是一个有序列表</h1><ol><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol>
</body>
</html>

同样我们想要修改列表前面的数字样式，可以通过type属性设置：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>这是一个有序列表</h1><ol type="a"><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol><ol type="A"><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol><ol type="i"><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol><ol type="I"><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol><ol type="1"><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol>
</body>
</html>

也可以修改起始的序号值，比如从2开始计数：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>这是一个有序列表</h1><ol type="a" start="2"><li>这是有序列表一</li><li>这是有序列表二</li><li>这是有序列表三</li><li>这是有序列表四</li></ol>
</body>
</html>

6.9.3 自定义列表

自定义列表：dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>这是一个自定义列表</h1><dl><dt> 自定义列表显示内容<dd>自定义列表内容一</dd><dd>自定义列表内容一</dd><dd>自定义列表内容一</dd></dt></dl>
</body>
</html>

注意事项：

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

6.10 表单标签

表单是让用户输入信息的重要途径。 用表单标签来完成与服务器的一次交互。将前端填写的数据提交给服务器。

分成两个部分:

表单域: 包含表单元素的区域. 重点是 form 标签。
表单控件: 输入框, 提交按钮等. 重点是 input 标签。

6.10.1 form标签

<form action="test.html">... [form 的内容]</form>

描述了要把数据按照什么方式, 提交到哪个页面中。

关于 form 需要结合服务器 & 网络编程来进一步理解. 后面再详细研究。

6.10.2 input标签

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

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等。
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一。
value: input 中的默认值。
checked: 默认被选中。(用于单选按钮和多选按钮)
maxlength: 设定最大长度。

文本框：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">姓名<input type="text"></form>
</body>
</html>

密码框：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">姓名<input type="text"><br>密码<input type="password"></form>
</body>
</html>

单选框：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">姓名<input type="text"><br>密码<input type="password"><br>性别<input type="radio" name="gender">男<input type="radio" name="gender" checked="checked">女</form>
</body>
</html>

注意: 单选框之间必须具备相同的 name 属性, 才能实现多选一效果。

checked表示默认性别为女。

如果我们两个都加上checked呢？

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">姓名<input type="text"><br>密码<input type="password"><br>性别<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender" checked="checked">女</form>
</body>
</html>

这个就根据实际浏览器自己去实现甄别。

复选框：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">姓名<input type="text"><br>密码<input type="password"><br>性别<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender" checked="checked">女<br>爱好<input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">玩游戏</form>
</body>
</html>

普通按钮：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="">姓名<input type="text"><br>密码<input type="password"><br>性别<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender" checked="checked">女<br>爱好<input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">玩游戏<br><input type="button" value="这是一个普通按钮" onclick="alert('hello')"></form>
</body>
</html>

提交按钮：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="https://blog.csdn.net/weixin_75172965?type=blog">课程：<input type="text" name="course"><input type="submit"></form>
</body>
</html>

提交之后，就会跳转到博客主页：

清空按钮：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="https://blog.csdn.net/weixin_75172965?type=blog">课程：<input type="text" name="course"><input type="submit"><input type="reset"></form>
</body>
</html>

点击重置之后，就会清空输入内容：

选择文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="https://blog.csdn.net/weixin_75172965?type=blog">课程：<input type="text" name="course"><input type="submit"><input type="reset"><input type="file"></form>
</body>
</html>

点击选择文件之后，会弹出文件管理器页面选择文件：

任意点击一个文件之后，会显示：

6.11 label标签

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

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应。(此时点击才是有用的)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="radio" name="sex">男<input type="radio" name="sex">女
</body>
</html>

但是这样是不能通过点击汉字“男”或者“女”来选择的，所以用上label标签：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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>

6.12 select标签

下拉菜单选择。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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"><select name="" id=""><option value="">--请选择年份--</option><option value="" selected="selected">--2000--</option><option value="">--2001--</option><option value="">--2002--</option><option value="">--2003--</option></select>
</body>
</html>

selected="selected"表示默认选择的。

6.13 textarea标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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"><select name="" id=""><option value="">--请选择年份--</option><option value="" selected="selected">--2000--</option><option value="">--2001--</option><option value="">--2002--</option><option value="">--2003--</option></select><textarea name="" id="" cols="20" rows="10"></textarea>
</body>
</html>

超过10行之后会出现滚轮（红色方框内）。

6.14 无语义标签：div & span

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

div标签：division的缩写，含义是分割。

span标签：含义是跨度。

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

div是独占一行的，是一个大盒子。
span不独占一行，是一个小盒子。

div里面可以嵌套div，span以及之前的标题，段落标签等等有具体用途的标签。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div><div><span>吃饭</span><span>睡觉</span><span>打游戏</span><span>看书</span></div><div><div>吃饭</div><div>睡觉</div><div>打游戏</div><div>看书</div></div></div>
</body>
</html>

七. 综合示例：展示简历信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>小灵蛇</h1><div><h2>基本信息</h2><img src="https://c-ssl.duitang.com/uploads/item/201910/05/20191005000222_tmgxw.jpg" alt="" width="200" height="200"><span><p>求职意向:C++开发</p></span><span><p>联系电话:xxx-xxxx-xxxx</p></span><span><p>邮箱:xxx@163.com</p></span><span><p><a href="https://blog.csdn.net/weixin_75172965?type=blog">我的博客</a></p></span><span><p><a href="https://gitee.com/">我的Gitee</a></p></span></div><div><h2>教育背景</h2><ol><li>xxxx-xxxx 小学</li><li>xxxx-xxxx 初中</li><li>xxxx-xxxx 高中</li><li>xxxx-xxxx 大学</li></ol></div><div><h2>专业技能</h2><ul><li>掌握C++编程</li><li>掌握Linux平台编程</li><li>掌握前端相关技能：html，css，JavaScript</li></ul></div><div><h2>个人项目</h2><ol><h3><li>留言墙</li></h3><p>开发时间：2024年4月~2024年5月</p><p>功能介绍：</p><ul><li>支持留言发布</li><li>支持匿名留言</li></ul></ol><ol><h3><li>学习小助手</li></h3><p>开发时间：2024年5月~2024年6月</p><p>功能介绍：</p><ul><li>错词检测</li><li>支持同学探讨</li></ul></ol></div><div><h2>个人评价</h2><p>热爱生活，热爱编程</p></div>
</body>
</html>

八. 综合示例：填写简历信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table><thead><h3>请填写简历信息</h3></thead><tr><td><label for="name">姓名</label></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" alt="" width="20" height="20">男</label><input type="radio" name="sex" id="female"><label for="female"><img src="../female.png" alt="" width="20" height="20">女</label></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></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><option value="">--7--</option><option value="">--8--</option><option value="">--9--</option><option value="">--10--</option><option value="">--11--</option><option value="">--12--</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="">--6--</option><option value="">--7--</option><option value="">--8--</option><option value="">--9--</option><option value="">--10--</option><option value="">--11--</option><option value="">--12--</option><option value="">--13--</option><option value="">--14--</option><option value="">--15--</option><option value="">--16--</option><option value="">--17--</option><option value="">--18--</option><option value="">--19--</option><option value="">--20--</option><option value="">--21--</option><option value="">--22--</option><option value="">--23--</option><option value="">--24--</option><option value="">--25--</option><option value="">--26--</option><option value="">--27--</option><option value="">--28--</option><option value="">--29--</option><option value="">--30--</option><option value="">--31--</option></select></td></tr><tr><td><label for="school">就读学校</label></td><td><input type="text" id="school"></td></tr><tr><td>应聘岗位</td><td><input type="checkbox" name="" id="fe"><label for="fe">前端开发</label><input type="checkbox" name="" id="server"><label for="server">后端开发</label><input type="checkbox" name="" id="test"><label for="test">测试开发</label><input type="checkbox" name="" id="yunwei"><label for="yunwei">运维开发</label></td></tr><tr><td>掌握的技能</td><td><textarea name="" id="" cols="30" rows="20"></textarea></td></tr><tr><td>项目经历</td><td><textarea name="" id="" cols="30" rows="20"></textarea></td></tr><tr><td></td><td><input type="checkbox" id="read"><label for="read">我已仔细阅读公司的招聘要求</label></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"><title>Document</title>
</head>
<body><p>这里有四个空格    开始编写页面</p><p>这里有四个空格&nbsp;&nbsp;&nbsp;&nbsp;开始编写页面</p><p><>&</p><p>&lt;&gt;&amp;</p>
</body>
</html>

总结：

好了，到这里今天的知识就讲完了，大家有错误一点要在评论指出，我怕我一人搁这瞎bb，没人告诉我错误就寄了。

祝大家越来越好，不用关注我（疯狂暗示）

HTML零基础入门教学

目录一. HTML语言二. HTML结构三. HTML文件基本结构四. 准备开发环境五. 快速生成代码框架六. HTML常见标签 6.1 注释标签 6.2 标题标签：h1-h6 6.3 段落标签：p 6.4 换行标签：br 6.5 格式化标签 6.6 图片标签&a…...

编程日记 2024/12/17 6:28:57

vue3 父组件调用子组件 el-drawer 抽屉

之前 Vue3 只停留在理论，现在项目重构，刚好可以系统的实战一下，下面是封装了一个抽屉表单组件，直接在父组件中通过调用子组件的方法打开抽屉： 父组件： <template><div id"app"><…...

编程日记 2024/12/17 6:27:55

Java中常用算法之选择排序算法

一.选择排序（Selection Sort）是一种简单直观的排序算法。它的工作原理是每次从未排序部分选择最小（或最大）的元素，并将其放到已排序部分的末尾。以下是用Java实现选择排序的代码及其详细讲解。二.选择排序代码 publ…...

编程日记 2024/12/17 6:26:54

UNIX简史

从1991年Linux出现至今，由于众多IT巨头以及技术社区的推动，Linux已经成为非常成熟、可用于各种关键领域的操作系统，适当了解其发展历史，对于理顺其技术流派、从而更好地学习和使用Linux具有重要意义。由于其基于UNIX系统二十多年的…...

编程日记 2024/12/17 6:25:53

React和Vue中暴露子组件的属性和方法给父组件用，并且控制子组件暴露的颗粒度的做法

React 在 React 中，forwardRef 是一种高级技术，它允许你将 ref 从父组件传递到子组件，从而直接访问子组件的 DOM 节点或公开的方法。这对于需要操作子组件内部状态或 DOM 的场景非常有用。为了使子组件能够暴露其属性和方法给父组件&#xf…...

编程日记 2024/12/17 6:23:49

uniapp 常用的指令语句

uniapp 是一个使用 Vue.js 开发的跨平台应用框架，因此，它继承了 Vue.js 的大部分指令。以下是一些在 uniapp 中常用的 Vue 指令语句及其用途： v-if / v-else-if / v-else 条件渲染。v-if 有条件地渲染元素，v-else-if 和 v-else 用…...

编程日记 2024/12/17 6:22:48

python学opencv|读取图像（十四）BGR图像和HSV图像通道拆分

【1】引言前序已经对BGR图像和HSV图像的转换进行了基本讨论，相关文章链接为： python学opencv|读取图像（十二）BGR图像转HSV图像-CSDN博客 python学opencv|读取图像（十三）BGR图像和HSV图像互相转换深入-C…...

编程日记 2024/12/17 6:21:45

C# 结构体和类

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、类（Class）二、结构体（Struct）示例代码（定义类和结构体）类的继承代码示例&#xff08…...

编程日记 2024/12/17 6:20:45

D9741是一块脉宽调制方三用于也收路像机和笔记本电的等设备上的直流转换器。在便携式的仪器设备上。

概述： D9741是一块脉宽调制方三用于也收路像机和笔记本电的等设备上的直流转换器。在便携式的仪器设备上。主要特点： ● 高精度基准电路 ● 定时闩锁、短路保护电路 ● 低电压输入时误操作保护电路 ● 输出基准电压(2.5V) ● 超过工作范围能进行自动校…...

编程日记 2024/12/17 6:18:41

题目 1738: 排序

题目 1738: 排序时间限制: 2s 内存限制: 96MB 提交: 14351 解决: 3477 题目描述对输入的n个数进行排序并输出。输入格式输入的第一行包括一个整数n(1<n<100)。接下来的一行包括n个整数。输出格式可能有多组测试数据，对于每组数据，将排序后…...

编程日记 2024/12/17 6:16:39

爬虫逆向学习(十四)：分享一下某数通用破解服务开发经验

阅前须知这篇博客不是教大家怎么实现的，而且告知大家有这个东西，或者说一种趋势，借此分享自己大致的实现经验。具体的实现我也不好整理，毕竟是在别人的基础上缝缝补补。前言使用补环境方式破解过某数的同学都知道&#xff0…...

编程日记 2024/12/17 6:14:36

《Vue进阶教程》第十一课：响应式系统介绍

1 什么是响应式当数据改变时, 引用数据的函数会自动重新执行 2 手动完成响应过程首先, 明确一个概念: 响应式是一个过程, 这个过程存在两个参与者: 一方触发, 另一方响应比如说, 我们家小胖有时候不乖, 我会打他, 他会哭. 这里我就是触发者, 小胖就是响应者同样, 所谓…...

编程日记 2024/12/17 6:13:35

rpc设计的再次思考20251215(以xdb为核心构建游戏框架)

1.服务提供者注册的方式 // 表明这是一个服务提供者，ServerType 和 ServerId从application.properties中读取 // 而且只有当当前服务是Game时，才生效。或者条件注解??? RpcProvider(typeServerType.Game) public class GameProvider{MsgReceiver…...

编程日记 2024/12/17 6:12:33

pydub AudioSegment增加音频文件音量并保存- python 实现

DataBall 助力快速掌握数据集的信息和使用方式，会员享有百种数据集，持续增加中。需要更多数据资源和技术解决方案，知识星球： “DataBall - X 数据球(free)” -------------------------------------------------------------…...

编程日记 2024/12/17 6:11:33

IT 新突破！远程控制电脑技术造就工作与学习新方向！

远程控制电脑技术的历史可追溯到计算机网络的早期时代。最初，通过电话线和调制解调器的组合，实现了远程访问，这是远程控制电脑技术的雏形。随着互联网技术的飞速发展，远程控制电脑技术也日趋完善，并在多个领域得到了广…...

编程日记 2024/12/17 6:10:32

LabVIEW起落架震台检测

在现代飞机制造与维护过程中，起落架的性能测试是保障飞机安全的重要环节。通过LabVIEW开发的起落架小落震台检测系统，通过模拟飞机着陆过程，准确捕捉起落架在着陆时承受的各种动力学特性和应力响应，有效提升起落架设计的精度与可靠…...

编程日记 2024/12/17 6:08:29

Day24 C++ 接口（抽象类）

C 接口（抽象类） 接口描述了类的行为和功能，而不需要完成类的特定实现。 C 接口是使用抽象类来实现的，抽象类与数据抽象互不混淆，数据抽象是一个把实现细节与相关的数据分离开的概念。如果类中至少有一个函数被声明…...

编程日记 2024/12/17 6:07:28

UE5 关于画质、机能与开发成本的思考

1、并不省时间 UE5等工具优点是可以通过一些工具与资源快速获得较好的画面，节约一些时间， 但缺点也很多， 一个是各种精度的素材之间的协调问题，参差不齐，统一升级到高精度会产生较大的成本， 一个是资源…...

编程日记 2024/12/17 6:06:27

IOS学习路线图

‌iOS是由苹果公司开发的移动操作系统。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统，最初是设计给iPhone使用的，后来陆续套用到iPod touch、iPad上。iOS与苹果的macOS操作系统一样，属于类Unix的商业操作系统。原本这个系统名为…...

编程日记 2024/12/17 6:05:26

HICE-day6

二层交换交换基础所谓的二层交换机指的是针对数据的二层头部（以太网帧头）中的MAC地址进行寻址并转发数据的交换设备。二层交换机不具备路由功能，它工作在OSI七层模型的第二层，因此被称为二层交换机。上图中，PC1、…...

编程日记 2024/12/17 6:03:22

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/7/9 7:21:59

【2025年】解决Burpsuite抓不到https包的问题

环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/7/9 7:13:40

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系坐标体系-介绍坐标原点位于左上角，以像素为单位。在Java坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素;第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。坐标体系-像素 …...

编程新知 2025/7/9 8:30:10

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/6/24 5:44:40