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

WEB前端-2

news 2026/4/7 1:25: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

GeekDoc

GeekDoc 中文系列教程是一个庞大且组织良好的技术文档集合，它并非单一教程，而是一个开源文档翻译与整理项目，旨在将优秀的技术文档和教程翻译成中文，并按技术领域进行分类。其内容广泛覆盖了信息技术领域的多个核心方向&#xff0…...

编程新知 2026/4/7 1:13:52

ESP32轻量libcurl移植：HTTP/HTTPS客户端开发指南

1. 项目概述libcurl-esp32是一个专为 ESP32 平台定制的轻量化 libcurl 移植库，其核心目标是在 PlatformIO 构建环境下，为嵌入式固件开发者提供标准curl/curl.h头文件接口及对应运行时功能。该库并非完整移植上游 libcurl 的全部特性（如 FTP、…...

编程新知 2026/4/7 0:49:34

Switch破解新选择：大气层系统稳定版完整安装与优化指南

Switch破解新选择：大气层系统稳定版完整安装与优化指南【免费下载链接】Atmosphere-stable 大气层整合包系统稳定版项目地址: https://gitcode.com/gh_mirrors/at/Atmosphere-stable 想要让你的Switch焕发新生，体验自制软件和游戏优化的无限可能…...

编程新知 2026/4/7 0:43:33

XUnity.AutoTranslator：为Unity游戏开启多语言世界的智能钥匙

XUnity.AutoTranslator：为Unity游戏开启多语言世界的智能钥匙【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 当游戏语言成为障碍：一个翻译插件的诞生背景你是否曾经遇到过这样的…...

编程新知 2026/4/7 0:23:28

【电路设计实战】BUCK降压电源：从原理到PCB布局的降噪与效率优化

1. BUCK降压电路的核心原理 BUCK降压电路作为开关电源中最基础的拓扑结构之一，其工作原理看似简单却蕴含着精妙的能量转换机制。我第一次接触BUCK电路时，被它高达90%以上的转换效率所震撼 - 这可比传统的线性稳压器强太多了。那么它是如何做到的呢&#…...

编程新知 2026/4/6 23:30:31

Ubuntu 20.04下Python调用海康SDK，解决FastAPI与libssl.so.1.1冲突的完整避坑指南

Ubuntu 20.04下Python调用海康SDK与FastAPI的SSL冲突深度解析与工程实践在物联网和安防系统开发领域，将海康威视设备接入Python后端服务已成为常见需求。但当开发者尝试在Ubuntu 20.04上使用FastAPI框架集成海康SDK时，往往会遭遇一个令人困惑的陷阱——…...

编程新知 2026/4/6 21:09:42

终极指南：如何使用snabbt.js创建惊艳的Web动画效果

终极指南：如何使用snabbt.js创建惊艳的Web动画效果【免费下载链接】snabbt.js Fast animations with javascript and CSS transforms 项目地址: https://gitcode.com/gh_mirrors/sn/snabbt.js 在当今的Web开发领域，snabbt.js作为一款极简主义的J…...

编程新知 2026/4/6 20:51:33

pymoo实战教程：从零开始构建你的第一个多目标优化模型【免费下载链接】pymoo NSGA2, NSGA3, R-NSGA3, MOEAD, Genetic Algorithms (GA), Differential Evolution (DE), CMAES, PSO 项目地址: https://gitcode.com/gh_mirrors/py/pymoo pymoo是一个强大的Pyt…...

编程新知 2026/4/6 20:25:20

利用快马ai快速原型ventoy图形化工具，三步制作多系统启动u盘

利用快马AI快速原型Ventoy图形化工具，三步制作多系统启动U盘最近在折腾多系统启动盘，发现Ventoy这个开源工具确实好用——直接把ISO镜像扔进U盘就能启动，再也不用反复格式化。但命令行操作对新手不太友好，于是想做个图形化工具。…...

编程新知 2026/4/6 20:21:18

OpenClaw本地知识库：Qwen3.5-9B-AWQ-4bit自动索引图片资料

OpenClaw本地知识库：Qwen3.5-9B-AWQ-4bit自动索引图片资料 1. 为什么需要自动化图片管理作为一个长期囤积各类截图、设计稿和参考图的用户，我的"图片黑洞"问题越来越严重——3TB的硬盘里散落着上万张未分类的图片。传统方案要么依赖手动打标…...

编程新知 2026/4/6 19:04:45

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

语义化标签

列表标签

表单标签

form标签

input标签

select标签

textarea标签

html转义符

h5提供的新标签

【例3：豆瓣电影】

【源码】

【例4：登录注册】

【源码】

【例5：QQ注册】

【源码】

相关文章：