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

前端知识补充—HTML

news 2026/1/28 10:49:50

1. HTML

1.1 什么是HTML

HTML(Hyper Text Markup Language), 超⽂本标记语⾔
超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等
标记语⾔: 由标签构成的语⾔
HTML的标签都是提前定义好的, 使⽤不同的标签, 表⽰不同的内容

1.1.1 HTML 标签

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

1.1.2 HTML ⽂件基本结构

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

1.1.3 标签层次结构

head 和 body 是 html 的⼦标签(html 就是 head 和 body 的⽗标签)
title 是 head 的⼦标签. head 是 title 的⽗标签
head 和 body 之间是兄弟关系
标签之间的结构关系, 构成了⼀个 DOM树
DOM 是 Document Object Mode (⽂档对象模型) 的缩写
——> head（title）
html   ——> body （其他标签）

 1.2 快速入门

HTML 可以使⽤系统⾃带的记事本来编写, 但是⾮常不⽅便, 我们课程中使⽤前端专业的开发⼯具:
Visual Studio Code
Visual Studio Code - Code Editing. Redefined
在 VS Code中创建⽂件 xxx.html , 直接输⼊ ! , 按 Enter或 tab 键, 此时能⾃动⽣成代码的主体框架
在<body></body>标签中, 任意书写⽂字, 按Ctrl + s 保持⽂件 , 通过浏览器访问即可

常见标签

1）标题标签 h1-h6
有六个, 从 h1 - h6. 数字越⼤, 则字体越⼩

2）段落标签: p
在HTML中, 段落, 换⾏符, 空格都会失效, 如果需要分成段落, 需要使⽤专⻔的标签

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

    <p>这是一个段落1</p>  

    这是一个段落2  

    这是一个段落3  

    <p>  这是一个段落4</p>

3）换⾏标签: br
想要完成换⾏的话, 也可以通过<br/>标签来实现
br 是 break 的缩写. 表⽰换⾏
br 是⼀个单标签(不需要结束标签)
br 标签不像 p 标签那样带有⼀个很⼤的空隙

    换行<br/>

    换行

    换<br/>行

4） 图⽚标签: img
img 标签必须带有 src 属性. 表⽰图⽚的路径
img 标签的其他属性
width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就⾏, 另外⼀个会等⽐例缩放. 否则图⽚会失衡
border: 边框, 参数是宽度的像素. 但是⼀般使⽤ CSS 来设定
1.  属性可以有多个, 不能写到标签之前
2. 属性之间⽤空格分割, 可以是多个空格, 也可以是换⾏.
3. 属性之间不分先后顺序
4. 属性使⽤ "键值对" 的格式来表示
路径：
1. 相对路径  以 html 所在位置为基准, 找到图⽚的位置
2. 绝对路径  ⼀个完整的磁盘路径, 或者⽹络路径
3. 网络路径

    <!-- 相对路径 -->

    <img src="../微信图片_20240524141849.jpg" width="200px">

    <!-- 网络路径 -->  

    <img src="http://www.qq.com/404-2.gif" width="200px">    

    <!-- 绝对路径 -->

    <img src="D:\微信图片_20240524141849.jpg" width="200px">

5） 超链接: a
href: 必须具备, 表⽰点击后会跳转到哪个⻚⾯
target: 打开⽅式. 默认是 _self. 如果是 _blank 则⽤新的标签⻚打开
外部链接: href 引⽤其他⽹站的地址
内部链接: ⽹站内部⻚⾯之间的链接. 写相对路径即可
空链接: 使⽤ # 在 href 中占位

    <a href="https://blog.csdn.net/2301_80055001?spm=1000.2115.3001.5343">csdn</a>

    <br/>

    <a href="https://blog.csdn.net/2301_80055001?spm=1000.2115.3001.5343"            target="blank">CSDN</a>

6） 表格标签
table 标签: 表⽰整个表格
tr: 表⽰表格的⼀⾏
td: 表⽰⼀个单元格
thead: 表格的头部区域
tbody: 表格的主体区域

<table border="1px">

        <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>

表单标签

表单是让⽤⼾输⼊信息的重要途径.
分成两个部分:
表单域: 包含表单元素的区域. 重点是 form 标签
表单控件: 输⼊框, 提交按钮等. 重点是 input 标签
form 标签
< form action = "test.html" >
... [form 的内容 ]
</ form >
描述了要把数据按照什么⽅式, 提交到哪个⻚⾯中
input 标签
各种输⼊控件, 单⾏⽂本框, 按钮, 单选框, 复选框
type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等
name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀
value: input 中的默认值
checked: 默认被选中. (⽤于单选按钮和多选按钮)

<form action="hello.html">

        <input type="button" value="按钮"><br/>

        //当前点击了没有反应. 需要搭配 JS 使⽤

        <input type="text" placeholder="请输入" name="username"><br/>  

     

        <input type="radio" name="选项" value="1">A<br/>    

        <input type="radio" name="选项" value="2">B<br/>

        <input type="radio" name="选项" value="3">C<br/>  

        //单选框之间必须具备相同的 name 属性, 才能实现 多选⼀ 效果

        <input type="checkbox" >篮球<br/>

        <input type="checkbox">排球<br/>

        <input type="checkbox">足球<br/>            

         //复选框

        <input type="password" name="" id=""><br/>

        <input type="submit" name="提交"><br/>

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

</form>  

select 标签
option 中定义 selected="selected" 表⽰默认选中

<select>

        <option>北京</option>

        <option>上海</option>

        <option selected="selected">广州</option>

</select>

textarea 标签
⽂本域中的内容, 就是默认内容, 注意, 空格也会有影响
rows 和 cols 也都不会直接使⽤, 都是⽤ css 来改的

<textarea rows="10" cols="100">

</textarea><br/>

右下角可以放多缩小框

无语义标签: div&span
div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度
就是两个盒⼦. ⽤于⽹⻚布局
div 是独占⼀⾏的, 是⼀个⼤盒⼦
span 不独占⼀⾏, 是⼀个⼩盒⼦

    <div>一个div</div>

    <div>一个div</div>

    <span>一个span1</span>

    <span>一个span2</span>  

综合练习：用户注册

    <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="password" placeholder="请输入密码"></td>

        </tr>      

    </table>

    <div>

        <input type="button" value="注册">

        <span>已有账号？</span>

        <a href="#">登录</a>

    <div>

相关文章：

前端知识补充—HTML

1. HTML 1.1 什么是HTML HTML(Hyper Text Markup Language), 超⽂本标记语⾔ 超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等 标记语⾔: 由标签构成的语⾔…...

编程日记 2024/12/24 5:35:46

安卓从Excel文件导入数据到SQLite数据库的实现

在现代的移动应用开发中&#xff0c;数据的处理和管理是至关重要的一环。有时候&#xff0c;我们需要从外部文件&#xff08;如Excel文件&#xff09;中导入数据&#xff0c;以便在应用程序中使用。本文将介绍如何在Android应用中使用Java代码从一个Excel文件中导入数据到SQLit…...

编程日记 2024/12/24 5:32:43

C/C++基础知识复习（44）

1) C 中多态性在实际项目中的应用场景 多态性是面向对象编程&#xff08;OOP&#xff09;中的一个重要特性&#xff0c;指的是不同的对象可以通过相同的接口来表现不同的行为。在 C 中&#xff0c;多态通常通过虚函数&#xff08;virtual&#xff09;和继承机制来实现。实际项…...

编程日记 2024/12/24 5:31:42

【day13】深入面向对象编程

【day12】回顾 在正文开始之前&#xff0c;先让我们回顾一下【day12】中的关键内容&#xff1a; 接口&#xff08;Interface&#xff09;&#xff1a; interface关键字用于定义接口。implements关键字用于实现接口。 接口成员&#xff1a; 抽象方法&#xff1a;需要在实现类中…...

编程日记 2024/12/24 5:30:40

《 火星人 》

题目描述 人类终于登上了火星的土地并且见到了神秘的火星人。人类和火星人都无法理解对方的语言&#xff0c;但是我们的科学家发明了一种用数字交流的方法。这种交流方法是这样的&#xff0c;首先&#xff0c;火星人把一个非常大的数字告诉人类科学家&#xff0c;科学家破解这…...

编程日记 2024/12/24 5:29:39

盒子模型（内边距的设置）

所有元素都可以设置内边距属性和外边距属性大体相同&#xff0c;可参考上一篇&#xff0c;但有区别 内边距不能设置为负值padding-方向&#xff1a;尺寸 注意&#xff1a;使用内边距padding之后元素整体会变大&#xff0c;因为他是直接加上了内边距的大小&#xff0c;不改变元素…...

编程日记 2024/12/24 5:28:37

CentOS7网络配置，解决不能联网、ping不通外网、主机的问题

1. 重置 关闭Centos系统 编辑->虚拟网络编辑器 还原默认设置 2. 记录基本信息 查看网关地址,并记录在小本本上 查看网段,记录下 3. 修改网卡配置 启动Centos系统 非root用户,切换root su root查看Mac地址 ifconfig 或 ip addr记录下来 修改配置文件 vim /et…...

编程日记 2024/12/24 5:26:34

如何测继电器是否正常

继电器是一种电控制器件&#xff0c;广泛应用于自动控制、电力保护等领域。为了确保继电器的正常工作&#xff0c;定期检测其状态是非常必要的。以下是一些常用的方法来测试继电器是否正常工作&#xff1a; 1. 视觉检查&#xff1a; - 观察继电器的外观是否有损坏、变形或烧焦…...

编程日记 2024/12/24 5:25:31

最优二叉搜索树【东北大学oj数据结构10-4】C++

题面 最优二叉搜索树是由 n 个键和 n1 个虚拟键构造的二叉搜索树&#xff0c;以最小化搜索操作的成本期望值。 给定一个序列 Kk1​,k2​,...,kn​&#xff0c;其中 n 个不同的键按排序顺序 &#xff0c;我们希望构造一个二叉搜索树。 对于每个关键 ki​&#xff0c;我们有一个…...

编程日记 2024/12/24 5:24:27

ESP32应用开发-Webserver

文章目录 库调用实例实现思路技术要点 1. 前端涉及的文件需要包装再发送2. http-GET路由3. http-POST路由 开发环境&#xff1a;Arduino 库调用 #include <WebServer.h> #include <ArduinoJson.h> //IDE没有自带&#xff0c;需自行安装实例 WebServer server…...

编程日记 2024/12/24 5:23:26

【IMU：视觉惯性SLAM系统】

视觉惯性SLAM系统简介 相机&#xff08;单目/双目/RGBD)与IMU结合起来就是视觉惯性&#xff0c;通常以单目/双目IMU为主。 IMU里面有个小芯片可以测量角速度与加速度&#xff0c;可分为6轴(6个自由度)和9轴&#xff08;9个自由度&#xff09;IMU&#xff0c;具体的关于IMU的介…...

编程日记 2024/12/24 5:22:25

前端开发 之 12个鼠标交互特效下【附完整源码】

前端开发 之 12个鼠标交互特效下【附完整源码】 文章目录 前端开发 之 12个鼠标交互特效下【附完整源码】七&#xff1a;粒子烟花绽放特效1.效果展示2.HTML完整代码 八&#xff1a;彩球释放特效1.效果展示2.HTML完整代码 九&#xff1a;雨滴掉落特效1.效果展示2.HTML完整代码 十…...

编程日记 2024/12/24 5:21:23

Unity文件路径访问总结：从基础到高级的资源加载方法

在Unity开发中&#xff0c;文件路径的访问和资源加载是开发者经常需要处理的任务。无论是加载纹理、模型、音频&#xff0c;还是读取配置文件&#xff0c;正确地处理路径和资源加载是确保项目顺利运行的关键。本文将以Unity文件路径访问为主线&#xff0c;详细介绍Unity中常见的…...

编程日记 2024/12/24 5:20:22

AWS Transfer 系列：简化文件传输与管理的云服务

在数字化转型的今天&#xff0c;企业对文件传输、存储和管理的需求日益增长。尤其是对于需要大量数据交换的行业&#xff0c;如何高效、可靠地传输数据成为了一大挑战。为了解决这一难题&#xff0c;AWS 提供了一系列的文件传输服务&#xff0c;统称为 AWS Transfer 系列。这些…...

编程日记 2024/12/24 5:19:19

Jenkins Api Token 访问问题

curl --location http://192.168.18.202:8080/view/ChinaFish/job/Ali/buildWithParameters?token1142be281174ee8fdf58773dedcef7ea4c&DeployTypeUpdateConfig \ --header Authorization: •••••• \ --header Cookie: JSESSIONID.824aa9a5node01ojk9yhh3imc24duwy67…...

编程日记 2024/12/24 5:18:18

垂起固定翼无人机大面积森林草原巡检技术详解

垂起固定翼无人机大面积森林草原巡检技术是一种高效、精准的监测手段&#xff0c;以下是对该技术的详细解析&#xff1a; 一、垂起固定翼无人机技术特点 垂起固定翼无人机结合了多旋翼和固定翼无人机的优点&#xff0c;具备垂直起降、飞行距离长、速度快、高度高等特点。这种无…...

编程日记 2024/12/24 5:13:09

【Leetcode 每日一题】1387. 将整数按权重排序

问题背景 我们将整数 x x x 的 权重 定义为按照下述规则将 x x x 变成 1 1 1 所需要的步数&#xff1a; 如果 x x x 是偶数&#xff0c;那么 x x / 2 x x / 2 xx/2。如果 x x x 是奇数&#xff0c;那么 x 3 x 1 x 3 \times x 1 x3x1。 比方说&#xff0c; x …...

编程日记 2024/12/24 5:09:01

科研笔记 KDD 2025

1 基本介绍 KDD 每年有多次投稿周期。KDD 2025 将有两个截止时间&#xff1a;分别是 2024 年 8 月 1 日和 2025 年 2 月 1 日&#xff08;全文提交截止时间在摘要提交截止后一周&#xff09;。 同时&#xff0c;KDD 会议论文集&#xff08;Proceedings&#xff09;将分两批出…...

编程日记 2024/12/24 5:08:00

黑马Java面试教程_P8_并发编程

系列博客目录 文章目录 系列博客目录前言1.线程的基础知识1.1 线程和进程的区别&#xff1f;难2频3面试文稿 1.2 并行和并发有什么区别&#xff1f; 难1频1面试文稿 1.3 创建线程的四种方式 难2频4面试文稿 1.4 runnable 和 callable 有什么区别 难2频3面试文稿 1.5 线程的 run…...

编程日记 2024/12/24 5:03:54

网络视频监控平台/安防监控/视频综合管理Liveweb视频汇聚平台解决方案

一、当前现状分析 当前视频资源面临以下问题&#xff1a; 1&#xff09;不同单位在视频平台建设中以所属领域为单位&#xff0c;设备品牌众多&#xff0c;存在的标准不一&#xff0c;各系统之间也没有统一标准&#xff1b; 2&#xff09;各单位视频平台建设分散、统筹性差&am…...

编程日记 2024/12/24 5:01:48

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/10/16 7:51:26

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2026/1/26 17:38:32

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/15 5:20:50

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2026/1/21 19:50:32

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43

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/12/12 8:42:24

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2026/1/28 7:31:14