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

HTML(快速入门)

news 文章来源：https://blog.csdn.net/2302_81090306/article/details/145372847 2025/5/11 9:18:24

                                         欢迎大家来到我的博客~欢迎大家对我的博客提出指导，有错误的地方会改进的哦·~

点击这里了解更多内容

一、前言
二、HTML基础
- 2.1 什么是HTML?
- 2.2 认识HTML标签
- - 2.2.1 HTML标签当中的基本结构
  - 2.2.2 标签层次结构
- 2.3 HTML常见标签
- - 2.3.1 标题标签
  - 2.3.2 段落标签
  - 2.3.3 换行标签
  - 2.3.4 图片标签
  - 2.3.5 超链接
  - 2.3.6 表格标签
  - 2.3.7 表单标签
  - 2.3.8 select标签
  - 2.3.9 无语义标签
- 2.4 综合练习-实现一个用户注册的网页

一、前言

这篇博客的目的认识 HTML 的基本结构, 学习常用的 HTML 标签。
这里说的所用的文本编辑器是idea。

二、HTML基础

2.1 什么是HTML?

HTML(Hyper Text Markup Language), 超文本标记语言。

超文本: 比文本要强大. 通过链接和交互方式来组织和呈现信息的⽂本形式. 不仅仅有文本，还可能包含图片, ⾳频, 或者自已经审阅过它的学者所加的评注、补充或脚注等等.
标记语言: 由标签构成的语言。
HTML的标签都是提前定义好的, 使用不同的标签, 表示不同的内容.
类似飞书文档, Word文档。
在这里插入图片描述
标签：如果选中文本, 点击标题1, 就会使用标题1的样式来显示文本, 上述标题1就是⼀个"标签“。
如以下代码（建立一个demo1.html文件）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>我的第一个HTML文件</title>
</head>
<body>
<!--<h1>我是一级标题</h1>-->
<!--<h2>我是二级标题</h2>-->
<!--<h3>我是三级标题</h3>-->
<!--<h4>我是四级标题</h4>-->
<body>

在这里插入图片描述

用浏览器打开的效果：
在这里插入图片描述

上面代码中的h1、h2、h3、h4说的就是标签，学习HTML最主要的就是学习标签。

2.2 认识HTML标签

2.2.1 HTML标签当中的基本结构

创建一个叫test1.html的文件,然后输入下面这些内容：

<html>
<head><title>我的第一个HTML文件</title>
</head>
<body>Hello HTML !
<body>
<html>

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

效果如下：
在这里插入图片描述

2.2.2 标签层次结构

• 父子关系
• 兄弟关系
上面代码其中:
• head 和 body 是 html 的⼦标签(html 就是 head 和 body 的父标签)。
• title 是 head 的子标签. head 是 title 的父标签.
• head 和 body 之间是兄第标签。

**注意：**F12 或者右键审查元素, 开启开发者⼯具, 切换到 Elements（元素）标签, 就可以看到页面结构细节。
在这里插入图片描述
标签之间的结构关系, 构成了⼀个 DOM树：

DOM 是 Document Object Mode (⽂档对象模型) 的缩写。

2.3 HTML常见标签

2.3.1 标题标签

有6个（h1-h6)数字越大标签字体越小。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>我的第一个HTML文件</title>
</head>
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<body>
<html>

2.3.2 段落标签

p表示一个段落

<!--&nbsp;代表一个空格-->
<p>&nbsp;&nbsp;&nbsp;&nbsp;这是一个段落(首行缩进四个空格)
</p>
<p>这是    一个段落（单空格）
</p>

上面两个标签的效果如下：
在这里插入图片描述

注意：
• p 标签描述的段落, 前面没有缩进.
• 主动根据浏览器宽度来决定排版.
• html 内容⾸尾处的换行, 空格均无效。
• 在 html 中文字之间输入的多个空格只相当于⼀个空格。
• html 中直接输入换行不会真的换行, 而是相当于⼀个空格。

2.3.3 换行标签

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

在上面的段落标签当中加一个br标签看看会怎样呢？

<!--&nbsp;代表一个空格-->
<p>&nbsp;&nbsp;&nbsp;&nbsp;这是一个段落(首行缩进四个空格)
</p>
<p>这是<br>一个段落（单空格）
</p>
<body>
<html>

用浏览器打开看看效果：
在这里插入图片描述

可以看到换行成功了。

2.3.4 图片标签

<img src="rose.jpg alt="" border="">

img 标签必须带有 src 属性. 表示图片的路径。
img 标签的其他属性
• width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就可以, 另外⼀个会等比例缩放.，否则就会图片失衡。
• border: 边框, 参数是宽

我们先随便去网上找一张图片，如下
在这里插入图片描述
然后输入代码：

<br>
<!--width和height用来设置图片像素的宽度和高度 src指的是图片的路径位置 alt是一个备注-->
<img src="https://pica.zhimg.com/50/v2-636b67eef271b4eb6467e25439dd719c_720w.jpg?source=1940ef5c"alt="这是一张图片" width="60px"height="60">
<br>

效果：
在这里插入图片描述

可以看到这个表情出现了。
这个alt相当于一个注释,我们把这个路径去掉一部分然后再打开浏览器，然后就会发现这个alt在这块的作用啦。

<!--width和height用来设置图片像素的宽度和高度 src指的是图片的路径位置 alt是一个备注-->
<img src="https://pica.zhimg.com/50/v2-636b67eef271b4eb6467e25439dd719c_720w."alt="这是一张图片" width="60px"height="60">

在这里插入图片描述

可以看到那个图片不见了，然后多了一行字,这个就是这个alt的作用了。

2.3.5 超链接

<a href=""target=""></a>

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

<!--超链接-->
<!--外部链接 链接其他的网址-->
<a href="https://blog.csdn.net/2302_81090306?type=blog"target="_blank">我的博客主页</a><br>
<!--再创建一个demo1.html文件-->
<!--内部链接-->
<a href="demo1.html">点我跳转到demo1链接</a><br>
<!--空链接-->
<a href="#"target="_blank">空链接</a><br>

效果如下：

在这里插入图片描述

2.3.6 表格标签

<!--表格标签-->
<table border="1" align="center" width="300"height="300" cellspacing="0"><tr><td>qqq</td><td>www</td></tr><tr><td>eee</td><td>fff</td></tr><tr><td>ggg</td><td>hhh</td></tr>
</table>

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

在这里插入图片描述

合并单元格：

<!--表格标签-->
<table border="1" align="center" width="300"height="300" cellspacing="0"><tr>
<!--        合并单元格 www--><td colspan="2">qqq</td>
<!--        <td>www</td>--></tr><tr><td >eee</td>
<!--        合并单元格hhh--><td rowspan="2">fff</td></tr><tr><td>ggg</td>
<!--        <td>hhh</td>--></tr>
</table>

效果：

在这里插入图片描述

2.3.7 表单标签

表单是让用户输⼊信息的重要途径.
分成两个部分:
• 表单域: 包含表单元素的区域. 重点是 form 标签.

<!--from 标签  跟submit一起用-->
<!--get->向服务端获取资源-->
<!--post->向服务端发送信息-->
<form action="test1.html" method="get">

• 表单控件: 输⼊框, 提交按钮等. 重点是 input 标签.
• type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等.
• name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选⼀.
• value: input 中的默认值.
• checked: 默认被选中
介绍几种类型：
1.文本框

<input type="text">

举个例子：

    用户名:<input type="text"name="username"size="11"><br>

效果：
在这里插入图片描述

2.密码框

<input type="password">

举个例子：

&nbsp;密码:<input type="password"name="password"size="11"><br>

效果：
在这里插入图片描述

3.单选框

<!--单选按钮-->&nbsp;性别:<input type="radio" name="gender" id="gender1"value="1" > <label for="gender1">男</label><input type="radio" name="gender" id="gender2"value="2"> <label for="gender2">女</label><input type="radio" name="gender" id="gender3"value="0"> <label for="gender3">保密</label><br>

效果：
在这里插入图片描述

4.复选框

  <!--多选按钮-->&nbsp;兴趣:<input type="checkbox" name="hobby" id="fun1"value="1"> <label for="fun1">篮球</label><input type="checkbox" name="hobby" id="fun2"value="2"><label for="fun2">足球</label><input type="checkbox" name="hobby" id="fun3"value="3"><label for="fun3">乒乓球</label><input type="checkbox" name="hobby" id="fun4"value="4"><label for="fun4">羽毛球</label><br>

效果：
在这里插入图片描述

5.按钮的实现

   <!--实现按钮--><button> 1.这是一个button按钮</button><br><input type="button" value="2.这是一个input:button按钮"><br><input type="submit" value="3.这是一个submit按钮"><br>

效果：
在这里插入图片描述

2.3.8 select标签

1.文本域

个人描述:<textarea rows="10" cols="5"></textarea><br>

效果：
在这里插入图片描述

2.下拉菜单

<!--   下拉菜单-->
<!--    默认选择selected-->专业：<select><option value="1" selected>数据科学与大数据技术</option><option value="2">计算机科学与技术</option><option value="3">数字媒体与技术</option><option value="4">人工智能</option></select><br>

效果：
在这里插入图片描述

2.3.9 无语义标签

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

<div><span>span1</span><span>span2</span>
</div>
<div><span>span3</span><span>span4</span>
</div>
<div><span>span5</span><span>span6</span>
</div>

效果：
在这里插入图片描述

2.4 综合练习-实现一个用户注册的网页

要求实现效果：

在这里插入图片描述

• 使用表格进行整体布局
• 使用各种 input 标签实现页面中的输入控件

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>用户注册</title><style>div{color:red;font-size=300px;}</style>
</head>
<body>
<h1>用户注册</h1>
<table><tr><td>用户名</td><td><input type="text" name="Username" size="11" placeholder="请输入用户名"></td></tr> <br><tr><td>手机号</td><td><input type="text" name="Number" size="11" placeholder="请输入手机号"></td></tr> <br><tr><td>密码</td><td><input type="password" name="Password" size="11" placeholder="请输入密码"></td></tr>
</table>
<div><button>注册</button> &nbsp;<span>已有账号？</span><a href="#">登录</a>
</div>
</body>
</html>

效果：
在这里插入图片描述

在这里插入图片描述

欧耶！！我学会啦！！！

HTML(快速入门)

欢迎大家来到我的博客~欢迎大家对我的博客提出指导，有错误的地方会改进的哦~点击这里了解更多内容目录一、前言二、HTML基础2.1 什么是HTML?2.2 认识HTML标签2.2.1 HTML标签当中的基本结构2.2.2 标签层次结构 2.3 HTML常见标签2.3.1 标题标签2.3.2 段落标签2.3.3…...

编程日记 2025/1/31 6:50:14

SpringBoot Web开发（SpringMVC)

SpringBoot Web开发（SpringMVC) MVC 核心组件和调用流程 Spring MVC与许多其他Web框架一样，是围绕前端控制器模式设计的，其中中央 Servlet DispatcherServlet 做整体请求处理调度！ . 除了DispatcherServletSpringMVC还会提供其他…...

编程日记 2025/1/31 6:48:05

汽车蓝牙钥匙定位仿真小程序

此需求来自于粉丝的真实需求，假期没事，牛刀小试。一、项目背景如今，智能车钥匙和移动端定位技术已经相当普及。为了探索蓝牙 Beacon 在短距离定位场景下的可行性，我们搭建了一个简易原型：利用 UniApp 在移动端采集蓝牙信标的 RSSI（信号强度），通过三边定位算法估算钥…...

编程日记 2025/1/31 6:44:01

K8S中高级存储之PV和PVC

高级存储 PV和PVC 由于kubernetes支持的存储系统有很多，要求客户全都掌握，显然不现实。为了能够屏蔽底层存储实现的细节，方便用户使用， kubernetes引入PV和PVC两种资源对象。 PV（Persistent Volume） PV是…...

编程日记 2025/1/31 6:40:56

【C语言进阶】- 动态内存管理

动态内存管理 1.1 为什么存在动态内存分配1.2 动态内存函数介绍2.1 malloc函数的使用2.2 free函数的使用2.3 calloc函数的使用2.4 realloc函数的使用3.1 常见的动态内存错误3.2 常见笔试题 1.1 为什么存在动态内存分配我们已经掌握的内存开辟方式有： int val 20;…...

编程日记 2025/1/31 6:39:50

Python实现基于TD3（Twin Delayed Deep Deterministic Policy Gradient）算法来实时更新路径规划算法

下面是一个使用Python实现基于TD3（Twin Delayed Deep Deterministic Policy Gradient）算法来实时更新路径规划算法的三个参数（sigma0，rho0 和 theta）的示例代码。该算法将依据障碍物环境进行优化。实现思路环境定义…...

编程日记 2025/1/31 6:36:38

pytorch实现半监督学习

半监督学习（Semi-Supervised Learning，SSL）结合了有监督学习和无监督学习的特点，通常用于部分数据有标签、部分数据无标签的场景。其主要步骤如下： 1. 数据准备有标签数据（Labeled Data）&…...

编程日记 2025/1/31 6:27:17

我的毕设之路：（2）系统类型的论文写法

一般先进行毕设的设计与实现，再在现成毕设基础上进行描述形成文档，那么论文也就成形了。 1 需求分析：毕业设计根据开题报告和要求进行需求分析和功能确定，区分贴合主题的主要功能和拓展功能能，删除偏离无关紧要的功能…...

编程日记 2025/1/31 6:24:05

LosslessScaling-学习版[steam价值30元的游戏无损放大/补帧工具]

LosslessScaling 链接：https://pan.xunlei.com/s/VOHc-yZBgwBOoqtdZAv114ZTA1?pwdxiih# 解压后运行"A-绿化-解压后运行我.cmd"...

编程日记 2025/1/31 6:21:59

concurrent.futures.Future对象详解：利用线程池与进程池实现异步操作

concurrent.futures.Future对象详解：利用线程池与进程池实现异步操作一、前言二、使用线程池三、使用进程池四、注意事项五、结语一、前言在现代编程中，异步操作已成为提升程序性能和响应速度的关键手段。Python的concurrent.futures模块为此提供了强…...

编程日记 2025/1/31 6:20:45

StarRocks 安装部署

StarRocks 安装部署 StarRocks端口： 官方《配置检查》有服务端口详细描述： https://docs.starrocks.io/zh/docs/deployment/environment_configurations/ StarRocks架构：https://docs.starrocks.io/zh/docs/introduction/Architecture/ Sta…...

编程日记 2025/1/31 6:17:36

Python Matplotlib库：从入门到精通

Python Matplotlib库：从入门到精通在数据分析和科学计算领域，可视化是一项至关重要的技能。Matplotlib作为Python中最流行的绘图库之一，为我们提供了强大的绘图功能。本文将带你从Matplotlib的基础开始，逐步掌握其高级用法&…...

编程日记 2025/1/31 6:16:33

线程概念、操作

一、背景知识 1、地址空间进一步理解在父子进程对同一变量进行修改时发生写时拷贝，这时候拷贝的基本单位是4KB，会将该变量所在的页框全拷贝一份，这是因为修改该变量很有可能会修改其周围的变量（局部性原理）&#xf…...

编程日记 2025/1/31 6:15:27

【PySide6拓展】QSoundEffect

文章目录【PySide6拓展】QSoundEffect 音效播放类**基本概念****什么是 QSoundEffect？****QSoundEffect 的特点****安装 PySide6** **如何使用 QSoundEffect？****1. 播放音效****示例代码：播放音效** **代码解析****QSoundEffect 的高级用法…...

编程日记 2025/1/31 6:12:23

33【脚本解析语言】

脚本语言也叫解析语言脚本一词，相信很多人都听过，那么什么是脚本语言，我们在开发时有一个调试功能，但是发布版是需要编译执行的，体积比较大，同时这使得我们每次更新都需要重新编译，客户再…...

编程日记 2025/1/31 6:11:18

【Unity】 HTFramework框架（五十九）快速开发编辑器工具（Assembly Viewer + ILSpy）

更新日期：2025年1月23日。 Github源码：[点我获取源码] Gitee源码：[点我获取源码] 索引开发编辑器工具MouseRayTarget焦点视角Collider线框Assembly Viewer搜索程序集ILSpy反编译程序集搜索GizmosElement类找到Gizmos菜单找到Gizmos窗口分析A…...

编程日记 2025/1/31 6:09:10

如何解决TikTok网络不稳定的问题

TikTok是目前全球最受欢迎的短视频平台之一，凭借其丰富多彩的内容和社交功能吸引了数以亿计的用户。然而，尽管TikTok在世界范围内的使用情况不断增长，但不少用户在使用过程中仍然会遇到网络不稳定的问题。无论是在观看视频时遇到缓冲&#xf…...

编程日记 2025/1/31 6:08:05

告别页面刷新！如何使用AJAX和FormData优化Web表单提交

系列文章目录 01-从零开始学 HTML：构建网页的基本框架与技巧 02-HTML常见文本标签解析：从基础到进阶的全面指南 03-HTML从入门到精通：链接与图像标签全解析 04-HTML 列表标签全解析：无序与有序列表的深度应用 05-HTML表格标签全面…...

编程日记 2025/1/31 6:05:01

WireShark4.4.2浏览器网络调试指南：数据统计（八）

概述 Wireshark 是一款功能强大的开源网络协议分析软件，被广泛应用于网络调试和数据分析。随着互联网的发展，以及网络安全问题日益严峻，了解如何使用 Wireshark进行浏览器网络调试显得尤为重要。最新的 Wireshark4.4.2 提供了更加强大的功能…...

编程日记 2025/1/31 6:02:56

Hypium+python鸿蒙原生自动化安装配置

Hypiumpython自动化搭建文章目录 Python安装pip源配置HDC安装Hypium安装DevEco Testing Hypium插件安装及使用方法插件安装工程创建区域 Python安装推荐从官网获取3.10版本，其他版本可能出现兼容性问题 Python下载地址下载64/32bitwindows安装文件&am…...

编程日记 2025/1/31 6:00:47

2025创业思路和方向有哪些？

创业思路和方向是决定创业成功与否的关键因素。以下是一些基于找到的参考内容的创业思路和方向，旨在激发创业灵感： 一、技术创新与融合： 1、智能手机与云电视结合：开发集成智能手机功能的云电视，提供通讯、娱乐一体化体…...

编程日记 2025/1/31 5:59:44

实验五---控制系统的稳定性分析---自动控制原理实验课

一实验目的 1、理解控制系统稳定性的概念 2、掌握多种判定系统稳定性的原理及方法 3、掌握使用Matlab软件进行控制系统的稳定性分析二实验仪器计算机，MATLAB仿真软件三实验内容及步骤 1.计算系统闭环特征根，判别系统稳定性； 2.绘制系统…...

编程日记 2025/1/31 5:56:37

AttributeError: can‘t set attribute ‘lines‘

报错： ax p3.Axes3D(fig) ax.lines [] AttributeError: cant set attribute lines 总结下来，解决方案应包括： 1. 使用ax.clear()方法清除所有内容。 2. 逐个移除lines中的元素。 3. 检查matplotlib版本，确保没有已知的bug。…...

编程日记 2025/1/31 5:52:18

Day07：缓存-数据淘汰策略

Redis的数据淘汰策略有哪些 ? （key过期导致的） 在redis中提供了两种数据过期删除策略第一种是惰性删除，在设置该key过期时间后，我们不去管它，当需要该key时，我们再检查其是否过期，如果过期&…...

编程日记 2025/1/31 5:51:07

基于聚类与相关性分析对马来西亚房价数据进行分析

碎碎念：由于最近太忙了，更新的比较慢，提前祝大家新春快乐，万事如意！本数据集的下载地址，读者可以自行下载。 1.项目背景本项目旨在对马来西亚房地产市场进行初步的数据分析，探索各州的房产市…...

编程日记 2025/1/31 5:48:56

Java—工具类类使用

工具类的调用：工具类名.方法名工具类的书写： 示例： 写一个遍历数组的工具类 import java.util.Arrays;public class ArrayUtil {private ArrayUtil() {} //用私有化构造方法不让外界创建关于它的对象//定义static静态方法，因…...

编程日记 2025/1/31 5:47:49

游戏开发领域 - 游戏引擎 UE 与 Unity

游戏引擎游戏引擎是用于开发电子游戏的软件框架，它提供图形渲染、物理模拟、音频处理、动画系统、脚本编写等功能，帮助开发者高效创建电子游戏但是，游戏引擎也不仅限于游戏开发，还广泛应用于其他领域，例如&#xff…...

编程日记 2025/1/31 5:46:39

[NVME] PMRCAP-Persistent Memory Region Capabilities

This register indicates capabilities of the Persistent Memory Region（持久内存区域） If the controller does not support the Persistent Memory Region feature, then this register shall be cleared to 0h BitsTypeResetDescription31:25RO 0hReserved24ROImpl Spec…...

编程日记 2025/1/31 5:45:33

Ollama windows安装

Ollama 是一个开源项目，专注于帮助用户本地化运行大型语言模型（LLMs）。它提供了一个简单易用的框架，让开发者和个人用户能够在自己的设备上部署和运行 LLMs，而无需依赖云服务或外部 API。这对于需要数据隐私、离线使用…...

编程日记 2025/1/31 5:44:30

vim操作简要记录

操作容易忘记，记录一下基本使用的 :wq保存退出 :w :q :q! :wq! i I a A 方向键 h左 j下 k上 l右 dd删除方行（这其实是剪切行操作，不过一般用作删除，长按可删除，不过按.执行上一次操作删除更快） .执行上…...

编程日记 2025/1/31 5:42:27

目录

一、前言

二、HTML基础

2.1 什么是HTML?

2.2 认识HTML标签

2.2.1 HTML标签当中的基本结构

2.2.2 标签层次结构

2.3 HTML常见标签

2.3.1 标题标签

2.3.2 段落标签

2.3.3 换行标签

2.3.4 图片标签

2.3.5 超链接

2.3.6 表格标签

2.3.7 表单标签

2.3.8 select标签

2.3.9 无语义标签

2.4 综合练习-实现一个用户注册的网页

相关文章：