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

07_html

news 2025/11/11 18:52:11

文章目录

引言
前端
- 概述
- 分类
HTML
- 快速入门
- 重要的body标签
- - 注释
  - hr标签
  - br标签
  - 一些常见的标签
  - 标题标签
  - div标签
  - span标签
  - p标签
  - a标签
  - img标签
  - - 路径问题
  - ol和ul标签
  - table标签
  - input标签（表单元素）
  - textarea标签（表单元素）
  - select标签（表单元素）
  - form标签

引言

eg：http://localhost:8080/file?name=1

URL分成4部分

协议部分：http、https
域名：ip + 端口 localhost:8080
服务器内部路径 /file
请求参数：?后面的部分。比如想搜索手机，搜索其他的，需要传递参数。 name=1

在这里插入图片描述

前端

概述

前端：又称web前端，网站的前台部分，运行在浏览器，给客户浏览的网页。
后端：管理和处理数据的。前端页面上展示的数据，都是后端给的。

HTML

概念：

HTML(hyper text markup language)超文本标记语言
是一个以.html为后缀的文本
是一个文本，也是一个网页；该文本可以用浏览器打开
超文本：包含文本字体、图片、链接，甚至音乐、程序等元素的文本
HTML 是一个使用’标签’来描述网页的文本 (标签在HTML文本中有实际意义)

简而言之：

首先是一个语言
文本语言
用标签/标记来描述的文本语言

快速入门

html文档后缀名 .html 或者 .htm
标签分为：
- 围堵标签：有开始标签和结束标签。如 <html> </html>
- 自闭合标签：开始标签和结束标签在一起。如 <br> <hr>
标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a>
在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可）引起来
html的标签不区分大小写，但是建议使用小写。

eg：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demo</title>
</head>
<body><div><div>猫和老鼠</div><hr width="600px" align="left">猫 - 汤姆<br>老鼠 - 杰瑞<br>
</div></body>
</html>

重要的body标签

我们研究html就是研究html不同语法标签（body部分比较重要）

注释

ctrl + shift + / ：

hr标签

<hr>：是一个横线标签, 单标签

属性：

size：高度（厚度，不同于height，不带单位时 – 默认px）
width：宽度（不带单位时 – 默认px）
- 候选值：
  - {value}/ {value}px，代表多少个像素
  - {value}%： 占父元素的百分比
noshade：颜色是否有阴影(纯色)
align：对其方式。
- 候选值：center、 left、 right

eg：

<!--高度-->
<hr size="100px"><!--默认居中对其-->
<hr width="600px" align="left"><!--noshade 没有阴影-->
<hr size="50px" noshade="noshade">

br标签

<br>：换行符，单标签

注意：

在html里，直接回车换行，没有效果，只会变成一个空格。
多个空格，也是没有效果的，也只会变成一个空格。

一些常见的标签

显示结果	`HTML`代码	描述
空格	` `	空格
>	`>`	大于符号
<	`<`	小于符号
&	`&`

<b></b>：b标签是加粗
<i></i>：i标签是斜体

标题标签

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

属性：

align
Left：左对齐内容（默认值）
Center：右对齐内容
Right：居中对齐内容

注意1：自定义标签

h0、h7、h8：自定义标签, 自定义标签没有任何特殊效果, 等价于span标签

注意2：h1在一个html页面上最好出现一次，h2-h6可以在一个html页面上出现多次

div标签

<div>：给页面进行分区或者节/块，会自动换行。
<div>会自动换行，一般用它来框定范围

span标签

行内进行分块的，不会自动换行

div和span的区别：div一般用来先划定一个大的范围，最后再用span进行填充

p标签

<p> ：段落标签

注意:：段落一般用来描述大段文字，很类似div的使用，只不过段落会自动的在段前/段后加上一部分段落间距

a标签

<a>：超链接标签

eg：
<a href="https://www.baidu.com" target="_blank">baidu</a>
<a href="https://www.baidu.com" target="_self">baidu</a>

属性：

href：指向要打开页面的的URL
target：新页面的打开方法
- _blank：在空页面打开
- _self：在当前页面打开
- _top：打开最底层的网页
- _parent：打开上一层的网页

<a>标签有时候和一个常见的标签结合起来使用

<iframe>可以内嵌页面
eg： <iframe src = "https://www.baidu.com/" width="600px" height="1000px"> </iframe>

img标签

<img> ：图片标签

<img src="这里填图片路径" alt="图片加载失败..">

属性： src用来指示图片的加载路径：相对路径、绝对路径

路径问题

Java路径:
// 相对路径: ./  ../   ../../
// 绝对路径: C:\Users\HTML前端路径:
// 相对路径:  ./  ../   ../../
// 绝对路径:  http://localhost:8080/code/com/coo1heisenberg/html/1.png
// 相对路径最终会转换成绝对路径

ol和ul标签

<ol> 有序列表，成套标签，和<li>标签构成一套标签

<ol>属性：

type：规定在列表中使用的标记类型(1,A,a,I,i)。
start：规定有序列表的起始值
reversed：规定列表顺序为降序。(9,8,7…)

<ul> 无序列表，成套标签，和<li>标签构成一套标签

<ul>属性：

type:
- disc：默认值。实心圆。
- circle：空心圆。
- square：实心方块。

eg：

<ol reversed><li>hello</li><li>world</li><li>hi</li>/*1.hello2.world3.hi*/
</ol><ul TYPE="circle"><li>hello</li><li>world</li><li>hi</li>/*helloworldhi*/
</ul>

table标签

<table>：表格标签, 成套标签, tr, td

<tr>：表格的一行
<td>：一行中一个单元格

属性：

table的属性：
- bgcolor：背景颜色
- border ： 1、2 代表边框的像素
- cellpadding：规定单元边沿与其内容之间的空白。
- cellspacing：规定单元格之间的空白。
tr的属性:
- bgcolor
- valign：规定表格行中内容的垂直对齐方式。
  - top
  - middle
  - bottom
td的属性:
- colspan：横跨列数
  - <td colspan="2" > 代表占两列，所以看起来像占了两个单元格
- rowspan：横跨行数

注：table+自动补全

eg：

<table border="1" cellspacing="0" cellpadding="10"><tr><td>这是第一个单元格</td><td>这是第二个单元格</td></tr>
</table>

input标签（表单元素）

<input>：输入框

属性：

type=
- text：默认文本
- password：密码
- button：按钮
- hidden：隐藏输入框，主要是用来传递一些不希望客户看到的参数
- radio：单选框
- reset：定义重置按钮。
- submit：提交

eg：

<input type = "text"> <br>
<input type = "password"> <br>
<input type = "button" value = "button"> <br>

textarea标签（表单元素）

<textarea> : 多行输入框

属性：

cols：列
rows：行，可以修改行数，默认是2行
placeholder：提示

eg：

<body><textarea rows="10" cols="100" placeholder="输入内容"></textarea></body>

select标签（表单元素）

< select >：下拉选择，和<option>是成套标签

属性：

option：selected（selected="selected"选中状态），代表默认选择的选项
select：multiple（multiple =“multiple” 允许多选）
select：size（size ="4"下拉可见数4），可以控制可见的数目

eg：

<body>
<select ><option>a</option><option>b</option><option selected>c</option>
</select></body>

form标签

<form>表单：

用来在浏览器的网页上, 通过用户输入或者点击, 生成一个url, 让浏览器根据这个url发起请求。
用于采集用户输入的数据的，用于和服务器进行交互。比如登录页面，注册页面。

属性：

action: 指定提交数据的URL
- action需要写三部分数据：协议部分、域名、ip + 端口、服务器内部路径
method：指定提交方式
- 分类：一共七种，常用的两种，get、post

eg：

<body>
<form action="http://localhost:8080/file"><!--name表示输入框的key值-->用户名；<input name = "username"> <br>密码：<input name="password" type="password"><br><input type="submit" value="提交"><input type="reset" value="重置"><!--生成的URL：http://localhost:8080/file?username=&password=-->
</form></body>

<body><form action="http://localhost:8080//file"><!-- 在里面去写 输入框 --><!-- 因为我们想提交的数据，key是name -->文件名：<input name = "name"><input type="submit" value="提交数据"><!--  我们点击提交数据，会发生怎样的事情1. 使用action部分填写的三个信息  协议、域名（ip + 端口）、服务器内部路径2. 使用form标签内部的输入值，组装成参数 --- 键值对http://localhost:8080//file?name=111--></form></body>----------------------------------------------------------------------------<body><form action="http://www.baidu.com/s" >要搜索的商品：<input name = "wd"><input type="submit" value="点我搜索"></form></body>

通过form标签，发送请求，有两种请求方式：get、post

get与post请求的差别：

第一个是语义化的区别
- get：获取数据
- post：提交数据
第二个是参数位置的区别
- get 请求把请求参数放在URL后面
- post请求在请求参数放在请求正文中
post 相对于get，提交的参数安全一点
通过浏览器的地址栏，只能发送get请求，post请求无法发送
get请求更易于传播一些
URL有最长的限制
- 上传一些大的数据的时候，通过get请求无法完成

eg：

<form action="http://www.baidu.com/s" method="post"><!-- value = admin 是直接把输入框里面赋值成这个--><input name="token" value="admin"><input name="goodsDetailId" value="1235"><input name="status" value="0"><input name="num" value="1"><input name="amount" value="300"><input type="submit"><input type="reset"><!--我们通过浏览器的地址，只能发送get请求，无法发送post请求要想发送post请求，需要借助form标签：1. 在action的地方，写三部分数据（协议、域名（ip + 端口）、服务器内部路径）2. method写出post3. 我们需要提交参数：input（必须要写name）4. 写一个输入框，type = submit-->
</form></body>

注：

使用form主要是提交数据
使用table主要是完成布局

07_html

文章目录引言前端概述分类 HTML快速入门重要的body标签注释hr标签br标签一些常见的标签标题标签div标签span标签p标签a标签img标签路径问题 ol和ul标签table标签input标签（表单元素）textarea标签（表单元素）select标签&#xff08…...

编程日记 2024/2/28 14:33:27

全量知识系统问题及SmartChat给出的答复之1

Q1. 一套完整的全量知识系统应该有哪些组成部分？ 一套完整的全量知识系统应该包括以下组成部分： 数据采集：收集、整理、清洗和存储各种数据，包括结构化数据、半结构化数据和非结构化数据等。数据存储和管理：建立可靠…...

编程日记 2024/2/28 14:31:23

【appium】App类型、页面元素｜UiAutomator与appium｜App元素定位

目录一、App前端基础知识 1、App类型划分 2、App类型对比 3、App页面元素 App页面元素分为布局和控件两种常见布局： 常见控件：定位软件：appium和sdk自带的uiautomatorviewer都可以定位二、App元素定位 1、id定位 2、text定位 3…...

编程日记 2024/2/28 14:30:22

ChatGpt大模型入门

环境配置创建虚拟环境建议创建一个新的虚拟环境，避免安装依赖冲突， conda下载： https://docs.conda.io/en/latest/miniconda.html conda安装： https://zhuanlan.zhihu.com/p/591091259 或者使用venv 使用参考：http…...

编程日记 2024/2/28 14:28:19

Mac 配置Clion Qt 调试显示变量值

背景使用Clion开发Qt程序，在进行调试时，会看不到Qt类的变量值，只有指针形式，对于调试很不方便。环境： Macbook ProCPU：M3Qt 5.15.13CLion 2023.3.4 解决方案为了让Clion能显示Qt类的值，…...

编程日记 2024/2/28 14:24:14

【Ansys Fluent Web 】全新用户界面支持访问大规模多GPU CFD仿真

基于Web的技术将释放云计算的强大功能，加速CFD仿真，从而减少对硬件资源的依赖。主要亮点 ✔ 使用Ansys Fluent Web用户界面™（UI），用户可通过任何设备与云端运行的仿真进行远程交互 ✔ 该界面通过利用多GPU和云计算功…...

编程日记 2024/2/28 14:18:05

13.云原生之常用研发中间件部署

云原生专栏大纲文章目录 mysql主从集群部署mysql高可用集群高可用互为主从架构互为主从架构如何实现主主复制中若是两台master上同时出现写操作可能会出现的问题该架构是否存在问题？ heml部署mysql高可用集群 nacos集群部署官网文档部署nacoshelm部署nacos redis集…...

编程日记 2024/2/28 14:17:04

远离远程代码执行，RPC 运行时中的三个漏洞是如何被发现的？

引言 MS-RPC 是 Windows 网络中广泛使用的协议，许多服务和应用程序都依赖它。因此，MS-RPC 中的漏洞可能会导致严重后果。 Akamai 安全情报小组在过去一年中一直致力于 MS-RPC 研究。我们发现并利用了漏洞，构建了研究工具，并编写…...

编程日记 2024/2/28 14:14:00

零基础学python之高级编程(4)---python异常类型及其类型处理

python异常类型及其类型处理文章目录 python异常类型及其类型处理前言一、异常的概念二、异常类型1.捕获异常方法2.主动抛出异常总结前言我们在日常学习中或者在开发一个项目时,一定会出现的问题就是报错,今天我们就学习错误类型的种类以及错误类型的处理方法一、异常的概…...

编程日记 2024/2/28 14:13:00

如何实现三维模型在网页/手机端/APP上的展示与分享？

在四维轻云平台中，只需要简单几步，就能轻松实现三维模型在网页/手机端/APP上的交互展示，也可分享转发给他人进行在线查看。 1、注册登录打开四维轻云官网，完成注册并登录。 2、创建项目在【项目管理】中点击“新建项目”按钮…...

编程日记 2024/2/28 14:11:58

SpringBoot项目在进行部署打包的时候，打包成jar和war有何差异？

首先给大家来讲一个我们遇到的一个奇怪的问题: 我的一个springboot项目，用mvn install打包成jar，换一台有jdk的机器就直接可以用java -jar 项目名.jar的方式运行，没任何问题，为什么这里不需要tomcat也可以运行了？ 然…...

编程日记 2024/2/28 14:07:52

ARM系列 -- 虚拟化（四）

今天来看看虚拟中断。在一个非虚拟化的系统中，操作系统可以直接访问GIC的寄存器，并且处理GIC的物理中断接口（physical interrupt interface）。但是在一个虚拟化的系统中，不是这样。Guest OS并不知道它运行在虚拟系…...

编程日记 2024/2/28 14:06:51

QT GUI编程常用控件学习

1 GUI编程应该学什么 2 QT常用模块结构 QtCore: 包含了核心的非GUI的功能。主要和时间、文件与文件夹、各种数据、流、URLs、mime类文件、进程与线程一起使用 QtGui: 包含了窗口系统、事件处理、2D图像、基本绘画、字体和文字类 QtWidgets: 包含了一些列创建桌面应用的UI元素…...

编程日记 2024/2/28 14:05:49

【Python从入门到进阶】49、当当网Scrapy项目实战（二）

接上篇《48、当当网Scrapy项目实战（一）》上一篇我们正式开启了一个Scrapy爬虫项目的实战，对当当网进行剖析和抓取。本篇我们继续编写该当当网的项目，讲解刚刚编写的Spider与item之间的关系，以及如何使用item&#xff…...

编程日记 2024/2/28 14:03:46

flutter build ipa 打包比 xcode archive 打出的ipa包大

为什么 flutter build ipa 打包比 xcode archive 打出的ipa包大？ 如果你用Flutter构建的.ipa文件比通过Xcode Archive构建的.ipa文件要大，这可能是因为Flutter构建了一个包含了多平台的二进制文件的通用包。这意味着在Flutter构建的.ipa中包含了所有的C…...

编程日记 2024/2/28 14:01:44

B端系统：巧妙地容错和防错设置，减少用户操作错误

Hi，大家好，我是大美B端工场，从事8年前端开发的老司机。很多B端系统体验不好，让用户非常茫然或者容易出错，大大降低了操作体验，本文着重分析B端系统的容错机制该如何设计，欢迎老铁们关注、评论、…...

编程日记 2024/2/28 13:59:42

BIO实战、NIO编程与直接内存、零拷贝深入辨析

BIO实战、NIO编程与直接内存、零拷贝深入辨析长连接、短连接长连接 socket连接后不管是否使用都会保持连接状态多用于操作频繁，点对点的通讯，避免频繁socket创建造成资源浪费，比如TCP 短连接 socket连接后发送完数据后就断开早期的http服…...

编程日记 2024/2/28 13:58:40

PDF文件转换为图片

现在确实有很多线上的工具可以把pdf文件转为图片，比如smallpdf等等，都很好用。但我们有时会碰到一些敏感数据，或者要批量去转，那么需要自己写脚本来实现，以下脚本可以提供这个功能~ def pdf2img(pdf_dir, result_path…...

编程日记 2024/2/28 13:56:38

【Java程序设计】【C00317】基于Springboot的智慧社区居家养老健康管理系统（有论文）

基于Springboot的智慧社区居家养老健康管理系统（有论文） 项目简介项目获取开发环境项目技术运行截图项目简介这是一个基于Springboot的智慧社区居家养老健康管理系统设计与实现，本系统有管理员、社区工作人员、医生以及家属四种角色权限管…...

编程日记 2024/2/28 13:51:31

Vue3前端实现一个本地消息队列(MQ)，让消息延迟消费或者做缓存

MQ功能实现的具体代码(TsMQ.ts)： import { v4 as uuidx } from uuid;import emitter from /utils/mitt// 消息类 class Message {// 过期时间，0表示马上就消费exp: number;// 消费标识，避免重复消费tag : string;// 消息体body : any;constr…...

编程日记 2024/2/28 13:46:25

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启，数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后，存在与用户组权限相关的问题。具体表现为，Oracle 实例的运行用户（oracle）和集…...

编程新知 2025/11/9 3:09:17

AtCoder 第409场初级竞赛 A~E题解

A Conflict 【题目链接】原题链接：A - Conflict 【考点】枚举【题目大意】找到是否有两人都想要的物品。【解析】遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。【难度】 GESP三级【代码参考】 #i…...

编程新知 2025/7/23 9:09:08

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求，由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面： 🏛️ 一、组织架构与职责质量体系明确组织内各部门、岗位的职责与权限，形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

C++ 基础特性深度解析

目录引言一、命名空间（namespace） C 中的命名空间与 C 语言的对比二、缺省参数 C 中的缺省参数与 C 语言的对比三、引用（reference） C 中的引用与 C 语言的对比四、inline（内联函数…...

编程新知 2025/10/17 0:18:22

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/11/10 19:08:45