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

Web前端-HTML

news 2025/7/7 22:13:16

HTML 负责页面的结构（页面的元素和内容）

HTML由标签组成，标签都是预定义好的。例如<a>展示超链接，使用<img>展示图片，<vedio>展示视频。

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

编写 HTML 代码

创建一个文件，后缀名改成 html 就可以了。运行 html，有浏览器就行了。创建的时候一定要勾选文件扩展名：

  1. 创建文件，修改文件后缀为 .html

  2. 编写HTML结构标签

  3. head是文件的头，title定义了页面标题，body是页面展示的内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title>
</head>
<body></body>
</html>

HTML常见标签

注释

通过 <!----> 来完成注释

<body>hello world!<!--这里是注释-->
</body>

标题标签

  1. 标题标签一共有6个 h1 至 h6。
  2. 数字越小，里面的内容就越粗越大。
  3. 数字越大，里面的内容就越细越小。

段落标签

p 就是段落标签，可以对内容分段。通过 lorem 就可以自动生成段落。

<body><p>第一个段落 </p><p>第二个段落 </p><p>第三个段落 </p>
</body>

换行标签

br 就是换行标签，如果没有 换行标签 的话，HTML 是不会自动换行的。<br> 是一个单标签，加入到长段落当中就可以了。

<body><p>第一个段落 hello every<br> my name is lihua.
</body>

转义字符

HTML 会把相邻的空格，合并成一个空格。如果需要多个空格，就需要使用转义字符，除了空格之外，像 < > & 等这些特殊符号，也需要使用转义字符。最常见的就是这些：

格式化标签

格式化标签，其实是针对 文本 进行一些样式上的调整。

  1. 加粗: strong 标签 和 b 标签
  2. 倾斜: em 标签 和 i 标签
  3. 删除线: del 标签 和 s 标签
  4. 下划线: ins 标签 和 u 标签
<body><strong>加粗</strong><b>加粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><s>删除线</s><ins>下划线</ins><u>下划线</u>
</body>

图片标签

使用 img 标签来表示图片。img 也是一个单标签，里面可以有好多属性，其中最重要的就是 src 属性。通过 src 来描述图片所在的位置。我们把图片放在项目的目录当中，然后在代码当中使用就好了

<body><img src="测试.png" alt="">
</body>

这里的 src，可以是相对路径，也可以是绝对路径，也可以是网络路径。

通过 width 和 height 来设置长宽

width：就是宽。height：就是高。设置尺寸的时候，单位：px，就是像素的意思。宽度和高度可以一起设置，也可以只设置一个，只设置一个的话，就不会导致图片形变。

超链接

通过 a 标签就可以实现超链接，跳转到其他的页面。

<body><a href="URL">超链接</a>
</body>

属性：

href:指定资源访问的url

target:指定在何处打开资源链接：_self:默认值，在当前页面打开 _blank:在新建页面打开。

用图片做超链接

代码如下：

<body><a href="https:URL"><img src="picture.png" ></a>
</body>
表格标签

表格标签是一组标签：

  1. table 就是表格
  2. tr: 表示表格的一行
  3. td: 表示一列
  4. th: 表示表头中的一列
<html><head><title>HTML 邓子</title></head><body>	<style>td {text-align: center;}</style><table border="2px" width="300" height="150" cellspacing="0">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>邓子</td>
<td>19</td>
</tr>
<tr>
<td>诩子</td>
<td>18</td>
</tr></table></body>
</html>

列表标签

  1. 无序列表：ul
  2. 有序列表：li
  3. 自定义列表：dt dd
<body><h3>无序列表</h3><ul><li>啦啦啦</li><li>哈哈哈</li><li>也一样</li></ul><h3>有序列表</h3><ol><li>啦啦啦</li><li>哈哈哈</li><li>也一样</li></ol><h3>自定义列表</h3><dl><dt>强强强强</dt><dd>啦啦啦</dd><dd>哈哈哈</dd><dd>也一样</dd></dl>
</body>

运行结果如下：

 

表单标签

表单标签是用户和页面之间交互的重要手段，用来采集用户输入数据，能够把用户输入的数据据提交到服务器上。例如：注册登入功能

标签：<form>

如下图这个整体就是一个表单，里面的每一项称为表单项

属性：

  • action:规定提交表单时向何处发送表单数据，url
  • method:规定用于发送表单数据的方式。GET(在url后面拼接表单数据，url长度有限制),POST(在请求体中传递)

表单项标签

1. input 标签

input 就是输入标签，通过type属性控制输入形式


 

<label><input type="redio" name="gender" value="1">男 </label>
<!-- 使用lable可以点击汉字也能选中，name用来分组互斥,value是选中后向服务器提交的数据-->

2.select标签

定义下拉标签，<option>定义下拉列表项

<body><form><select><option>-- 请选择年份 --</option><option>2000</option><option>2001</option><option>2002</option></select></form>
</body>

3. textarea标签

textarea 来实现多行编辑

<body><form><textarea cols="30" rows="10"></textarea></form>
</body>

无语义标签

无语义就是没有明确的角色：div 和 span 这两个无语义标签。这两个无语义标签可以代替上面的绝大部分有语义标签的功能（但是 form 这一系列不能替换）。div 默认是一个块级元素（独占一行），span 默认是一个行内元素。

相关文章：

Web前端-HTML

HTML 负责页面的结构&#xff08;页面的元素和内容&#xff09; HTML由标签组成&#xff0c;标签都是预定义好的。例如<a>展示超链接&#xff0c;使用<img>展示图片&#xff0c;<vedio>展示视频。 HTML代码直接在浏览器中运行&#xff0c;HTML标签由浏览器…...

编程日记 2024/3/20 4:43:56

【LLMs+小羊驼】23.03.Vicuna: 类似GPT4的开源聊天机器人（ 90%* ChatGPT Quality）

官方在线demo: https://chat.lmsys.org/ Github项目代码&#xff1a;https://github.com/lm-sys/FastChat 官方博客&#xff1a;Vicuna: An Open-Source Chatbot Impressing GPT-4 with 90% ChatGPT Quality 模型下载: https://huggingface.co/lmsys/vicuna-7b-v1.5 | 所有的模…...

编程日记 2024/3/20 4:42:55

详细了解CSS

1.1 样式定义方式 行内样式表&#xff08;inline style sheet&#xff09; 直接定义在标签的style属性中。 作用范围&#xff1a;仅对当前标签产生影响。 例如&#xff1a; <img src"/images/mountain.jpg" alt"" style"width: 300px; height:…...

编程日记 2024/3/20 4:41:53

Java基础-IO流

文章目录 1.文件1.基本介绍2.常用的文件操作1.创建文件的相关构造器和方法代码实例结果 2.获取文件相关信息代码实例结果 3.目录的删除和文件删除代码实例 2.IO流原理及分类IO流原理IO流分类 3.FileInputStream1.类图2.代码实例3.结果 4.FileOutputStream1.类图2.案例代码实例 …...

编程日记 2024/3/20 4:40:52

MySQL的基本概念

一.MySQL概念&#xff1a; 你可以把MySQL想象成一个大杂货店&#xff0c;里面有很多货架&#xff0c;每个货架上摆放着不同种类的商品&#xff0c;MySQLMySQ就像是这个杂货店的后台库存管理系统。 1.表格&#xff08;货架&#xff09;&#xff1a;每个货架上摆放商品&#xff0…...

编程日记 2024/3/20 4:35:49

如何入职车载测试

以下课件都可以学习&#xff0c;一对一教你如何入职车载 可以学习的内容如下&#xff1a;第一&#xff1a;仪表项目、导航项目、车控项目、OTA升级项目、UDS诊断项目。第二&#xff1a;DBC数据库制作、CDD数据库制作。第三&#xff1a;项目规范文档阅读、调查表理解。第四&…...

编程日记 2024/3/20 4:33:47

【物联网】Modbus 协议简介

Modbus 协议简介 QingHub设计器在设计物联网数据采集时不可避免的需要针对Modbus协议的设备做相关数据采集&#xff0c;这里就我们的实际项目经验分享Modbus协议 你可以通过QingHub作业直接体验试用&#xff0c;也可以根据手册开发相应的代码块。 qinghub项目已经全面开源。 …...

编程日记 2024/3/20 4:32:45

网络编程-套接字相关基础知识

1.1. Socket简介 套接字&#xff08;socket&#xff09;是一种通信机制&#xff0c;凭借这种机制&#xff0c; 客户端<->服务器 模型的通信方式既可以在本地设备上进行&#xff0c;也可以跨网络进行。 Socket英文原意是“孔”或者“插座”的意思&#xff0c;在网络编程…...

编程日记 2024/3/20 4:30:43

基于Python的医疗机构药品及耗材进销存信息管理系统

技术&#xff1a;pythonmysqlvue 一、系统背景 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本医疗机构药品及耗材信息管理系统就是在这样的大环境下诞生&#x…...

编程日记 2024/3/20 4:28:41

Java学习笔记（14）

常用API Java已经写好的各种功能的java类 Math Final修饰&#xff0c;不能被继承 因为是静态static的&#xff0c;所以使用方法不用创建对象&#xff0c;使用里面的方法直接 math.方法名 就行 常用方法 Abs,ceil,floor,round,max,minm,pow,sqrt,cbrt,random Abs要注意参数的…...

编程日记 2024/3/20 4:25:38

联合和枚举

联合体 联合体和结构体类似&#xff0c;也有多个成员构成&#xff0c;但编译器只为最大的成员分配足够的空间。 联合体最大的特点是所有的成员共用同一块内存空间。也叫共用体。 union Un { int i; struct s { char c1; char c2; char c…...

编程日记 2024/3/20 4:21:32

《深入Linux内核架构》第2章 进程管理和调度 （3）

目录 2.5 调度器的实现 2.5.1 概观 2.5.2 数据结构 2.5.3 处理优先级 2.5.3.1 nice和prior 2.5.3.2 vruntime 2.5.3.3 weight权重 2.5.4 核心调度器 2.5 调度器的实现 调度器的任务&#xff1a; 1. 执行调度策略。 2. 执行上下文切换。 无论用户态抢占&#xff0c;还是…...

编程日记 2024/3/20 4:18:29

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：Refresh）

可以进行页面下拉操作并显示刷新动效的容器组件。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 支持单个子组件。 从API version 11开始&#xff0c;Refresh子组件会跟随手势下拉而下移…...

编程日记 2024/3/20 4:14:20

数据资产管理解决方案：构建高效、安全的数据生态体系

在数字化时代&#xff0c;数据已成为企业最重要的资产之一。然而&#xff0c;如何有效管理和利用这些数据资产&#xff0c;却是许多企业面临的难题。本文将详细介绍数据资产管理解决方案&#xff0c;帮助企业构建高效、安全的数据生态体系。 一、引言 在信息化浪潮的推动下&a…...

编程日记 2024/3/20 4:12:18

Visual Studio 2013 - 调试模式下查看监视窗口

Visual Studio 2013 - 调试模式下查看监视窗口 1. 监视窗口References 1. 监视窗口 Ctrl Alt W&#xff0c;1-4&#xff1a;监视窗口 (数字键不能使用小键盘) or 调试 -> 窗口 -> 监视 -> 监视 1-4 调试状态下使用&#xff1a; 在窗口中点击空白行&#xff0c;…...

编程日记 2024/3/20 4:11:17

CTF 题型 SSRF攻击例题总结

CTF 题型 SSRF攻击&例题总结 文章目录 CTF 题型 SSRF攻击&例题总结Server-side Request Forgery 服务端请求伪造SSRF的利用面1 任意文件读取 前提是知道要读取的文件名2 探测内网资源3 使用gopher协议扩展攻击面Gopher协议 &#xff08;注意是70端口&#xff09;python…...

编程日记 2024/3/20 4:09:16

【Swing】Java Swing实现省市区选择编辑器

【Swing】Java Swing实现省市区选择编辑器 1.需求描述2.需求实现3.效果展示 系统&#xff1a;Win10 JDK&#xff1a;1.8.0_351 IDEA&#xff1a;2022.3.3 1.需求描述 在公司的一个 Swing 的项目上需要实现一个选择省市区的编辑器&#xff0c;这还是第一次做这种编辑器&#xf…...

编程日记 2024/3/20 4:08:15

spring suite搭建springboot操作

一、前言 有时候久了没开新项目了&#xff0c;重新开发一个新项目&#xff0c;搭建springboot的过程都有点淡忘了&#xff0c;所有温故知新。 二、搭建步骤 从0开始搭建springboot 1&#xff0e;创建work空间。步骤FileNewJava Working Set。 2.选择Java Working Set。 3.自…...

编程日记 2024/3/20 4:05:12

mysql重构

力扣题目链接 列转行 SELECT product_id, store1 store, store1 price FROM products WHERE store1 IS NOT NULL UNION SELECT product_id, store2 store, store2 price FROM products WHERE store2 IS NOT NULL UNION SELECT product_id, store3 store, store3 price FROM p…...

编程日记 2024/3/20 4:01:08

Linux用户、用户组

用户管理命令&#xff1a; 首先要先知道两个配置文件&#xff1a;/etc/group 用户组配置文件/etc/passwd 保存了所有用户的用于读取的必要信息**/etc/shadow **是 Linux 系统中用于存储用户密码信息的文件。这个文件也被称为“影子文件”&#xff0c;因为它包含了 /etc/passwd…...

编程日记 2024/3/20 4:00:07

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/7/7 9:01:16

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/7/7 10:48:47

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/7/6 1:19:36

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2025/7/6 19:34:45

【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

编程新知 2025/7/4 20:41:08

恶补电源：1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

编程新知 2025/7/6 4:16:34

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

编程新知 2025/7/6 5:23:51

解析“道作为序位生成器”的核心原理

解析“道作为序位生成器”的核心原理 以下完整展开道函数的零点调控机制&#xff0c;重点解析"道作为序位生成器"的核心原理与实现框架&#xff1a; 一、道函数的零点调控机制 1. 道作为序位生成器 道在认知坐标系$(x_{\text{物}}, y_{\text{意}}, z_{\text{文}}…...

编程新知 2025/7/7 17:08:24

大数据驱动企业决策智能化的路径与实践

&#x1f4dd;个人主页&#x1f339;&#xff1a;慌ZHANG-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 一、引言&#xff1a;数据驱动的企业竞争力重构 在这个瞬息万变的商业时代&#xff0c;“快者胜”的竞争逻辑愈发明显。企业如何在复杂环…...

编程新知 2025/7/4 21:05:43

OpenGL-什么是软OpenGL/软渲染/软光栅？

‌软OpenGL&#xff08;Software OpenGL&#xff09;‌或者软渲染指完全通过CPU模拟实现的OpenGL渲染方式&#xff08;包括几何处理、光栅化、着色等&#xff09;&#xff0c;不依赖GPU硬件加速。这种模式通常性能较低&#xff0c;但兼容性极强&#xff0c;常用于不支持硬件加速…...

编程新知 2025/7/4 16:21:35