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

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

news 2025/11/17 5:19:31

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

💓 博客主页：从零开始的-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来设定.

注意:

  1. 属性可以有多个,不能写到标签之前
  2. 属性之间用空格分割,可以是多个空格,也可以是换行
  3. 属性之间不分先后顺序
  4. 属性使用"键值对"的格式来表示.
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">
  1. 密码框
<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"> 打游戏
  1. 普通按钮
<input type="button" value="我是个按钮">
  1. 提交按钮
<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(超详细,一篇就够了)

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

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

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

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

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

【MybatisPlus】BaseMapper详解，举例说明

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

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

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

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

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

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

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

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

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

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

编程日记 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无法获取内部对象的长度&#xff0c;这可能是因为内部对象是一个迭代器&#xff0c;问题经常发生在同时使用tqdm与enumerate的场合&#xff0c;例如深度学习中经常可能出现的&#xff1a; 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小时)

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

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

MySql分布式事务

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

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

android基础学习

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

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

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

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

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

JWT的是什么

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

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

git常用命令集合

1.差异对比 显示出branch1和branch2中差异的部分 git diff branch1 branch2 --stat显示出所有有差异的文件的详细差异 git diff branch1 branch2查看branch1分支有&#xff0c;而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

Mac 以SH脚本安装Arthas

SH脚本安装Aethas curl -L https://alibaba.github.io/arthas/install.sh | sh安装脚本说明 示例源文件&#xff1a; #! /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 数据类型及标量量化

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

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

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

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

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

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/11/12 20:03:00

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/10/1 2:59:48

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/11/12 5:14:55

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/9/16 2:04:37

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/11/12 11:31:18

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/11/16 23:57:49

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/9/24 22:51:29

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2025/11/17 4:39:48

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2025/11/15 3:13:17