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

Web前端-HTML

news 2025/11/5 19:18:09

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

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/10/31 5:01:03

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/11/4 1:39:10

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/10/26 22:44:53

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/10/28 0:36:19

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/10/30 5:11:46

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/11/3 2:07:14

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/10/23 14:10:35

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46