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

【Web开发】深度学习HTML(超详细,一篇就够了)

news 2025/9/9 8:03:29

在这里插入图片描述

💓 博客主页：从零开始的-CodeNinja之路
⏩ 收录文章：【Web开发】深度学习html(超详细,一篇就够了)
🎉欢迎大家点赞👍评论📝收藏⭐文章

HTML
- 1. HTML基础
- - - 1.1 什么是HTML
    - 1.2 认识HTML标签
    - 1.3 HTML文件基本结构
    - 1.4 标签层次结构
- 2. HTML常见标签
- - - 2.1 段落标签:p
    - 2.3. 换行标签:br
    - 2.4 图片标签:img
    - 2.5 超链接标签:a
    - 2.6 select标签
- 3. 表格标签
- 4. 表单标签
- - - 4.1 form标签
    - 4.2 input标签
- 5. 无语义标签:div&span
- 6. 综合练习:用户注册

HTML

1. HTML基础

1.1 什么是HTML

HTML(Hyper Text Markup Language),超⽂本标记语言
超文本:比文本要强大.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包
含图片,音频,或者自已经审阅过它的学者所加的评注、补充或脚注等等.
标记语言:由标签构成的语言

1.2 认识HTML标签

HTML代码是由"标签"构成的.

标签名(body放到<>中
大部分标签成对出现.<> 为开始标签,</> 为结束标签.
少数标签只有开始标签,称为"单标签".
开始标签和结束标签之间,写的是标签的内容.
开始标签中可能会带有"属性".id属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).

1.3 HTML文件基本结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

html标签是整个html⽂件的根标签(最顶层标签)
head标签中写页面的属性.
body标签中写的是页面上显⽰的内容
title标签中写的是页面的标题.

细节解释:(了解即可,不必深究)

称为DTD(⽂档类型定义),描述当前的⽂件是⼀个HTML5的⽂件.
其中lang属性表⽰当前页面是⼀个"英语页面".这⾥暂时不用管
描述⻚⾯的字符编码⽅式.没有这⼀⾏可能会导致中文乱码.
name=“viewport” 其中viewport指的是设备的屏幕上能用来显示我们的网页的那⼀块区域.
content=“width=device-width, initial-scale=1.0” 在设置可视区和设备宽度等宽,并设置初始缩放为不缩放.(这个属性对于移动端开发更重要⼀些).

1.4 标签层次结构

标签之间的结构关系,构成了⼀个DOM树
DOM是Document Object Mode(文档对象模型)的缩写
在这里插入图片描述
其中:

head和body是html的子标签(html就是head和body的⽗标签)
title是head的⼦标签.head是title的父标签.
head和body之间是兄弟关系.

可以使用chrome的开发者⼯具查看页面的结构.
F12或者右键审查元素,开启开发者⼯具,切换到Elements标签,就可以看到页面结构细节.

2. HTML常见标签

标题标签h1-h6
有六个,从h1-h6.数字越大,则字体越小.

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>

结果如下: 在这里插入图片描述

2.1 段落标签:p

在HTML中,段落,换行符,空格都会失效,如果需要分成段落,需要使用专门的标签
• p标签表示⼀个段落.

<p>这是⼀个段落</p>
<p>这是⼀个段落</p>

注意:

p标签描述的段落,前⾯没有缩进.(未来CSS会学)
自动根据浏览器宽度来决定排版.
html内容首尾处的换行,空格均无效.
在html中文字之间输⼊的多个空格只相当于⼀个空格.
html中直接输入换行不会真的换行,而是相当于⼀个空格.

2.3. 换行标签:br

想要完成换行的话,也可以通过
标签来实现.
br是break的缩写.表示换行

br是⼀个单标签(不需要结束标签)
br标签不像p标签那样带有⼀个很大的空隙.

这是⼀个br标签<br/>
这是⼀个br标签<br/>
这是⼀个br标签<br/>

2.4 图片标签:img

img标签必须带有src属性.表示图片的路径.

<img src="rose.jpg" width="500px" height="800px" border="5px">

此时要把rose.jpg这个图片文件放到和html中的同级目录中.
img标签的其他属性

width/height:控制宽度高度.高度和宽度⼀般改⼀个就行,另外⼀个会等比例缩放.否则就会图片失衡.
border:边框,参数是宽度的像素.但是⼀般使用CSS来设定.

注意:

属性可以有多个,不能写到标签之前
属性之间用空格分割,可以是多个空格,也可以是换行
属性之间不分先后顺序
属性使用"键值对"的格式来表示.

2.5 超链接标签:a

href:必须具备,表示点击后会跳转到哪个页面
target:打开方式.默认是_self.如果是_blank则用新的标签页打开.

<a href="http://www.baidu.com">百度</a>

链接的几种形式:

外部链接:href引用其他网站的地址

<a href="http://www.baidu.com">百度</a>

内部链接:网站内部页面之间的链接.写相对路径即可
空链接:使用#在href中占位.

<a href="#">空链接</a>

2.6 select标签

下拉菜单

option中定义selected="selected"表示默认选中.

<select><option>北京</option><option selected="selected">上海</option>
</select>

3. 表格标签

table标签:表示整个表格
tr:表示表格的⼀行
td:表⼀个单元格
thead:表格的头部区域
tbody:表格的主体区域.
table包含tr,tr包含td

表格标签有⼀些属性,可以⽤于设置⼤⼩边框等.但是⼀般使CSS⽅式来设置.
这些属性都要放到table标签中.

align是表格相对于周围元素的对齐式. align=“center” (不是内部元素的对⻬⽅式)
border表⽰边框.1表⽰有边框(数字越⼤,边框越粗),""表⽰没边框.
cellpadding:内容距离边框的距离,默认1像素
cellspacing:单元格之间的距离.默认为2像素
width/height:设置尺⼨

 <table align="center" border="1" cellpadding="20" cellspacing="0" width="500"height="500"><tr><td>11</td><td>22</td></tr><tr><td>33</td><td>44</td></tr><tr><td>55</td><td>66</td></tr></table>

在这里插入图片描述

4. 表单标签

表单是让用户输⼊信息的重要途径.
分成两个部分:

表单域:包含表单元素的区域.重点是form标签.
表单控件:输⼊框,提交按钮等.重点是input标签.

4.1 form标签

<form action="test.html">
... [form 的内容]
</form>

描述了要把数据按照什么方式,提交到哪个页面中.

4.2 input标签

各种输入控件,单行文本框,按钮,单选框,复选框.

type(必须有),取值种类很多,button,checkbox,text,file,image,password,radio等.
name:给input起了个名字.尤其是对于单选按钮,具有相同的name才能多选⼀.
value:input中的默认值.
checked:默认被选中.用于单选按钮和多选按钮)
文本框

<input type="text">

密码框

<input type="password">

3.单选框

<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">⼥

注意:单选框之间必须具备相同的name属性,才能实现多选⼀效果
4. 复选框

爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input
type="checkbox"> 打游戏

普通按钮

<input type="button" value="我是个按钮">

提交按钮

<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>

提交按钮必须放到form标签内.点击后就会尝试给服务器发送请求

5. 无语义标签:div&span

div标签,division的缩写,含义是分割
span标签,含义是跨度
就是两个子,⼦用于网页布局

div是独占⼀行的,是⼀个大盒子
span不独占⼀行,是⼀个小盒子.

6. 综合练习:用户注册

用户注册界面:
在这里插入图片描述

<h1>⽤⼾注册</h1>
<table>
<tr>
<td>⽤⼾名</td>
<td><input type="text" placeholder="请输⼊⽤⼾名"></td>
</tr>
<tr>
<td>⼿机号</td>
<td><input type="text" placeholder="请输⼊⼿机号"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" placeholder="请输⼊密码"></td>
</tr>
</table>
<div>
<input type="button" value="注册">
<span>已有账号? </span><a href="#">登录</a><br/>
</div>

在这里插入图片描述
如果觉得文章不错，期待你的一键三连哦，你个鼓励是我创作的动力之源，让我们一起加油，顶峰相见！！！💓 💓 💓

【Web开发】深度学习HTML(超详细,一篇就够了)

💓 博客主页：从零开始的-CodeNinja之路 ⏩ 收录文章：【Web开发】深度学习html(超详细,一篇就够了) 🎉欢迎大家点赞👍评论📝收藏⭐文章目录 HTML1. HTML基础1.1 什么是HTML1.2 认识HTML标签1.3 HTML文件基本…...

编程日记 2024/3/10 23:24:44

深入了解二叉搜索树：原理、实现与应用

目录一、介绍二叉搜索树二、二叉搜索树的基本性质三、二叉搜索树的实现四、总结在计算机科学中，数据结构是构建算法和程序的基础。其中，二叉搜索树（Binary Search Tree，简称 BST）作为一种常见的数据结构&#…...

编程日记 2024/3/10 23:21:41

【MybatisPlus】BaseMapper详解，举例说明

一、BaseMapper 简介 MyBatis-Plus 的核心类 BaseMapper 主要是用于提供基本的 CRUD（创建、读取、更新、删除）操作的接口定义。它是 MyBatis-Plus 框架中的一个重要组成部分，可以大大简化基于 MyBatis 的数据访问层代码的编写。 BaseMapper…...

编程日记 2024/3/10 23:20:40

LightDB24.1 oracle_fdw支持服务端GBK编码

功能介绍 oracle_fdw是一个PG的插件，用于连接oracle数据库，由于原生PG不支持服务端GBK编码，所以原生的oracle_fdw也不支持服务端GBK编码。在LightDB23.3中支持了服务端GBK编码，导致在GBK编码的数据库中使用oracle_fdw时报错。 Li…...

编程日记 2024/3/10 23:16:36

算法环形数组是否存在循环力扣执行速度击败100%

目录题目 leetcode 457 求解思路代码结果题目 leetcode 457 存在一个不含 0 的环形数组 nums ，每个 nums[i] 都表示位于下标 i 的角色应该向前或向后移动的下标个数： 如果 nums[i] 是正数，向前（下标递增方向&#xff0…...

编程日记 2024/3/10 23:13:33

FFmpeg——开源的开源的跨平台音视频处理框架简介

引言： FFmpeg是一个开源的跨平台音视频处理框架，可以处理多种音视频格式。它由Fabrice Bellard于2000年创建，最初是一个只包括解码器的项目。后来，很多开发者参与其中，为FFmpeg增加了多种新的功能，例如编码…...

编程日记 2024/3/10 23:11:31

怎么看待Groq

用眼睛看。就是字面上的意思用眼睛看。我属于第一波玩到的，先给大家一个直观的印象，Groq到底有多快。目前Groq只能选Llama的70b，和Mixtral的MoE，那我选7*8的这个MoE模型来实验。这么好些字大概花了不到1秒，流式响应，其实是不是流式已经没那么重要了，然后看每秒Toke…...

编程日记 2024/3/10 23:10:30

Kafka | SpringBoot集成Kafka

SpringBoot集成Kafka 一、前言二、项目1. pom2. application.properties4. 消息生产者-测试5. 消息消费者三、启动测试四、有总结的不对的地方/或者问题请指正, 我在努力中一、前言该文章中主要对SpringBoot 集成Kafka 主要是 application.properties 与 pom坐标就算集成完…...

编程日记 2024/3/10 23:07:27

python的tqdm库不显示动态进度条的问题

python的tqdm库不显示动态进度条的问题本质原因是tqdm无法获取内部对象的长度，这可能是因为内部对象是一个迭代器，问题经常发生在同时使用tqdm与enumerate的场合，例如深度学习中经常可能出现的： tqdm.tqdm(enumerate(train_loade…...

编程日记 2024/3/10 23:06:26

【prompt四】Domain Prompt Learning for Efficiently Adapting CLIP to Unseen Domains

motivation 领域泛化(DG)是一个复杂的迁移学习问题，旨在学习未知领域的可泛化模型。最近的基础模型(FMs)对许多分布变化都具有鲁棒性，因此，应该从本质上提高DG的性能。在这项工作中，我们研究了采用视觉语言基础模型CLIP来解决图像分类中的DG问题的通用方法。虽然ERM使用标…...

编程日记 2024/3/10 23:05:25

利用Amazon Bedrock畅玩Claude 3等多种领先模型，抢占AI高地(体验倒计时4小时)

快乐的时间总是短暂的，Claude 3 在亚马逊云科技上限时体验仅剩4小时，上次分享了入门级操作教程，本期给大家带来AWS Lambda Amazon Bedrock一起构建可以便捷使用的Claude 3接口 AWS Lambda AWS Lambda 是一项计算服务，可以运行您…...

编程日记 2024/3/10 23:02:20

MySql分布式事务

1 seata 底层原理 Seata（Simple Extensible Autonomous Transaction Architecture）是一个开源的分布式事务解决方案，其底层原理主要基于改进的传统2PC（Two-Phase Commit，两阶段提交）协议，并结合…...

编程日记 2024/3/10 23:01:18

android基础学习

从上面的描述就可以知道，每一个Activity组件都有一个对应的ViewRoot对象、View对象以及WindowManager.LayoutParams对象。这三个对象的对应关系是由WindowManagerImpl类来维护的。具体来说，就是由WindowManagerImpl类的成员变量mRoots、mViews和mParams所…...

编程日记 2024/3/10 22:56:12

解决方案：Python画图汉字丢失显示小方块

解决方案： linux python解决中文字体 - jingsupo - 博客园 (cnblogs.com) 在找字体缓存文件的时候我找了一会儿，我的路径是这里： 做了所有更改之后，最后一定要把缓存文件删掉，不然还是会报同样的错误的。这里再贴一…...

编程日记 2024/3/10 22:53:09

JWT的是什么

session共享什么是session共享 Session共享是指在分布式系统中，在多个服务器之间共享同一个用户的会话数据。在传统的Web应用中，用户的会话信息通常存储在服务器端的Session中，而每个用户的请求在同一个服务器上处理，因此可以轻…...

编程日记 2024/3/10 22:52:07

git常用命令集合

1.差异对比显示出branch1和branch2中差异的部分 git diff branch1 branch2 --stat显示出所有有差异的文件的详细差异 git diff branch1 branch2查看branch1分支有，而branch2中没有的log git log branch1 ^branch22.分支列出所有本地分支 git branch列出所有远…...

编程日记 2024/3/10 22:51:06

UDP通信发送和接收 || UDP实现全双工通信

recvfrom ssize_t recvfrom(int sockfd, void *buf, size_t len, int flags, struct sockaddr *src_addr, socklen_t *addrlen); 功能: 从套接字中接收数据参数: sockfd:套接字文件描述符 buf:存放数据空间首地址 …...

编程日记 2024/3/10 22:50:04

SH脚本安装Aethas curl -L https://alibaba.github.io/arthas/install.sh | sh安装脚本说明示例源文件： #! /bin/bash# temp file of as.sh TEMP_ARTHAS_FILE"./as.sh.$$"# target file of as.sh TARGET_ARTHAS_FILE"./as.sh"# update timeo…...

编程日记 2024/3/10 22:49:03

Elasticsearch：dense vector 数据类型及标量量化

密集向量（dense_vector）字段类型存储数值的密集向量。密集向量场主要用于 k 最近邻 (kNN) 搜索。 dense_vector 类型不支持聚合或排序。默认情况下，你可以基于 element_type 添加一个 dend_vector 字段作为 float 数值数组： …...

编程日记 2024/3/10 22:48:02

Linux C/C++下使用Lex/Yacc构建实现DBMS（Minisql）

DBMS（数据库管理系统）是一种用于管理和组织数据库的软件系统。它的重要性在于提供了一种有效地存储、管理和访问大量数据的方式。本文将深入探讨如何使用C语言、Lex（词法分析器生成器）和Yacc（语法分析器生成器&#xf…...

编程日记 2024/3/10 22:47:02

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。可以通过配置不同的记录提供程…...

编程新知 2025/8/31 19:10:23

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template>  </template>…...

编程新知 2025/8/21 17:38:03

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发下面是 Solidity 合约开发的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为以太坊（Ethereum）平台编写智能合约的高级编…...

编程新知 2025/8/13 16:04:59

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...

编程新知 2025/7/8 23:32:56

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/7/24 7:13:48

稳定币的深度剖析与展望

一、引言在当今数字化浪潮席卷全球的时代，加密货币作为一种新兴的金融现象，正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而，加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下，稳定…...

编程新知 2025/7/7 21:48:53

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置五、字节码修改实现代码&#…...

编程新知 2025/9/2 18:18:51

A2A JS SDK 完整教程：快速入门指南

目录什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/8/27 4:07:51

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的，可以通过集中管理和高效资源的分配，来支持多个独立的网站同时运行，让每一个网站都可以分配到独立的IP地址，避免出现IP关联的风险，用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/9/8 15:21:15

目录