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

WEB前端-2

news 2026/2/11 0:11:07

目录

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

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2026/2/1 3:12:03

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2026/2/6 1:00:00

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2026/1/26 4:52:47

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/26 3:45:28

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

编程新知 2026/2/6 4:24:06

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

编程新知 2026/1/1 23:11:45

数据结构：递归的种类（Types of Recursion）

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

编程新知 2026/2/7 2:25:07