一篇文章学会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></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:指定视频文件的URLcontrols:启用视频控制条,可以播放、暂停、调整音量等autoplay:视频加载完成后自动播放loop:视频播放结束后自动循环播放muted:视频初始播放时静音poster:指定视频未播放时显示的封面图片
如果浏览器不支持 <video> 标签,浏览器会显示 "您的浏览器不支持视频标签" 这段文本。也可以在 <video> 标签中加入其他文本。
例如:
<video src="video.mp4" controls autoplay loop muted poster="poster.jpg">您的浏览器不支持视频标签。
</video>
音频
<audio> 标签用于在网页中嵌入音频文件
常用属性如下:
src:指定音频文件的URLcontrols:启用音频控制条,可以播放、暂停、调整音量等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
目录 页面结构 网页基本标签 图像标签 超链接标签 文本链接 图像链接 锚链接 功能链接 列表 有序列表 无序列表 自定义列表 表格 跨列/跨行 表头 媒体元素 视频 音频 网站的嵌套 表单 表单元素 文本框 单选框 多选框 按钮 下拉框 文本域和文件域 表…...
QGIS二次开发(插件开发)
实习二 QGIS插件开发 2.1 任务要求 a)用C语言编写qgis插件,实现带有x/y坐标的文本文件的地图显示。 用文件流fstream操作文本文件,读取其中的坐标数据。基于QgsPlugin相关类派生出一个插件,并加到插件工厂中。基于QgsVectorLaye…...
Web防火墙和下一代防火墙的区别
介绍 客户经常询问“当我已经拥有下一代防火墙(NGFW)时,为什么需要Web应用程序防火墙(WAF)?”。本博文的目的是解释两种解决方案之间的区别,重点关注Web应用程序防火墙可以提供的附加值。 什么…...
Linux:alias别名永久有效
一、背景 日常使用bash时候,有些常用的命令参数的组合命令太长,很难记,此时可以利用Linux提供的alias命令生成命令的别名(命令的隐射),但是我们会发现,当退出了终端后重新登录就失效了ÿ…...
【递归与回溯深度解析:经典题解精讲(中篇)】—— LeetCode
文章目录 组合目标和组合总和字母大小写全排序优美的排列N皇后 组合 思路:回溯算法 问题要求从 1 到 n 中选出 k 个数的所有组合。 使用回溯算法递归构造解。 每次递归时,记录当前的组合路径,当组合长度达到 k 时,将其加入结果集…...
01.HTTPS的实现原理-HTTPS的概念
01.HTTPS的实现原理-HTTPS的概念 简介1. HTTPS的概念和安全性2. HTTPS的实现原理3. HTTPS和HTTP的区别4. OSI七层协议模型5. SSL和TLS的区别 简介 该系列文章主要讲述了HTTPS协议与HTTP协议的区别,以及HTTPS如何实现安全传输。内容分为三部分:HTTPS的实…...
一文详解MacOS+CLion——构建libtorch机器学习开发环境
对于希望在本地环境中进行深度学习开发的开发者来说,配置合适的工具链是至关重要的一步。本文旨在帮助您在 macOS 操作系统上,利用 CLion IDE 和 PyTorch 的 C依赖库——libtorch,快速搭建起一个高效的开发环境。这里我们将一步步地讲解如何下…...
【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 基本方法…...
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…...
selenium学习笔记(二)
文章目录 前言设计模式POMPOM概念POM优势POM设计原则POM的实现 selenium的常用操作处理动态元素截图操作勾选复选框多层框架/窗口定位操作下拉框上传文件操作处理弹窗切换窗口拖拽操作 如何处理浏览器驱动更新导致的问题selenium与网站监控监听网页内容变化监控网络请求 seleni…...
宏集eX710物联网工控屏在石油开采机械中的应用与优势
案例概况 客户:天津某石油机械公司 应用产品:宏集eX710物联网工控屏 应用场景:钻井平台设备控制系统 一、应用背景 石油开采和生产过程复杂,涵盖钻井平台、采油设备、压缩机、分离器、管道输送系统等多种机械设备。这些设备通…...
linux——vi命令常用操作
一、vi模式 vi一般分为三种模式,分别是命令行模式、插入模式、末行模式 1.命令模式:控制屏幕光标的移动,按 :进入末行模式,按 i(其他插入命令也可) 进入插入模式; 2.插入模式&…...
vscode添加全局宏定义
利用vscode编辑代码时,设置了禁用非活动区域着色后,在一些编译脚本中配置的宏又识别不了 遇到#ifdef包住的代码就会变暗色,想查看代码不是很方便。如下图: 一 解决: 在vscode中添加全局宏定义。 二 步骤:…...
重装荣耀X14笔记本电脑踩坑记
这几天趁着有国补搞了台荣耀 X14笔记本电脑。到手后第一件事情对我来说当然是要重装成Windows 11 LTSC版。所以按以往的经验做了个USB启动安装盘,但发现上电后按F12能进入启动设备选择,可是USB分类下没有任何设备。重启按F2进入设置界面,关闭…...
Android `android.graphics.drawable` 包深度解析:架构与设计模式
Android android.graphics.drawable 包深度解析:架构与设计模式 目录 引言Drawable 概述Drawable 的架构 Drawable 类层次结构Drawable 的核心方法Drawable 的设计模式 装饰者模式工厂模式状态模式常用 Drawable 子类解析 BitmapDrawableShapeDrawableLayerDrawableStateList…...
Kotlin语言的软件工程
Kotlin语言的软件工程 引言 在现代软件开发中,选择合适的编程语言是项目成功的关键之一。随着移动互联网的迅猛发展,以及大数据和人工智能等新兴技术的崛起,Kotlin语言凭借其简洁、高效和安全等特性,迅速崛起为备受欢迎的编程语…...
面试经典 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 题…...
使用亚马逊针对 PyTorch 和 MinIO 的 S3 连接器实现可迭代式数据集
2023 年 11 月,Amazon 宣布推出适用于 PyTorch 的 S3 连接器。适用于 PyTorch 的 Amazon S3 连接器提供了专为 S3 对象存储构建的 PyTorch 数据集基元(数据集和数据加载器)的实现。它支持用于随机数据访问模式的地图样式数据集和用于流式处理…...
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工…...
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…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
云计算——弹性云计算器(ECS)
弹性云服务器:ECS 概述 云计算重构了ICT系统,云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台,包含如下主要概念。 ECS(Elastic Cloud Server):即弹性云服务器,是云计算…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...
Linux 内存管理实战精讲:核心原理与面试常考点全解析
Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1)准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2)服务端安装软件:bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库(uthash库)提供对哈希表的操作,文章如下: C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...
脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)
一、OpenBCI_GUI 项目概述 (一)项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台,其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言,首次接触 OpenBCI 设备时,往…...
