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

一篇文章学会HTML

news 2025/6/18 21:57:44

页面结构

网页基本标签

图像标签

超链接标签

文本链接

图像链接

锚链接

功能链接

列表

有序列表

无序列表

自定义列表

表格

跨列/跨行

表头

媒体元素

视频

音频

网站的嵌套

表单

表单元素

文本框

单选框

多选框

按钮

下拉框

文本域和文件域

表单验证

页面结构

一个最基础的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></body>
</html>

<!DOCTYPE html>：规定了浏览器使用的规范为HTML5
<html>:是HTML文档的根元素，所有内容必须写在html标签里，通常包括head和body两部分
<head>:代表网页头部，通常包含网站的标题、导航菜单、搜索框或其他重要的引导内容。一个页面可以有一个或多个 <header> 元素
<title>：显示在浏览器标签页上的网页标题
<meta>:描述性标签，用来描述网站的一些信息。例如，<meta charset="UTF-8">设置字符编码为UTF-8，name 和 content 属性用于提供网页的元数据，主要用于对搜索引擎优化（SEO）
<body>:网页主体，大部分内容都在body中编写

除了上述出现的最基本结构外，还有一些扩展结构：

<footer>：用于定义网页的底部区域，通常包含版权信息、联系方式、网站链接或其他结尾部分的内容。一个页面可以有一个或多个 <footer> 元素
<section>：用于定义网页中的一个独立区域，用于把页面内容分成多个逻辑块，每个块代表一个主题区域
<article>：用于定义独立的文章内容，例如博客文章、新闻文章、评论等
<aside>：用于定义与主内容相关的额外内容，通常用于侧边栏、广告、推荐内容、相关文章等
<nav>：用于导航栏，链接到页面其他部分或其他页面

网页基本标签

<h1>-<h6>: 标题标签，从h1到h6依次重要性递减
<p></p>:段落标签，在同一个p标签内显示为一段，会自动在前后加上间距。可以通过添加p标签分段
<br/>:（自闭合标签）换行，但不会创建新的段落
<hr/>:（自闭和标签）在页面中插入一条水平线
<strong></strong>:粗体
<em></em>:斜体

图像标签

<img>标签用于在网页中嵌入图像。它是一个自闭合标签，不需要闭合标签</img>。

在<img>标签中配置属性来展示图像：

src（必填）：指定了图像文件的路径，可以是相对路径或绝对路径
alt（必填）：图像的替代文本，通常用来描述图像的内容。当图像无法加载时，浏览器会显示该文本
title：图像的悬停提示文本，当用户将鼠标悬停在图像上时，浏览器会显示该文本
width/height：图像的宽度和高度，单位为像素（px），如果不指定，则将以原始尺寸显示

示例：

<img src="example.jpg" alt="示例图片" title="悬停文字" width="300" height="300">

超链接标签

<a>标签是 HTML 中用来定义超链接的标签，可以将用户引导到其他页面、网站、邮件地址等

<a>标签为非自闭合标签，需要使用闭合标签</a>

<a>标签中的常用属性：

href（必填）：指定了超链接的目标URL，用户点击链接时会跳转到该目标地址。链接没有目标时，浏览器会默认跳转到当前页面。

文本链接

点击文本会跳转到指定的URL，例如：

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

图像链接

可以在 <a> 标签中嵌套图像，使图像本身成为一个点击链接：

<a href="https://www.example.com"><img src="example.jpg" alt="示例图片">
</a>

锚链接

锚链接允许在同一页面内跳转到指定的位置。它需要使用两个步骤：

定义目标位置，通常使用id/name属性来指定某个位置。
链接到该目标，通过 href 属性引用该位置。

例如：

<a href="#section2">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

跨页面跳转：也可以在其他页面中跳转到指定页面的某个锚点位置

<a href="page.html#section2">跳转到第二部分</a>

此链接会打开 page.html 页面并跳转到 section2 锚点位置

功能链接

除了普通的网页跳转，<a> 标签还可以用于触发其他操作，比如发送电子邮件

可以使用 mailto协议，在点击链接时打开默认的邮件客户端，并预先填入收件人地址

例如：

<a href="mailto:1234156@qq.com">点击联系我</a>

列表

有序列表

有序列表使用 <ol> 标签来表示，列表项通过 <li> 标签进行定义。<ol> 会自动为每个列表项添加序号，按照顺序排列：

<ol><li>第一项</li><li>第二项</li><li>第三项</li>
</ol>

效果如下：

无序列表

无序列表使用 <ul> 标签，列表项同样通过 <li> 标签进行定义。无序列表不会自动添加编号，而是使用圆点、方块或其他标记

<ul><li>第一项</li><li>第二项</li><li>第三项</li>
</ul>

自定义列表

自定义列表使用 <dl> 标签，包含表头和列表内容：

<dt>：定义表头
<dd>：定义列表的每一项

<dl><dt>表头</dt><dd>1</dd><dd>2</dd>
</dl>

表格

<table> 标签用于定义表格，表格的内容会分为多个行和列。表格中通常会包括表头、表格行、表格单元等元素。

border：设置表格的边框宽度
<tr>：定义一行
<td>：定义单元格

<table border="1"><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr>
</table>

效果如下：

跨列/跨行

colspan 属性让单元格跨越多个列。通过设置 colspan="n"，可以让该单元格横跨 n 列

例如：

<table border="1"><tr><td colspan="2">跨越两列的单元格</td></tr><tr><td>第一行，第一列</td><td>第一行，第二列</td></tr></table>

效果如下：

同理，rowspan 属性让单元格跨越多行。通过设置 rowspan="n"，可以让该单元格横跨 n 行

<table border="1"><tr><td rowspan="2">跨越两行的单元格</td><td>第一行，第二列</td></tr><tr><td>第二行，第二列</td></tr></table>

效果如下：

表头

可以使用 <th> 标签表示表头，和 <td> 类似，但通常呈现为加粗且居中的文本

例如：

<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td></tr><tr><td>李四</td><td>30</td></tr>
</table>

效果如下：

媒体元素

视频

<video> 标签用于在网页中嵌入视频文件

常用属性：

src：指定视频文件的URL
controls：启用视频控制条，可以播放、暂停、调整音量等
autoplay：视频加载完成后自动播放
loop：视频播放结束后自动循环播放
muted：视频初始播放时静音
poster：指定视频未播放时显示的封面图片

如果浏览器不支持 <video> 标签，浏览器会显示 "您的浏览器不支持视频标签" 这段文本。也可以在 <video> 标签中加入其他文本。

例如：

<video src="video.mp4" controls autoplay loop muted poster="poster.jpg">您的浏览器不支持视频标签。
</video>

音频

<audio> 标签用于在网页中嵌入音频文件

常用属性如下：

src：指定音频文件的URL
controls：启用音频控制条，可以播放、暂停、调整音量等
autoplay：音频加载完成后自动播放
loop：音频播放结束后自动循环播放
muted：音频初始播放时静音

例如：

<audio src="audio.mp3" controls autoplay loop muted>您的浏览器不支持音频标签。
</audio>

由于不同的浏览器支持的文件格式可能有所不同，为了确保媒体文件的兼容性，可以使用多种格式的媒体文件：

<video controls autoplay><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg">您的浏览器不支持视频标签。
</video><audio controls autoplay><source src="audio.mp3" type="audio/mp3"><source src="audio.ogg" type="audio/ogg">您的浏览器不支持音频标签。
</audio>

网站的嵌套

<iframe> 标签是可以在当前网页中嵌入其他网页，类似于一个小窗口显示其他网页内容

常用属性：

src：指定要嵌入的网页的URL地址
name：指定 <iframe> 的名称，可以在其他地方使用 target 属性来引用它
width 和 height：设置 <iframe> 的显示尺寸（宽度和高度）。
frameborder：控制框架的边框显示，frameborder="0" 表示没有边框。
scrolling：指定框架内容的滚动方式（yes，no，auto）。
allowfullscreen：允许 <iframe> 显示全屏内容。

例如：

<iframe src="https://www.360.com" name="exampleFrame" width="600" height="400" frameborder="0"></iframe>

效果如下：

可以看到360就被嵌到到我们的网页中了

通过 <iframe> 嵌套其他网页时，可以结合 <a> 标签的 target 属性来实现点击链接时，内容显示在特定的 <iframe> 中

例如：

<!-- 创建一个iframe框架，名称为"hello" -->
<iframe src="" name="hello" width="600" height="400"></iframe><!-- 创建一个链接，点击时在名为"hello"的iframe中打开360 -->
<a href="https://www.360.com" target="hello">点击跳转360</a>

效果如下：

点击“点击跳转360”链接时，百度的网页内容会在 iframe 框架内显示，而不是打开新的标签页或窗口。这样，整个页面的布局保持不变，只有框架内的内容发生变化：

表单

表单是网页中用于接收用户输入的主要方式，可以用来提交数据到服务器。HTML 提供了多种表单元素（如文本框、单选框、多选框、按钮、下拉框等）来构建交互式的网页

<form> 是表单标签，定义了表单的提交方式和目标地址。form的属性如下：

action：指定表单提交的数据将发送到哪里，通常是一个 URL 地址。
method：定义提交数据的方式。常用的有两种：
- GET：表单数据通过 URL 提交，数据会显示在 URL 地址栏中。适用于数据量小、信息不敏感的场合。
- POST：表单数据通过 HTTP 请求提交，数据不会显示在 URL 地址栏中。适用于数据量大或者涉及敏感信息的情况，如登录、上传文件等

表单元素

使用<input>标签可以创建表单元素，在type属性中指定元素的类别，比如文本框、单选框、多选框、按钮等

文本框

type="text" 或 type="password"的时候，表单为文本框，用于让用户输入单行文本。当type=password时，会隐藏输入的字符

name：指定输入框的名称，服务器端使用该名称来获取表单数据
value：指定输入框的初始值
maxlength：定义最大字符数
readonly：使文本框为只读状态，不能编辑
disabled：使文本框为禁用状态，无法操作

例如：

<input type="text" name="username" value="初始值" maxlength="50">
<input type="password" name="password">

效果如下：

单选框

type="radio"时，表单为单选框，用于选择一项内容

必须设置 name 属性，所有同一组单选框的 name 属性应相同

name：指定单选框的名称，服务器端使用该名称来获取表单数据
checked：默认选中该单选框
value：定义单选框的值，提交时使用该值

例如：

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female" checked> 女

效果如下：

多选框

type="checkbox"时，表单为多选框，name 属性相同的多个复选框属于同一组

例如：

<input type="checkbox" name="interest" value="music"> 音乐
<input type="checkbox" name="interest" value="sports" checked> 体育

效果如下：

按钮

type="button"：普通按钮，可用于执行 JavaScript 代码等
type="submit"：提交按钮，点击时会提交表单数据
type="reset"：重置按钮，点击时会清空表单的所有数据

下拉框

<select> 标签用于创建下拉列表，里面包含多个 <option> 标签，用户可以从中选择一项或多项

name：指定下拉框的名称。
option：每个 <option> 标签代表下拉框中的一个选项。
selected：指定哪个选项为默认选中

例如：

<p>国家：<select name="country"><option value="china">中国</option><option value="us" selected>美国</option></select></p>

效果如下：

文本域和文件域

文本域：用于多行文本输入，通常用于评论、留言等

文本域的标签为<textarea>，属性为：

name：指定文本域的名称
cols 和 rows：定义文本域的列数和行数

例如：

<textarea name="message" cols="50" rows="10">这里是默认文本</textarea>

效果如下：

文件域：用于文件上传，允许用户选择文件上传

使用文件域需要设置input的type为file，即<input type="file">

例如：

<input type="file" name="fileupload">
<input type="button" value="上传文件">

效果如下：

表单验证

HTML5 提供了一些表单验证功能，帮助我们在客户端进行基本的输入验证。

表单验证的实现是通过在表单中添加属性实现的

表单验证的属性包括：

placeholder：显示在输入框中的提示文本
required：指定该输入字段为必填项，提交表单时如果该字段为空，则浏览器会自动显示提示
pattern：定义输入的正则表达式，用户输入的值必须匹配该表达式
min 和 max：指定输入值的最小值和最大值，通常用于日期、数字输入框
required：确保输入框不能为空

例如：

<form><input type="text" name="username" placeholder="请输入用户名" required><input type="password" name="password" required><input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" placeholder="请输入有效的邮箱地址"><input type="submit" value="提交">
</form>

效果如下：

一篇文章学会HTML

目录页面结构网页基本标签图像标签超链接标签文本链接图像链接锚链接功能链接列表有序列表无序列表自定义列表表格跨列/跨行表头媒体元素视频音频网站的嵌套表单表单元素文本框单选框多选框按钮下拉框文本域和文件域表…...

编程日记 2024/12/28 19:02:44

QGIS二次开发（插件开发）

实习二 QGIS插件开发 2.1 任务要求 a）用C语言编写qgis插件，实现带有x/y坐标的文本文件的地图显示。用文件流fstream操作文本文件，读取其中的坐标数据。基于QgsPlugin相关类派生出一个插件，并加到插件工厂中。基于QgsVectorLaye…...

编程日记 2024/12/28 19:00:43

Web防火墙和下一代防火墙的区别

介绍客户经常询问“当我已经拥有下一代防火墙（NGFW）时，为什么需要Web应用程序防火墙（WAF）？”。本博文的目的是解释两种解决方案之间的区别，重点关注Web应用程序防火墙可以提供的附加值。什么…...

编程日记 2024/12/28 18:58:40

Linux：alias别名永久有效

一、背景日常使用bash时候，有些常用的命令参数的组合命令太长，很难记，此时可以利用Linux提供的alias命令生成命令的别名（命令的隐射），但是我们会发现，当退出了终端后重新登录就失效了&#xff…...

编程日记 2024/12/28 18:57:36

【递归与回溯深度解析：经典题解精讲（中篇）】—— LeetCode

文章目录组合目标和组合总和字母大小写全排序优美的排列N皇后组合思路：回溯算法问题要求从 1 到 n 中选出 k 个数的所有组合。使用回溯算法递归构造解。每次递归时，记录当前的组合路径，当组合长度达到 k 时，将其加入结果集…...

编程日记 2024/12/28 18:51:29

01.HTTPS的实现原理-HTTPS的概念

01.HTTPS的实现原理-HTTPS的概念简介1. HTTPS的概念和安全性2. HTTPS的实现原理3. HTTPS和HTTP的区别4. OSI七层协议模型5. SSL和TLS的区别简介该系列文章主要讲述了HTTPS协议与HTTP协议的区别，以及HTTPS如何实现安全传输。内容分为三部分：HTTPS的实…...

编程日记 2024/12/28 18:50:28

一文详解MacOS+CLion——构建libtorch机器学习开发环境

对于希望在本地环境中进行深度学习开发的开发者来说，配置合适的工具链是至关重要的一步。本文旨在帮助您在 macOS 操作系统上，利用 CLion IDE 和 PyTorch 的 C依赖库——libtorch，快速搭建起一个高效的开发环境。这里我们将一步步地讲解如何下…...

编程日记 2024/12/28 18:49:27

【LeetCode 面试经典150题】详细题解之哈希表篇

【LeetCode 面试经典150题】详细题解之哈希表篇 1 哈希表的基础1.1 基础概念及实现1.2.1 哈希表的工作原理1.2.2 705.设计哈希集合1.2.3 706.设计哈希映射 1.2 HashMap相关1.2.1 基本操作1.2.2 遍历 1.3 Hashtable1.4 LinkedHashMap1.5 HashSet**1.5.1基本特性**1.5.2 基本方法…...

编程日记 2024/12/28 18:48:26

linux socket编程之udp_dict_serve服务端--引入配置文件

注意：本篇博客只是对上一篇博客功能的增加 1.创建配置文件(翻译) Dict.txt apple: 苹果 banana: 香蕉 cat: 猫 dog: 狗 book: 书 pen: 笔 happy: 快乐的 sad: 悲伤的 run: 跑 jump: 跳 teacher: 老师 student: 学生 car: 汽车 bus: 公交车 love: 爱 hate: 恨 hell…...

编程日记 2024/12/28 18:45:23

selenium学习笔记（二）

文章目录前言设计模式POMPOM概念POM优势POM设计原则POM的实现 selenium的常用操作处理动态元素截图操作勾选复选框多层框架/窗口定位操作下拉框上传文件操作处理弹窗切换窗口拖拽操作如何处理浏览器驱动更新导致的问题selenium与网站监控监听网页内容变化监控网络请求 seleni…...

编程日记 2024/12/28 18:43:16

宏集eX710物联网工控屏在石油开采机械中的应用与优势

案例概况客户：天津某石油机械公司应用产品：宏集eX710物联网工控屏应用场景：钻井平台设备控制系统一、应用背景石油开采和生产过程复杂，涵盖钻井平台、采油设备、压缩机、分离器、管道输送系统等多种机械设备。这些设备通…...

编程日记 2024/12/28 18:41:14

linux——vi命令常用操作

一、vi模式 vi一般分为三种模式，分别是命令行模式、插入模式、末行模式 1.命令模式：控制屏幕光标的移动，按 ：进入末行模式，按 i（其他插入命令也可） 进入插入模式； 2.插入模式&…...

编程日记 2024/12/28 18:40:13

vscode添加全局宏定义

利用vscode编辑代码时，设置了禁用非活动区域着色后，在一些编译脚本中配置的宏又识别不了遇到#ifdef包住的代码就会变暗色，想查看代码不是很方便。如下图： 一解决： 在vscode中添加全局宏定义。二步骤&#xff1a…...

编程日记 2024/12/28 18:38:07

重装荣耀X14笔记本电脑踩坑记

这几天趁着有国补搞了台荣耀 X14笔记本电脑。到手后第一件事情对我来说当然是要重装成Windows 11 LTSC版。所以按以往的经验做了个USB启动安装盘，但发现上电后按F12能进入启动设备选择，可是USB分类下没有任何设备。重启按F2进入设置界面，关闭…...

编程日记 2024/12/28 18:37:04

Android `android.graphics.drawable` 包深度解析：架构与设计模式

Android android.graphics.drawable 包深度解析：架构与设计模式目录引言Drawable 概述Drawable 的架构 Drawable 类层次结构Drawable 的核心方法Drawable 的设计模式装饰者模式工厂模式状态模式常用 Drawable 子类解析 BitmapDrawableShapeDrawableLayerDrawableStateList…...

编程日记 2024/12/28 18:35:03

Kotlin语言的软件工程

Kotlin语言的软件工程引言在现代软件开发中，选择合适的编程语言是项目成功的关键之一。随着移动互联网的迅猛发展，以及大数据和人工智能等新兴技术的崛起，Kotlin语言凭借其简洁、高效和安全等特性，迅速崛起为备受欢迎的编程语…...

编程日记 2024/12/28 18:33:01

面试经典 150 题——数组/字符串（一）

文章目录 1、合并两个有序数组1.1 题目链接1.2 题目描述1.3 解题代码1.4 解题思路 2、移除元素2.1 题目链接2.2 题目描述2.3 解题代码2.4 解题思路 3、删除有序数组中的重复项3.1 题目链接3.2 题目描述3.3 解题代码3.4 解题思路 4、删除有序数组中的重复项 II4.1 题目链接4.2 题…...

编程日记 2024/12/28 18:28:56

使用亚马逊针对 PyTorch 和 MinIO 的 S3 连接器实现可迭代式数据集

2023 年 11 月，Amazon 宣布推出适用于 PyTorch 的 S3 连接器。适用于 PyTorch 的 Amazon S3 连接器提供了专为 S3 对象存储构建的 PyTorch 数据集基元（数据集和数据加载器）的实现。它支持用于随机数据访问模式的地图样式数据集和用于流式处理…...

编程日记 2024/12/28 18:19:48

TestMAX/DFT Compiler：时序单元的类型、连接顺序和后DFT优化

相关阅读 TestMAX/DFT Compilerhttps://blog.csdn.net/weixin_45791458/category_12865937.html?spm1001.2014.3001.5482 时序单元的状态未映射的时序单元(Unmapped Sequential Cell) 在Design Compiler读取了一个RTL设计后，Design Compiler内置的HDL Compiler工…...

编程日记 2024/12/28 18:14:42

CAN201 Introduction to Networking（计算机网络）Pt.3 网络层

文章目录 4.Network Layter（网络层）4.1 Overview4.2 Router（路由器）4.3 Internet Protocol4.4 IPv4 addressing4.5 NAT（network address translation，网路地址转换）4.6 IPv64.7 Generalized For…...

编程日记 2024/12/28 18:09:36

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏：【自动化测试】【测试经验】【人工智能】【Python】 Python 操作 Excel 系列读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2025/6/16 22:23:49

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块，它提供了一个轻量级的 HTTP 服务器实现，主要用于构建基于 HTTP 的应用程序和服务。功能介绍： 主要功能 HTTP服务器功能： 支持 HTTP/1.1 协议简单的请求/响应处理模型支持 GET…...

编程新知 2025/6/16 12:49:42

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器纯前端实现高延迟高流量帧率极低个人demo测试超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...

编程新知 2025/6/16 11:51:11

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...

编程新知 2025/6/15 12:49:02

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇，相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程，其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型复信道模型 n t n_t nt 根发送天线， n r n_r nr 根接收天线的 MIMO 系…...

编程新知 2025/6/16 17:54:25

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2025/6/17 0:52:02