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

Web前端-HTML

news 文章来源：https://blog.csdn.net/fdvvg/article/details/136834581 2025/1/31 1:18:59

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

操作系统系列学习——信号量的代码实现

文章目录 前言信号量的代码实现 前言 一个本硕双非的小菜鸡&#xff0c;备战24年秋招&#xff0c;计划学习操作系统并完成6.0S81&#xff0c;加油&#xff01; 本文总结自B站【哈工大】操作系统 李治军&#xff08;全32讲&#xff09; 老师课程讲的非常好&#xff0c;感谢 【哈…...

编程日记 2024/3/20 3:56:03

【Python操作基础】——变量操作

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…...

编程日记 2024/3/20 3:52:00

滑模控制算法（SMC）讲解-案例（附C代码）

目录 一、滑模控制算法的基本原理 1）滑模面（Sliding Surface）的设计 2）达到条件（Reaching Condition）...

编程日记 2024/3/20 3:50:58

Redis数据结构对象之集合对象和有序集合对象

集合对象 集合对象的编码可以是intset或者hashtable. 概述 intset编码的集合对象使用整数集合作为底层实现&#xff0c;集合对象包含的所有元素都被保存在整数集合里面。 另一方面&#xff0c;hashtable编码的集合对象使用字典作为底层实现&#xff0c;字典的每个键都是一个…...

编程日记 2024/3/20 3:49:57

不要百花齐放

javascript中数组的遍历有如下方法&#xff1a; 1、for (var i 0; i < arr.length; i) 2、for(var item of arr) 3、for(var item in arr) 4、arr.forEach 5、arr.map 6、arr.filter 7、arr.find 8、arr.findIndex 9、arr.indexOf arr.lastIndexOf 10、arr.every…...

编程日记 2024/3/20 3:46:54

使用Java JDBC连接数据库

在Java应用程序中&#xff0c;与数据库交互是一个常见的任务。Java数据库连接&#xff08;JDBC&#xff09;是一种用于在Java应用程序和数据库之间建立连接并执行SQL查询的标准API。通过JDBC&#xff0c;您可以轻松地执行各种数据库操作&#xff0c;如插入、更新、删除和查询数…...

编程日记 2024/3/20 3:36:45

阿里云2核4G4M轻量应用服务器价格165元一年

阿里云优惠活动&#xff0c;2核4G4M轻量应用服务器价格165元一年&#xff0c;4Mbps带宽下载速度峰值可达512KB/秒&#xff0c;系统盘是60GB高效云盘&#xff0c;不限制月流量&#xff0c;2核2G3M带宽轻量服务器一年87元12个月&#xff0c;在阿里云CLUB中心查看 aliyun.club 当前…...

编程日记 2024/3/20 3:35:44

连续纯合片段（runs of homozygosity, ROH）的原理

连续纯合片段&#xff08;Runs of Homozygosity, ROH&#xff09;的原理及其结果查看方式包含以下几个方面&#xff1a; 原理 定义和识别&#xff1a; ROH是指基因组中由相同祖先遗传下来的连续纯合等位基因组成的片段。它们可以通过比较个体基因组上的等位基因序列来识别。当…...

编程日记 2024/3/20 3:32:41

UCORE 清华大学os实验 lab0 环境配置

打卡 lab 0 &#xff1a; 环境配置 &#xff1a; 首先在ubt 上的环境&#xff0c;可以用虚拟机或者直接在windows 上面配置 然后需要很多工具 如 qemu gdb cmake git 就是中间犯了错误&#xff0c;误以为下载的安装包&#xff0c;一直解压不掉&#xff0c;结果用gpt 检查 结…...

编程日记 2024/3/20 3:31:40

linux 安装常用软件

文件传输工具 sudo yum install –y lrzsz vim编辑器 sudo yum install -y vimDNS 查询 sudo yum install bind-utils用法可以参考文章 《掌握 DNS 查询技巧&#xff0c;dig 命令基本用法》 net-tools包 yum install net-tools -y简单用法&#xff1a; # 查看端口占用情况…...

编程日记 2024/3/20 3:28:37

网站的通知栏一般用什么控件做/济南优化网站的哪家好

之前一直用的是httpclient&#xff0c;今天okhttp简单封装了一下&#xff0c;主要有三个方法 发送get请求发送post请求&#xff0c;请求体是json字符串发送post请求&#xff0c;可以什么都不传&#xff0c;可以是简单的表单提交&#xff0c;也可以是带文件上传的表单提交 post…...

编程日记 2025/1/31 0:45:07

桂林小学网站建设/win7系统优化软件

前言&#xff1a; 接续上一课代码&#xff0c;继续新增功能 第一课&#xff1a;点击本链接 一、窗口布局 二、细节功能 ①工具栏 ②显示隐藏列 ③打印预览 ④导出表格 ⑤双击事件 二、演示 例子下载&#xff1a;点击本链接...

编程日记 2025/1/30 14:24:10

网站开发技术文档/网站seo基础优化

【版权申明】未经博主同意&#xff0c;谢绝转载&#xff01;&#xff08;请尊重原创&#xff0c;博主保留追究权&#xff09; http://blog.csdn.net/javazejian/article/details/61614366 出自【zejian的博客】 关联文章: MySQL的初次见面礼基础实战篇 MySQL的进阶实战篇 …...

编程日记 2025/1/30 13:37:55

商务网站建设的基本步骤/模板建站教程

愚人节&#xff08;April Fools Day 或 All Fools Day&#xff09;也称万愚节、幽默节&#xff0c;愚人节。节期为公历4月1日&#xff0c;是从19世纪开始在西方兴起流行的民间节日&#xff0c;并未被任何国家认定为法定节日。在这一天人们以各种方式互相欺骗和捉弄&#xff0c;…...

编程日记 2025/1/30 12:44:01

室内设计网站平面案例/电工培训内容

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼宇宙最黑西工大啊 如果你今年打算考西工大8院 请仔细阅读一下文字。如果你是外校生双非 想考电通 我的建议是你换个学校吧。首先这个学校复试完 基本上是34所你最晚的。复试三天 等你复试完 基本上没有调剂的学校了。电通一共招收5…...

编程日记 2025/1/30 12:21:08

网站线框图软件/快速排名提升

我在将不同的缓冲区大小插入到本地SQLiteDB中时发现&#xff0c;当缓冲区大小为10,000时&#xff0c;插入10,000,000行数据需要花费近8分钟的时间。换句话说&#xff0c;它需要1,000次写入来存储所有内容。8分钟存储10,000,000个似乎太长了(或者是&#xff1f;)可以优化以下任何…...

编程日记 2025/1/30 10:13:25