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

WEB前端-2

news 2026/4/6 23:54:46

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

Spring Security 2026 最佳实践：构建安全的 Java 应用

Spring Security 2026 最佳实践：构建安全的 Java 应用别叫我大神，叫我 Alex 就好。一、引言大家好，我是 Alex。Spring Security 作为 Java 生态中最流行的安全框架，一直以其强大的功能和灵活的配置而受到开发者的喜爱。随着 Spri…...

编程新知 2026/4/6 23:36:32

零信任架构下的企业数据安全防护体系设计与实践

1. 零信任架构：企业数据安全的新范式过去十年我见过太多企业安全事件，根源往往在于传统边界防护的失效。某次给金融客户做安全评估时发现，他们花重金部署的防火墙就像个筛子——攻击者通过一个普通员工的钓鱼邮件就长驱直入，最终…...

编程新知 2026/4/6 23:20:06

OpenClaw从入门到应用——频道：IRC

通过OpenClaw实现副业收入：《OpenClaw赚钱实录：从“养龙虾“到可持续变现的实践指南》 Quick start 在 ~/.openclaw/openclaw.json 中启用 IRC 配置。至少设置以下内容： theme{"theme":{"light":"min-light"…...

编程新知 2026/4/6 21:15:48

终极Nintendo Switch文件解析工具：NSTool完整使用指南

终极Nintendo Switch文件解析工具：NSTool完整使用指南【免费下载链接】nstool General purpose read/extract tool for Nintendo Switch file formats. 项目地址: https://gitcode.com/gh_mirrors/ns/nstool Nintendo Switch Tool（简称NSTool&am…...

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

Oh-My-Posh 多会话管理终极指南：在不同终端中保持一致的完美体验

Oh-My-Posh 多会话管理终极指南：在不同终端中保持一致的完美体验【免费下载链接】oh-my-posh2 A prompt theming engine for Powershell 项目地址: https://gitcode.com/gh_mirrors/oh/oh-my-posh2 Oh-My-Posh 是一款强大的 PowerShell 提示符主题引擎&…...

编程新知 2026/4/6 20:57:34

UDOP-large实战教程：Describe the layout of this document. Prompt深度解析

UDOP-large实战教程：Describe the layout of this document. Prompt深度解析 1. 引言：当文档“开口说话” 想象一下，你面前有一份复杂的英文研究报告、一张布满数字的发票，或者一份结构严谨的表格。传统上，你需要用眼…...

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

为什么一个非常大的数的导数是一个非常小的数？

“数”本身没有导数，因为导数是针对函数的（描述函数在某点的变化率或斜率）。如果你指的是某个函数在自变量很大时，函数值（y）变得“非常大”，但其导数（y）却“非常小”&…...

编程新知 2026/4/6 19:27:01

OpenClaw个性化设置：定制Kimi-VL-A3B-Thinking的交互风格与输出格式

OpenClaw个性化设置：定制Kimi-VL-A3B-Thinking的交互风格与输出格式 1. 为什么需要个性化设置？ 第一次用OpenClaw对接Kimi-VL-A3B-Thinking模型时，我发现默认的交互方式总有些"不对味"。模型回复要么过于冗长，要么格式…...

编程新知 2026/4/6 16:45:11

迅为RK3588S开发板Android13系统外设功能全解析

1. RK3588S开发板与Android13系统初探作为一款面向边缘计算场景的高性能开发平台，迅为RK3588S开发板搭载Rockchip旗舰级处理器，四核Cortex-A76四核Cortex-A55架构设计，配合Mali-G610 MP4 GPU，在Android13系统上展现出强劲的多媒体…...

编程新知 2026/4/6 16:12:50

基于springboot+vue房屋拆迁管理系统hx0514Z1A1

文章目录详细视频演示技术介绍功能介绍核心代码系统效果图源码获取详细视频演示文章底部名片，获取项目的完整演示视频，免费解答技术疑问技术介绍开发语言：Java 框架：ssm JDK版本：JDK1.8 服务器：tomca…...

编程新知 2026/4/6 15:42:36

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

语义化标签

列表标签

表单标签

form标签

input标签

select标签

textarea标签

html转义符

h5提供的新标签

【例3：豆瓣电影】

【源码】

【例4：登录注册】

【源码】

【例5：QQ注册】

【源码】

相关文章：