HTML详解-编程知识

HTML详解

news/2025/2/8 0:01:17/文章来源:https://www.cnblogs.com/you-ni/p/18703516

一. 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开发。

我们这里主要讲一下如何搭建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 标签那样带有一个很大的空隙.
是规范写法。不建议写成

<!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>求职意向:Java开发</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>

文章引用：https://blog.csdn.net/weixin_75172965/article/details/144510085

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/880295.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

【Nginx】Nginx 配置页面请求不走缓存浏览器页面禁用缓存

我是Superman丶巴韭特锁螺丝 2025年02月07日 08:50 陕西前言使用缓存的优点在于减少数据传输，节省网络流量，加快响应速度；减轻服务器压力；提供服务端的高可用性；缺点在于数据的不一致问题；增加成本 Nginx作为Web缓存服务器，介于客户端和应用服务器之间，当用户通过浏…

NLog日志(三)

程序开发日志输出常用逻辑 1.应用启动和关闭添加新配置<rules><logger name="*" minlevel="Debug" writeTo="logconsole" /><logger n…

XXL-CACHE v1.2.0 ｜多级缓存框架

Release Notes1、【增强】多序列化协议支持：针对L2缓存，组件化抽象Serializer，可灵活扩展更多序列化协议； 2、【优化】移除冗余依赖，精简Core体积；XXL- CACHE 快速接入示例代码参考github仓库 /test 目录：https://github.com/xuxueli/xxl-cache/tree/master/xxl-cache-s…

将模型api集成到python中

1.今日成果 1-1从阿里百炼上获取使用API的代码，在本地配置好环境，运行。 1-2ollama上拉取视频理解的模型，却没有上传视频的界面，可以使用python代码加载模型 1-3huggingface上的模型可以通过transformer集成到python运行。 1-4Qwen模型本地部署的环境搭建好了 2.未解决的问…

代码如下package com.loubin;import java.lang.annotation.*; import java.lang.reflect.Constructor; import java.lang.reflect.Field; import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method;public class Main {public static void main(S…