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

WEB前端-2

news 2026/2/7 10:17:33

目录

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转义符

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

image-20250108155218806

h5提供的新标签

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

标签名称作用
header定义页面的顶部（页眉）内容
article主要是用来表示文章内容的
section于对网站或者应用程序页面上的内容进行分块
nav用作页面导航的链接组
aside当前页面或文章的附属信息部分
footer上层父级内容区块或是一个根区块的脚注
hgrouphgroup元素是将标题及其子标题进行分组的元素。hgroup 元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其子元素算一组
addressaddress元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮件、真实地址、电话号码等
figure网页上的一块独立元，素在一个figure元素中只能放置一个figcaption元素，表示该figure元素的标题
figcaptionfigure元素块中的标题
detailsdetails元素主要用来列表一些关键的的元素，在它中，我们使用summary元素作为details元素的标题，如果我们在details元素中不使用summary元素，则默认出现“显示详细信息”。
summary作为details元素的标题
mark标注或者高亮一些我们需要的关键字词
progress表示当前的完成进度情况
metermeter元素有六个属性，value表示值，min表示最小值，max表示最大值，low表示下限，high表示上限，optimum表示最佳值
cite表示作品或文章中的标题
smallHTML5中，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>更多&gt;&gt;</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&#xff1a;豆瓣电影】 【源码】 【例4&#xff1a;登录注册】 【源码】 【例5&#xff1a;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项目创建及结构说明

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

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

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

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

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

Idea日志乱码

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

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

tk GMV MAX素材范围投放指南

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

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

TANGO - 数字人全身动作生成

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

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

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

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

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

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

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

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

单元测试MockitoExtension和SpringExtension

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

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

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

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

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

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

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

编程日记 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&#xff1a;优化数据库性能的核心 引言 在关系型数据库管理系统&#xff08;RDBMS&#xff09;中&#xff0c;磁盘I/O通常是性能瓶颈之一。为了缓解这个问题&#xff0c;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共同存在&#xff0c;其中HTML代码用于展示静态的内容&#xff0c;java代码用来展示动态的内容。 1.1.2. 为什么出现JSP技术 19…...

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

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

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

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

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

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

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

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2026/1/14 22:12:47

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2026/1/29 5:29:57

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2026/2/1 6:50:07

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2026/2/6 11:54:58

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

编程新知 2025/9/5 19:04:58

倒装芯片凸点成型工艺

UBM&#xff08;Under Bump Metallization&#xff09;与Bump&#xff08;焊球&#xff09;形成工艺流程。我们可以将整张流程图分为三大阶段来理解&#xff1a; &#x1f527; 一、UBM&#xff08;Under Bump Metallization&#xff09;工艺流程&#xff08;黄色区域&#xff…...

编程新知 2026/2/6 22:46:58