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

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

news 2026/3/30 12:32:52

文章目录

一、基本了解
二、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

零基础快速入门前端DOM 节点操作核心知识点及蓝桥杯 Web 应用开发考点解析(可用于备赛蓝桥杯Web应用开发)

DOM（文档对象模型）是 JavaScript 操作网页内容的核心接口，而节点操作则是 DOM 编程的基础，是蓝桥杯 Web 应用开发赛道的必考核心考点，无论是动态交互效果、数据渲染还是功能实现，都离不开节点的获取、增删、…...

编程新知 2026/3/30 11:29:49

告别沉闷AI工具：像素时装锻造坊带你体验RPG游戏式图像生成

告别沉闷AI工具：像素时装锻造坊带你体验RPG游戏式图像生成 1. 引言：当AI图像生成遇上复古RPG 你是否厌倦了传统AI工具单调的黑色界面和机械化的操作流程？像素时装锻造坊（Pixel Fashion Atelier）彻底改变了这一现状。…...

编程新知 2026/3/30 11:25:47

BGE Reranker-v2-m3开发者案例：为LangChain添加本地重排序节点的5步集成法

BGE Reranker-v2-m3开发者案例：为LangChain添加本地重排序节点的5步集成法 1. 项目背景与核心价值在构建检索增强生成（RAG）系统时，文本相关性排序是决定最终效果的关键环节。传统的基于向量相似度的检索往往无法准确捕捉查询与…...

编程新知 2026/3/30 11:19:42

【自动驾驶】从贝叶斯到卡尔曼：线性滤波的数学之美与实践之路

1. 贝叶斯概率：理解不确定性的语言想象你正在雾天开车，前方隐约有个模糊的影子。你的大脑会快速判断：那可能是一个行人（60%概率），也可能只是路标（40%概率）。这种在不确定环境中做判…...

编程新知 2026/3/30 10:20:11

手机号与QQ号关联查询工具：技术原理与实战指南

手机号与QQ号关联查询工具：技术原理与实战指南【免费下载链接】phone2qq 项目地址: https://gitcode.com/gh_mirrors/ph/phone2qq 破解数字身份关联难题：phone2qq工具的价值定位在多账号管理场景中，用户经常面临数字身份关联断层问…...

编程新知 2026/3/30 9:39:53

别再只会复制代码了！用CubeMX配置STM32F407的PWM驱动TB6612，从原理到实战一次搞懂

从零构建PWM电机控制系统：STM32F407与TB6612的深度实践指南引言：为什么你需要摆脱复制粘贴的陷阱在实验室里，我见过太多学生面对电机控制项目时的第一反应——打开搜索引擎，寻找"STM32 PWM驱动电机代码"，然…...

编程新知 2026/3/30 9:09:42

5步定制UEFI启动界面：技术爱好者的HackBGRT实战指南

5步定制UEFI启动界面：技术爱好者的HackBGRT实战指南【免费下载链接】HackBGRT Windows boot logo changer for UEFI systems 项目地址: https://gitcode.com/gh_mirrors/ha/HackBGRT 一、问题发现：启动界面定制的3大痛点在计算机使用体验中&am…...

编程新知 2026/3/30 9:07:41