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

WEB前端-2

news 2025/9/18 6:38:16

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

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误，它们的含义、原因和解决方法都有显著区别。以下是详细对比： 1. HTTP 406 (Not Acceptable) 含义： 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/9/17 5:38:47

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/9/13 17:44:01

pam_env.so模块配置解析

在PAM（Pluggable Authentication Modules）配置中， /etc/pam.d/su 文件相关配置含义如下： 配置解析 auth required pam_env.so1. 字段分解字段值说明模块类型auth认证类模块，负责验证用户身份&am…...

编程新知 2025/8/21 21:33:01

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...

编程新知 2025/9/11 18:47:05

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...

编程新知 2025/8/22 22:34:43

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日，2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席，并作《智能体在安全领域的应用实践》主题演讲，分享了在智能体在安全领域的突破性实践。他指出，百度通过将安全能力…...

编程新知 2025/8/26 15:36:54

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。另一种思路：将增量判…...

编程新知 2025/9/7 8:50:46

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因常见解决方法更好的解决方法设计精妙之处登录续期登录续期常见实现方式特…...

编程新知 2025/9/17 22:26:02

Python ROS2【机器人中间件框架】简介

销量过万TEEIS德国护膝夏天用薄款优惠券冠生园百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...

编程新知 2025/6/25 4:41:54

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

语义化标签

列表标签

表单标签

form标签

input标签

select标签

textarea标签

html转义符

h5提供的新标签

【例3：豆瓣电影】

【源码】

【例4：登录注册】

【源码】

【例5：QQ注册】

【源码】

相关文章：