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

WEB前端-2

news 2025/7/12 15:50:21

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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...

编程新知 2025/6/17 7:15:49

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。一、遭遇攻击的紧急应…...

编程新知 2025/7/7 12:11:39

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...

编程新知 2025/7/8 20:58:51

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/7/10 11:56:00

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介对于社交类软件的功能，我们需要对它的功能特点进行分析： 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具： mysql：关系型数据库&am…...

编程新知 2025/7/12 6:34:01

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/7/4 21:35:34

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。可以把它想象成你的 AI 模型和想要使用它…...

编程新知 2025/7/9 11:27:28

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据准备一个容器,例如: …...

编程新知 2025/7/11 17:58:52

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...

编程新知 2025/7/11 5:45:38

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中，我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道，它们在并发编程中各具特点和应用场景。一、通道的基本分类类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/6/21 5:00:15

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

语义化标签

列表标签

表单标签

form标签

input标签

select标签

textarea标签

html转义符

h5提供的新标签

【例3：豆瓣电影】

【源码】

【例4：登录注册】

【源码】

【例5：QQ注册】

【源码】

相关文章：