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

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

news 文章来源：https://blog.csdn.net/yi_qingjun/article/details/132569149 2025/5/7 4:53:51

文章目录

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

机械臂+2d相机实现复合机器人定位抓取

硬件参数机械臂：艾利特相机：海康相机 2d识别库：lindmod，github可以搜到光源：磐鑫光源软件参数系统：windows / Linux 开发平台：Qt 开发语言：C 开发视觉库：OpenCV …...

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

网络编程 http 相关基础概念

文章目录表单是什么http请求是什么http请求的结构和说明关于http方法 GET和POST区别http常见状态码http响应http 请求是无状态的含义html是什么 （前端内容，了解即可）html 常见标签 （前端内容，了解即可）关于…...

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

LatexEasy公式渲染教程

LatexEasy使用简单的URL渲染公式为图片 https://r.latexeasy.com/image.svg?1-sin^2(x) 使用单个HTML图像标签将公式添加到任何现有网站 <img src"https://r.latexeasy.com/image.svg?1-sin^2(x)" />...

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

十年测试工程师叙述自动化测试学习思路

自动化测试介绍自动化测试(Automated Testing)，是指把以人为驱动的测试行为转化为机器执行的过程。实际上自动化测试往往通过一些测试工具或框架，编写自动化测试用例，来模拟手工测试过程。比如说，在项目迭代过程中，持…...

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

SpringAOP详解（下）

proxyFactory代理对象创建方式和代理对象调用方法过程： springaop创建动态代理对象和代理对象调用方法过程： 一、TargetSource的使用 Lazy注解，当加在属性上时，会产生一个代理对象赋值给这个属性，产生代理对象的代码为…...

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

主流软件漏洞跟踪 Apache RocketMQ NameServer 远程代码执行漏洞（CVE-2023-37582）

主流软件漏洞跟踪 Apache RocketMQ NameServer 远程代码执行漏洞（CVE-2023-37582）漏洞描述影响版本安全版本如何修复可供参考的资料主流软件漏洞跟踪 Apache RocketMQ NameServer 远程代码执行漏洞（CVE-2023-37582） CVE编号： CVE-2023-37582 利用情况： EXP 已公开 …...

编程日记 2023/8/30 5:23:27

Element table根据字段合并表格（可多字段合并），附带拖拽列动态合并

效果如图，姓名数值1 字段进行自动合并封装合并列js - tableMerge.js // 获取列合并的行数 // params // tableData: 表格数据 // mergeId: 合并的列的字段名 export const tagRowSpan (tableData, mergeId) >{const tagArr [];let pos 0;tableData.map((i…...

编程日记 2023/8/30 5:22:24

C++标准库STL容器详解

目录 C标准模板库STL容器容器分类容器通用接口顺序容器vectorlistdeque 容器适配器queuestackpriority_queue 关联容器：红黑树setmultisetmapmultimap 关联容器：哈希表unordered_set和unordered_multisetunordered_map和unordered_multimap 附1&#xf…...

编程日记 2023/8/30 5:21:22

ParNew垃圾收集器(Serial+多线程)是干什么用的?

在Java中，ParNew垃圾收集器是一种垃圾收集算法，它是Serial垃圾收集器的多线程版本。它主要用于新生代(Young Generation)的垃圾收集。新生代是Java堆内存的一部分，主要用于存放新创建的对象。 ParNew垃圾收集器的设计目标是在多核CPU上并行地…...

编程日记 2023/8/30 5:20:21

【Android】AES解密抛出异常Cipher functions:OPENSSL_internal:WRONG_FINAL_BLOCK_LENGTH

Java使用AES加密的时候没得问题，但是在解密的时候就出错了，一起来找找原因吧。首先，Java运行的代码如下，使用AES加解密 Cipher cipher Cipher.getInstance("AES/CBC/NOPadding"); //...主要问题可调试运行控制台抛…...

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

文章目录

一、基本了解

二、HTML常用标签

2.1 文本格式化标签

2.2 列表标签

2.3 超链接标签

2.4 图片标签

2.5 表格标签

2.6 表单标签

2.6.1 提交表单

2.6.2 下拉表单

2.6.3 按钮标签

2.7 布局标签

相关文章：