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

WEB前端-2

news 2025/11/9 2:05:09

HTML-常见的网页标签-分类2

语义化标签

列表标签

表单标签

form标签

input标签

select标签

textarea标签

html转义符

h5提供的新标签

【例3：豆瓣电影】

【源码】

【例4：登录注册】

【源码】

【例5：QQ注册】

【源码】

HTML-常见的网页标签-分类2

语义化标签

H5提出的新特性，语义化的概念——正确的标签干正确的事。

定义大量望名而知其意标签来包裹内容，如地址，不在使用div，而是使用address，导航，也不再使用div，而是nav，文章使用article。

列表标签

有序列表：ol；li
无序列表：ul；li
数据列表：dl；dt；dd

表单标签

表单标签，是html提供用于服务器端和客户端进行数据交互的标签。

form标签

form标签：表单的总标签，其他表单必须包裹在这个标签里面。

form标签常见属性：action、method、entype等等。

action：填写一个URL，表示需要提交的服务器地址

method：默认是get，表示提交的HTTP请求的方式

entype：

input标签

文本域标签，是一个文本域，需要注意的是，input标签存在大量的类型。

select标签

下拉选择框

textarea标签

文本框标签，可以编写更多的文字，如果需要带格式，则一般将其渲染为一个富文本框。

html转义符

页面上输入>、< ，考虑它会出问题吗？

h5提供的新标签

HTML5是HTML从传统的web端开始兼容移动互联网的重要标志，h5为HTML提供了大量好用的标签，如布局使用的三个标签header、section、footer标签；用来播放视频和音频的多媒体标签video、audio标签等，参考表3-3。

标签名称	作用
header	定义页面的顶部（页眉）内容
article	主要是用来表示文章内容的
section	于对网站或者应用程序页面上的内容进行分块
nav	用作页面导航的链接组
aside	当前页面或文章的附属信息部分
footer	上层父级内容区块或是一个根区块的脚注
hgroup	hgroup元素是将标题及其子标题进行分组的元素。hgroup 元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组
address	address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮件、真实地址、电话号码等
figure	网页上的一块独立元，素在一个figure元素中只能放置一个figcaption元素，表示该figure元素的标题
figcaption	figure元素块中的标题
details	details元素主要用来列表一些关键的的元素，在它中，我们使用summary元素作为details元素的标题，如果我们在details元素中不使用summary元素，则默认出现“显示详细信息”。
summary	作为details元素的标题
mark	标注或者高亮一些我们需要的关键字词
progress	表示当前的完成进度情况
meter	meter元素有六个属性，value表示值，min表示最小值，max表示最大值，low表示下限，high表示上限，optimum表示最佳值
cite	表示作品或文章中的标题
small	HTML5中，small元素被重新定义了，small通常标签与正文无关的文字，内嵌在页面上，如标注版权信息，网站备案等
canvas	画布标签，用来在页面上画图案

【例3：豆瓣电影】

【源码】

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>豆瓣电影</title>

</head>

<body>

<h1>热门电影板块</h1>

<hr>

<table width="1000">

<tr>

<td><b>最近热门电影</b></td>

<td>热门</td>

<td>最新</td>

<td>豆瓣高分</td>

<td>冷门佳片</td>

<td>华语</td>

<td>欧美</td>

<td>韩国</td>

<td>日本</td>

<td width="200"></td>

<td>更多>></td>

</tr>

</table>

<hr/>

<table>

<tr>

<td><img width="250"height="300"Src="https://tse4-mm.cn.bing.net/th/id/OIP-C.f48a0E_YfANBD2QziJpOrQHaK-?rs=1&pid=ImgDetMain" alt="图片"></td>

<td><img width="250"height="300"src="https://tse2-mm.cn.bing.net/th/id/OIP-C.zDBsgzeMjdSliZT4Ecb4LQAAAA?w=155&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="图片"></td>

<td><img width="250"height="300"src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Hrb896AJahb2TX7r3gLCYwHaK-?w=156&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="图片"></td>

<td><img width="250"height="300"src="https://tse2-mm.cn.bing.net/th/id/OIP-C.OyP6k0F6crC-HnkvFytIAgAAAA?w=156&h=186&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="图片"></td>

</tr>

<tr>

<td><p>猜火车 8.1</p></td>

<td>贝尔科实验 6.0</td>

<td>加州公路巡警 6.8</td>

<td>歌声不绝 6.3</td>

</tr>

<tr>

<td><img width="250"height="300"src="https://tse2-mm.cn.bing.net/th/id/OIP-C.DMTP6nlSdLyD0zgrcy7PyAHaKb?w=156&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="图片"></td>

<td><img width="250"height="300"src="https://puui.qpic.cn/vcover_vt_pic/0/l9vxrwfdjcw1q4g1567073958/0" alt="图片"></td>

<td><img width="250"height="300"src="https://tse3-mm.cn.bing.net/th/id/OIP-C.1NO_xxRf65ckIKUosTrjOwHaKg?w=156&h=187&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="图片"></td>

<td><img width="250"height="300"src="https://n.sinaimg.cn/ent/transform/20170301/uc0J-fyavvth8465728.png" alt="图片"></td>

</tr>

<tr>

<td><p>明日的我与昨日的我</p></td>

<td>速度与激情8</td>

<td>急速特工</td>

<td>金刚狼3:殊死一战</td>

</tr>

</table>

</body>

</html>

【例4：登录注册】

【源码】

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>登录注册</title>

</head>

<body>

<form name="form1"method="post"action="">

<table width="300" cellpadding="2"cellspacing="1">

<tr>

<td colspan="2" align="center"bgcolor="grey">用户注册</td>

</tr>

<tr>

<td align="right"bgcolor="grey">用户名</td>

<td bgcolor="grey"><input type="text" name="username" id=""></td>

</tr>

<tr>

<td align="right"bgcolor="grey">密码</td>

<td bgcolor="grey"><input type="text" name="password" id=""></td>

</tr>

<tr>

<td align="right"bgcolor="grey">性别</td>

<td bgcolor="grey"><input type="radio" name="sex" value="男">男

<input type="radio" name="sex" value="女"checked>女</td>

</tr>

<tr>

<td align="right"bgcolor="grey">爱好</td>

<td bgcolor="grey"><input type="checkbox" name="hobby" value="checkbox">写作

<input type="checkbox" name="hobby" value="checkbox">听音乐

<input type="checkbox" name="hobby" value="checkbox">体育</td>

</tr>

<tr>

<td align="right"bgcolor="grey">省份</td>

<td bgcolor="grey"><select name="province" id="">

<option value="shaanxi"selected>陕西省</option>

<option value="shanxi"selected>山西省</option>

</select></td>

</tr>

<tr>

<td align="right"bgcolor="grey">自我介绍</td>

<td bgcolor="grey"><textarea name="intro" id="intro"></textarea></td>

</tr>

<tr>

<td colspan="2"align="center"bgcolor="grey"><input type="submit" name="send" value="提交">

<input type="reset" name="reset" id="重置"></td>

</tr>

</table>

</form>

</body>

</html>

【例5：QQ注册】

【源码】

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>QQ注册</title>

</head>

<body>

<form name="form1"method="post"action="">

<table border="0"width="850" height="700"cellpadding="2"cellspacing="1">

<tr>

<td wight="50"><img width="200"height="700" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.5eCJzLSQHuxwzuV2e7-H3QHaHa?w=151&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" alt="图片"></td>

<td align="light"><h1>欢迎注册QQ</h1>

<p>每一天，乐在沟通。

<a href="#">免费靓号</a></p>

<form action="">

<input type="text" name="昵称"placeholder="昵称" id=""><br>

<input type="text" name="密码" placeholder="密码"id=""><br>

<select >

<option value="+86">+86</option>

</select>

<input type="手机号码" name="" id=""><br>

<small style="color:grey">可通过该手机号找回密码</small>

<input bgcolor="blue" align="center" type="submit" value="立即注册" id=""><br>

<input type="checkbox" name="" checked><small style="color:grey">我已阅读并同意相关服务条款和隐私政策</small>

</form>

</td>

<td valign="top"align="right">

<p><img align="light"width="30"height="20"src="https://ts1.cn.mm.bing.net/th/id/R-C.9f31180809b9e41bd5f40b2d18c00b6e?rik=lw%2b5%2bf9VTk55CA&riu=http%3a%2f%2fwiki.connect.qq.com%

2fwp-content%2fuploads%2f2013%2f10%2f01_qq_logo-1024x491.png&ehk=r4yiEPgSvOVGDuvvC6OS40GYTdPNqyGpJhbhnoxaWi8%3d&risl=&pid=ImgRaw&r=0" alt="图片">

<select>

<option value="zh-CN">简体中文</option>

<option value="en">English</option>

<option value="zh-TW">繁体中文</option>

</select>意见反馈</p>

</td>

</tr>

</table>

</form>

WEB前端-2

目录 HTML-常见的网页标签-分类2 语义化标签列表标签表单标签 form标签 input标签 select标签 textarea标签 html转义符 h5提供的新标签【例3：豆瓣电影】【源码】【例4：登录注册】【源码】【例5：QQ注册】【源码】 H…...

编程日记 2025/1/10 17:27:18

高斯混合模型 (Gaussian Mixture Model, GMM) 算法详解与PyTorch实现

高斯混合模型 (Gaussian Mixture Model, GMM) 算法详解与PyTorch实现目录高斯混合模型 (Gaussian Mixture Model, GMM) 算法详解与PyTorch实现1. 高斯混合模型 (GMM) 算法概述1.1 高斯分布1.2 GMM的优势2. GMM的核心技术2.1 模型定义2.2 参数估计2.3 损失函数3. PyTorch实现G…...

编程日记 2025/1/10 17:25:16

web作业

作业一 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>Document</title> </head&g…...

编程日记 2025/1/10 17:23:14

Tauri教程-基础篇-第一节 Tauri项目创建及结构说明

“如果结果不如你所愿，就在尘埃落定前奋力一搏。”——《夏目友人帐》 “有些事不是看到了希望才去坚持，而是因为坚持才会看到希望。”——《十宗罪》 “维持现状意味着空耗你的努力和生命。”——纪伯伦 Tauri 技术教程 * 第四章 Tauri的基础教程第一节…...

编程日记 2025/1/10 17:20:10

计算机网络之---物理层标准与协议

常见的物理层标准 1. IEEE 802 标准 IEEE 802 是一系列定义局域网和城域网通信协议的标准，其中许多标准涉及到物理层的技术细节： IEEE 802.3 (Ethernet)：定义了以太网的物理层规范，规定了如何通过电缆（例如同轴电缆…...

编程日记 2025/1/10 17:18:06

Idea日志乱码

问题描述前提：本人使用windows Idea运行sh文件，指定了utf-8编码，但是运行过程中还是存在中文乱码 Idea的相关配置都已经调整字体调整为雅黑文件编码均调整为UTF-8 调整Idea配置文件但是还是存在乱码，既然Idea相关配置已经…...

编程日记 2025/1/10 17:15:02

tk GMV MAX素材范围投放指南

Product GMy Max素材范围说明 Product GMy Max能自动获取带有相关商品锚点链接（无论是单个锚点还是多个锚点）的视频，并将其用于推广特定商品的广告素材，前提是这些视频已经获得广告授权。然而，请注意，多个…...

编程日记 2025/1/10 17:14:01

TANGO - 数字人全身动作生成

文章目录一、关于 TANGO演示视频（YouTube）📝发布计划二、⚒️安装克隆存储库构建环境三、🚀训练和推理1、推理2、为自定义字符创建图形一、关于 TANGO TANGO 是具有分层音频运动嵌入和扩散插值的共语音手势视频再现由东…...

编程日记 2025/1/10 17:12:55

springboot集成整合工作流，activiti审批流，整合实际案例，流程图设计，流程自定义，表单配置自定义，代码demo流程

前言 activiti工作流引擎项目，企业erp、oa、hr、crm等企事业办公系统轻松落地，一套完整并且实际运用在多套项目中的案例，满足日常业务流程审批需求。一、项目形式 springbootvueactiviti集成了activiti在线编辑器，流行的前后端…...

编程日记 2025/1/10 17:10:53

Windows 10 ARM工控主板连接I2S音频芯片

在Windows工控主板应用中，音频功能是一项基本的需求，USB声卡在x86/x64 Windows系统上就可直接免驱使用，但这些USB声卡通常不提供ARM上的Windows系统驱动。本文将介绍如何利用安装在ARM上的Windows工控主板——ESM8400的I2S接口、连接WM8960音…...

编程日记 2025/1/10 17:09:51

单元测试MockitoExtension和SpringExtension

1. MockitoExtension MockitoExtension 是 JUnit 5 提供的一个扩展，用于支持 Mockito 的集成。它可以自动初始化标记为 Mock、InjectMocks 等的 Mockito 对象，而不需要显式调用 MockitoAnnotations.initMocks(this)。主要特点: 自动初始化 Mock、Spy…...

编程日记 2025/1/10 17:08:51

网络安全 | WAF防护开通流程与技术原理详解

关注：CodingTechWork 引言随着互联网安全形势的日益严峻，Web应用防火墙（WAF, Web Application Firewall）逐渐成为网站和应用的标准防护措施。WAF能够有效识别和防止如SQL注入、跨站脚本攻击（XSS）、恶意流…...

编程日记 2025/1/10 17:06:49

模型断裂点理论(风险控制)

系列文章分享模型，了解更多👉 模型_思维模型目录。设置小损失，防止大风险。 1 断裂点理论的应用 1.1 电路系统中的保险丝应用背景介绍： 在工程学中，电路系统是现代科技中不可或缺的一部分，广泛应用于各…...

编程日记 2025/1/10 17:05:48

02.MPLS动态LSP配置实验

MPLS动态LSP配置实验 MPLS动态LSP配置实验基本配置MPLS部分查看LDP会话基本信息查看详细信息查看MPLS动态LSP配置实验基本配置接口地址和OSPF配置，省略！全网互通！注意：8.8.8.8和9.9.9.9也要宣告！ MPLS部分 [ar1]mpls lsr-id 1.1.1.1 [ar1]mpls Info: Mpls starting,…...

编程日记 2025/1/10 17:04:47

MySQL 中的Buffer Pool

深入解析 MySQL Buffer Pool：优化数据库性能的核心引言在关系型数据库管理系统（RDBMS）中，磁盘I/O通常是性能瓶颈之一。为了缓解这个问题，MySQL的InnoDB存储引擎引入了Buffer Pool这一概念。Buffer Pool作为内存中的…...

编程日记 2025/1/10 17:03:46

修复微pe系统uefi引导损坏windows failed to start...

打开微pe,点右下角生成iso镜像再打开iso镜像,把里面所有文件复制到微pe启动盘的EFI分区(使用diskgenius才能看到该分区) 虚拟机启动测试...

编程日记 2025/1/10 17:02:45

【Vue3中使用crypto-js】crypto-js加密解密用法

目录 1、安装crypto2、创建crypto.js文件3、在main.js主文件中进行引用4、页面中进行使用5、实现效果展示6、加密模式解析以及iv参数使用 1、安装crypto npm install crypto-js 如果是在Typescript版本需要再安装 npm install --save types/crypto-js2、创建crypto.js文件注…...

编程日记 2025/1/10 16:59:41

JavaWeb开发（九）JSP技术

1. JavaWeb JSP技术 1.1. JSP简介 1.1.1. 什么是JSP JSP全名为Java Server Page 是为了简化servlet的工作而出现的替代品。在JSP中java代码与HTML共同存在，其中HTML代码用于展示静态的内容，java代码用来展示动态的内容。 1.1.2. 为什么出现JSP技术 19…...

编程日记 2025/1/10 16:56:38

PADS Lyout布局布线实战技巧：布线优化及解决碎铜问题

1、通过加过孔通过过孔复制复制粘贴也可以选择网络，选择右键，添加过孔来。在一些孤铜的地方加过孔，加不了过孔的情况下，怎么办？ 2、通过挖掉，不让铜在孤零零的地方。右键，选择矩形&a…...

编程日记 2025/1/10 16:55:37

上下游服务间解耦的技术与管理

一、解耦为何至关重要在当今软件研发的复杂生态中，耦合问题如影随形，困扰着众多开发者与企业。当多个模块、系统或团队紧密交织，相互依赖程度不断攀升，仿佛一张错综复杂的网，牵一发而动全身。就拿电商系统来说&#…...

编程日记 2025/1/10 16:54:36

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层将题目图片经过超分、去噪、倾斜校正后，分别用…...

编程新知 2025/11/8 12:49:24

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎（Physics Engine） 物理引擎是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于游戏开发、动画制作、虚…...

编程新知 2025/11/7 19:49:42

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述上一节对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/11/7 21:03:40

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式：数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本模型并行：将模型分割到不同设备，每个设备处理部分模型计算现代大模型训练通常结合…...

编程新知 2025/11/4 22:16:08

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/10/29 9:58:23

蓝桥杯冶炼金属

原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V，是一个正整数，表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/10/31 23:08:41

Ubuntu Cursor升级成v1.0

0. 当前版本低使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...

编程新知 2025/11/7 19:15:51

uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）

UniApp 集成腾讯云 IM 富媒体消息全攻略（地理位置/文件） 一、功能实现原理腾讯云 IM 通过消息扩展机制支持富媒体类型，核心实现方式： 标准消息类型：直接使用 SDK 内置类型（文件、图片等）自…...

编程新知 2025/10/25 5:53:05

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机，交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机电脑系统信息，系统版本：Ubuntu22.04.5 LTS；内核版本…...

编程新知 2025/11/8 18:39:14

HTML-常见的网页标签-分类2

语义化标签

列表标签

表单标签

form标签

input标签

select标签

textarea标签

html转义符

h5提供的新标签

【例3：豆瓣电影】

【源码】

【例4：登录注册】

【源码】

【例5：QQ注册】

【源码】

相关文章：