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

前端基础1——HTML标记语言

news 2025/12/19 0:53:16

文章目录

一、基本了解
二、HTML常用标签
- 2.1 文本格式化标签
- 2.2 列表标签
- 2.3 超链接标签
- 2.4 图片标签
- 2.5 表格标签
- 2.6 表单标签
- - 2.6.1 提交表单
  - 2.6.2 下拉表单
  - 2.6.3 按钮标签
- 2.7 布局标签

一、基本了解

网页组成（index.html页面）：

HTML标记语言：组成网页架构的元素组件。比如页面左边放什么功能，右边放什么输入框，是整体框架。
CSS 样式语言：美化网页的样式。比如网页显示的字体颜色，鼠标放在搜索框上有高亮显示，等等。
JavaScript 程式语言：控制网页的动态效果。比如轮播图，过几秒闪一次的效果。
JQuery 程式语言：协助及加强JavaScript的实现。
在网页界面，可以通过右击——>查看网页源代码，即可看到HTML内容。

网页代码结构：

二、HTML常用标签

概念：

HTML：是一种用于创建网页的标记语言, 可以使用HTML创建网页，用浏览器打开会自动解析。
HTML是由标签和内容构成。

HTML代码结构：
<html>
<head><title>文档的标题</title>
</head>
<body>文档的内容...
</body>
</html>

2.1 文本格式化标签

标签	描述
<br/>	换行
<h1>~</h1>	标题，定义标题字体大小，1最大，6最小
<p>…</p>	段落
<i>…</i>	斜体
<cite></cite>	引用
<b>…</b>	加粗
<strong>…</strong>	强调加粗
<del></del>	删除线

1.示例代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title>
</head>
<body>
<h1>欢迎来到我的博客</h1>
<h4>欢迎来到我的博客</h4>
<p>HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。</p>
<p>它定义了网页内容的含义和结构。</p>
<p>除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。</p>
<i>欢迎来到我的博客</i><br>
<cite>欢迎来到我的博客</cite><br>
<b>欢迎来到我的博客</b><br>
<strong>欢迎来到我的博客</strong><br>
<del>欢迎来到我的博客</del>
</body>
</html>

2.查看效果。
在这里插入图片描述

2.2 列表标签

标签	描述	参数
<ul>	无序列表	type=disc ：默认实心圆 square ：实心方块 circle ：空心圆
<ol>	有序列表	type=1 默认数字，其他值：A/a/I/i/1
<li>	列表项目	在有序列表和无序列表中用

1.不带参数。
在这里插入图片描述
2.带参数。

2.3 超链接标签

超链接标签格式：<a href=“网址” ></a>

属性	描述
href	指定链接跳转地址
target	链接打开方式，常用值：_blank 打开新窗口
title	文字提示属性
name	定义锚点

1.当前页面跳转。

<a href="http://www.baidu.com">百度地址，点击跳转</a>

在这里插入图片描述
2.新增窗口跳转。

<a href="http://www.baidu.com" target="_blank">百度地址，点击跳转</a>

在这里插入图片描述
3.定义描点实现点击底部按钮，回到页面最开头。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title>
</head>
<body>
<a name="qingjun"></a>    ##添加此行，自定义name名称。
......
......
<a href="#qingjun">回到页面顶部</a>     ##添加此行，引用name。
</body>
</html>

在这里插入图片描述

2.4 图片标签

<img src=“图片文件路径”alt=“图片提示”>

属性	描述
alt	图片加载失败时的提示信息
title	文字提示属性

1.加载图片，添加图片相对路径。

<img src="img/4.jpg" alt="">

在这里插入图片描述
2.添加加载失败时的提示信息。

<img src="img/41.jpg" alt="加载错误">

在这里插入图片描述

2.5 表格标签

1.代码示例。

<table border="1">   ##table:表格标签。<thead>     ##thead:定义表格标题。<tr>      ##tr:行标签.<th>主机名</th>   ##th:列名<th>IP</th><th>操作系统</th></tr></thead><tbody>     ##tbody:定义表格内容<tr>    ##tr:列标签<td>www.qingjun.cn</td>    ##td:列内容<td>192.168.1.10</td><td>CentOS7</td></tr></tbody>
</table>

2.查看效果。
在这里插入图片描述

2.6 表单标签

2.6.1 提交表单

表单标签：<form></form>
表单项标签：<input>
注意：可以不在from表单中使用，但这种使用方式需要js获取值才能提交，而在from表单中可以统一通过”提交按钮“提交数据。

表单属性	描述
action	提交的目标地址(URL)
method	提交方式：get(默认)和post
enctype	编码类型： application/x-www-form-urlencoded：默认值，编码字符 multipart/form-data：传输数据为二进制类型，如提交文件 text/plain：纯文本的传输

表单项属性	描述
type	text：单行文本框 password：密码输入框 checkbox：多选框 radio：单选框 file：文件上传选择框 button：普通按钮 submit：提交按钮 reset：重置按钮
name	表单项名，用于存储内容值
value	表单项的默认值
disabled	禁用该元素
checked	默认被选中，值也是checked

1.示例代码。

<form action=method="post",enctype="multipart/form-data">用户名 :<input type="text" name="username"><br>密码 : <input type="password" name="password"><br><p>多选框 :<br>主机 <input type="checkbox" name="host" disabled><br>显示器 <input type="checkbox" name="displayer"><br>鼠标 <input type="checkbox" name="mouse"><br></p>单选框 :<br>主机 <input type="radio" name="computer" checked><br>显示器 <input type="radio" name="computer"><br>鼠标 <input type="radio" name="computerf"><br><p><input type="file"><br><input type="button" value="普通按钮"></input><br><input type="submit"><br><input type="reset"></p>
</form>

2.查看效果。
在这里插入图片描述

2.6.2 下拉表单

下拉列表标签：<select></select>
下拉列表选项标签：<option></option>
注意：可以不在from表单中使用，但这种使用方式需要js获取值才能提交，而在from表单中可以统一通过”提交按钮“提交数据。

属性	描述
name	下拉列表的名称，用于存储下拉值
disabled	禁用该元素
multiple	设置可以选择多个项目
size	指定下拉列表中的可见行数

选项属性	描述
value	选项值
name	默认下拉项

1.示例代码。

<select name="test" id="" multiple><option value="电商项目" disabled>电商项目</option><option value="大数据项目">大数据项目</option><option value="在线教育项目">在线教育项目</option>
</select>

2.查看效果。
在这里插入图片描述

2.6.3 按钮标签

格式：<button type=“submit”></botton>
type可选值：
button：普通
submit：提交
reset：重置

注意：可以不在from表单中使用，但这种使用方式需要js获取值才能提交，而在from表单中可以统一通过”提交按钮“提交数据。

1.示例代码。

<button type="button">普通</botton>
<button type="submit">提交</botton>
<button type="reset">重置</botton>

2.查看效果。
在这里插入图片描述

2.7 布局标签

<div>标签用于在HTML文档中定义一个区块。
<div>标签常用于将标签集中起来，然后用样式对它们进行统一排版。

1.示例代码。

<div style="color: red;background-color: azure;width: 200px;height: 200px"><p>这是段落。</p><p>这是段落。</p><p>这是段落。</p><p>这是段落。</p>
</div>
<div style="color: blue;background-color: lightblue;width: 200px;height: 200px"><p>这是段落。</p><p>这是段落。</p><p>这是段落。</p><p>这是段落。</p><p>这是段落。</p>
</div>

2.查看效果。
在这里插入图片描述

前端基础1——HTML标记语言

文章目录一、基本了解二、HTML常用标签2.1 文本格式化标签2.2 列表标签2.3 超链接标签2.4 图片标签2.5 表格标签2.6 表单标签2.6.1 提交表单2.6.2 下拉表单2.6.3 按钮标签 2.7 布局标签一、基本了解网页组成（index.html页面）： HTML标记语言…...

编程日记 2023/8/30 5:49:10

2.1: Dubbo的基本应用-负载均衡,集群容错,服务降级

负载均衡官网地址： http://dubbo.apache.org/zh/docs/v2.7/user/examples/loadbalance/ 如果在消费端和服务端都配置了负载均衡策略， 以消费端为准。这其中比较难理解的就是最少活跃调用数是如何进行统计的？ 讲道理， 最少活跃数…...

编程日记 2023/8/30 5:48:09

正则常见问题及解决方案

使用正则处理问题的基本思路。有一些方法比较固定，比如将问题分解成多个小问题，每个小问题见招拆招：某个位置上可能有多个字符的话，就⽤字符组。某个位置上有多个字符串的话，就⽤多选结构。出现的次数不确定的话&#…...

编程日记 2023/8/30 5:47:07

docker发布项目及使用外部文件的情况处理

适用docker环境已搭建好首先项目打jar包：server-cdzh-2.1.0-SNAPSHOT.jar 创建Dockerfile FROM java:8 ADD server-cdzh-2.1.0-SNAPSHOT.jar cdzh.jar EXPOSE 60156 ENTRYPOINT ["java","-jar","/cdzh.jar"] 在linux服务器新建…...

编程日记 2023/8/30 5:46:06

CSS 中哪些属性可以继承

1. 字体属性： font、font-style、font-variant、font-weight、font-size、line-height等属性是字体样式的属性，都可以被子元素继承。 2. 文本属性： color、text-indent、text-align、text-decoration、text-transform、letter-spacing、wo…...

编程日记 2023/8/30 5:45:05

vue cli构建的项目出现 Uncaught runtime errors

使用 vue/cli 脚手架构建的项目，在 npm run dev 运行后，页面出现 Uncaught runtime errors 报错遮罩层，如下图所示。报错原因这种错误通常是运行时出的问题，可能是网络错误，可能是变量未定义等等。这种错误默认在开…...

编程日记 2023/8/30 5:44:04

透过源码理解Flutter InheritedWidget

InheritedWidget的核心是保存值和保存使用这个值的widget，通过对比值的变化，来决定是否要通知那些使用了这个值的widget更新自身。 1 updateShouldNotify和notifyClients InheritedWidget通过updateShouldNotify函数控制依赖其的子组件是否在Inherited…...

编程日记 2023/8/30 5:43:03

天去面试的时候，遇到一个问题。我三个任务，ABC，我怎么让A执行完执行B，B执行完执行C 3个并行线程，如何解决。程池的核心运行原理和参数。

今天去面试的时候，遇到一个问题。我三个任务，ABC，我怎么让A执行完执行B，B执行完执行C 3个并行线程，如何解决。程池的核心运行原理和参数。 1.线程池核心的参数 1.线程核心数- 线程池中始终保持的活动线程数量。 2.最…...

编程日记 2023/8/30 5:42:02

使用finksql方式将mysql数据同步到kafka中，每次只能同步一张表

使用finksql方式将mysql数据同步到kafka中，每次只能同步一张表 package flink;import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment; import org.apache.flink.table.api.TableResult; import org.apache.flink.table.api.bridge.java.…...

编程日记 2023/8/30 5:41:01

ios开发 swift5 苹果系统自带的图标 SF Symbols

文章目录 1.官网app的下载和使用2.使用代码 1.官网app的下载和使用苹果官网网址：SF Symbols 通过上面的网址可以下载dmg, 安装到自己的mac上貌似下面这样不能展示出动画，还是要使用动画的代码 .bounce.up.byLayer2.使用代码 UIKit UIImage(system…...

编程日记 2023/8/30 5:39:59

Linux内核源码分析 (3)调度器的实现

Linux内核源码分析 (3)调度器的实现文章目录 Linux内核源码分析 (3)调度器的实现一、概述二、调度器数据结构1、task_struct中与调度有关的的成员2、调度器类3、就绪队列4、调度实体三、处理优先级1、优先级的内核表示2、计算优先级3、计算负荷权重四、核心调度器1、周期性调…...

编程日记 2023/8/30 5:38:59

网络安全法+网络安全等级保护

网络安全法网络安全法21条网络安全法31条网络安全等级保护网络安全等级保护分为几级? 一个中心，三重防护等级保护2.0网络拓扑图安全区域边界安全计算环境等保安全产品物理机房安全设计...

编程日记 2023/8/30 5:37:57

持续集成对软件项目管理的作用

l、对项目目标管理的作用软件项目的目标是开发出可运行的、客户满意的软件系统持续集成有统一的代码库。要求开发人员定期地、不断地向代码库提交代码。新近提交的代码会经过编译与测试．与代码库中旧有的代码相整合，形成安全稳定运行的代码库&…...

编程日记 2023/8/30 5:36:56

【Qt QAxObject】使用 QAxObject 高效任意读写 Excel 表

1. 用什么操作 Excel 表 Qt 的官网库中是不包含 Microsoft Excel 的操作库，关于对 Microsoft Excel 的操作库可选的有很多，包含基于 Windows 系统本身的 ActiveX、Qt Xlsx、xlsLib、LibXL、qtXLS、BasicExcel、Number Duck。库.xls.xlsx读写平台Qt Xls…...

编程日记 2023/8/30 5:35:55

java八股文面试[多线程]——自旋锁

优点： 1. 自旋锁尽可能的减少线程的阻塞，这对于锁的竞争不激烈，且占用锁时间非常短的代码块来说性能能大幅度的提升，因为自旋的消耗会小于线程阻塞挂起再唤醒的操作的消耗 ，这些操作会导致线程发生两次上下文切换&…...

编程日记 2023/8/30 5:34:54

分布式系统的多数据库，实现分布式事务回滚（1.7.0 seata整合2.0.4nacos）

正文 1、解决的应用场景是分布式事务，每个服务有独立的数据库。 2、例如：A服务的数据库是A1，B服务的数据库是B2，A服务通过feign接口调用B服务，B涉及提交数据到B2，业务是在B提交数据之后，在A服…...

编程日记 2023/8/30 5:33:53

PDF可以修改内容吗？有什么注意的事项？

PDF是一种跨平台的电子文档格式，可以在各种设备上轻松阅读和共享。许多人喜欢将文档转换为PDF格式以确保格式的一致性和易读性。但是，PDF文件一般被认为是“只读”文件，即无法编辑。那么，PDF文件是否可以修改呢？ 答案是…...

编程日记 2023/8/30 5:32:49

自动泊车的自动驾驶控制算法

1. 自动泊车系统自动泊车系统(AutomatedParkingASSiSt,APA)利用车辆搭载的传感器感知车辆周边环境,扫描满足当前车辆停放的障碍物空间车位或线车位,并通过人机交互(HumanMachine Interface,HMI)获取驾驶员对目标车位的选择或自动确定目标车位,自动规划泊车路径,通过控制器向车…...

编程日记 2023/8/30 5:31:48

Java doc等文件生成PDF、多个PDF合并

之前写过一遍文章是图片生成PDF。今天继续来对 doc等文件进行pdf合并以及多个pdf合并为一个pdf。兄弟们，还是开箱即用。 1、doc生成pdf 依赖 <dependency><groupId>com.aspose</groupId><artifactId>aspose…...

编程日记 2023/8/30 5:30:45

【C++】list类的模拟实现

🏖️作者：malloc不出对象 ⛺专栏：C的学习之路 👦个人简介：一名双非本科院校大二在读的科班编程菜鸟，努力编程只为赶上各位大佬的步伐🙈🙈 目录前言一、list类的模拟实现1.1 list的…...

编程日记 2023/8/30 5:29:43

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。一、遭遇攻击的紧急应…...

编程新知 2025/12/7 16:06:34

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...

编程新知 2025/11/11 23:02:06

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/12/17 13:07:40

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06（十亿美元）。漏洞扫描服务市场行业预计将从 2024 年的 3.48（十亿美元）增长到 2032 年的 9.54（十亿美元）。预测期内漏洞扫描服务市场 CAGR（增长率&…...

编程新知 2025/12/17 21:16:11

【论文笔记】若干矿井粉尘检测算法概述

总的来说，传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度，通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...

编程新知 2025/11/25 4:57:19

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。代码 Python多线程爬虫教程核心概念多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...

编程新知 2025/12/16 18:04:55

ios苹果系统，js 滑动屏幕、锚定无效

现象：window.addEventListener监听touch无效，划不动屏幕，但是代码逻辑都有执行到。 scrollIntoView也无效。原因：这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作，从而会影响…...

编程新知 2025/12/4 2:37:03

tauri项目，如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值，可以通过标准的依赖： std::env::var(name).ok() 想在前端通过调用来获取，可以写一个command函数： #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

编程新知 2025/12/12 0:44:44

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的，启动是正常的， 但用下面的Microsip连接不上主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/12/18 2:26:13

文章目录

一、基本了解

二、HTML常用标签

2.1 文本格式化标签

2.2 列表标签

2.3 超链接标签

2.4 图片标签

2.5 表格标签

2.6 表单标签

2.6.1 提交表单

2.6.2 下拉表单

2.6.3 按钮标签

2.7 布局标签

相关文章：