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

前端知识补充—HTML

news 文章来源：https://blog.csdn.net/2301_80055001/article/details/144646863 2025/5/10 8:29:11

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

workman服务端开发模式-应用开发-后端api推送修改二

需要修改两个地方&#xff0c;第一个是总控制里面的续token延时&#xff0c;第二个是操作日志记录 一、总控续token延时方法 在根目录下app文件夹下controller文件夹下Base.php中修改isLoginAuth方法&#xff0c;具体代码如下&#xff1a; <?php /*** 总控制* User: 龙哥…...

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

SQL 使用带聚集函数的联结

聚集函数用于汇总数据&#xff0c;通常用于从一个表中计算统计信息&#xff0c;但也可以与联结一起使用。以下是一个例子&#xff0c;展示如何使用聚集函数统计每个顾客的订单数。 示例 1&#xff1a;使用 COUNT() 函数与 INNER JOIN 假设我们需要检索所有顾客及每个顾客所下…...

编程日记 2024/12/24 4:57:44

Restaurants WebAPI（三）——Serilog/FluenValidation

文章目录 项目地址一、Serilog使用1.1 安装 Serilog1.2 注册日志服务1.3 设置日志级别和详情1.4 配置到文件里1.5 给不同的环境配置日志1.5.1 配置appsettings.Development.json二、Swagger的使用三、自定义Exception中间件3.1 使用FluentValidation项目地址 教程作者：教程地址…...

编程日记 2024/12/24 4:54:39

概率论得学习和整理32： 用EXCEL描述正态分布，用δ求累计概率，以及已知概率求X的区间

目录 1 正态分布相关 2 正态分布的函数和曲线 2.1 正态分布的函数值&#xff0c;用norm.dist() 函数求 2.2 正态分布的pdf 和 cdf 2.3 正态分布的图形随着u 和 δ^2的变化 3 正态分布最重要的3δ原则 3.0 注意&#xff0c;这里说的概率一定是累计概率CDF&#xff0c;而…...

编程日记 2024/12/24 4:51:36

【原生js案例】让你的移动页面实现自定义的上拉加载和下拉刷新

目前很多前端UI都是自带有上拉加载和下拉刷新功能，按照官网配置去实现即可，比如原生小程序，vantUI等UI框架，都替我们实现了内部功能。 那如何自己来实现一个上拉加载和下拉刷新的功能？ 实现效果 不用浏览器的css滚动条，自定义实现滚动效果 自定义实现滚动，添加上拉加载…...

编程日记 2024/12/24 4:49:33

【linux 常用命令】

1. 使用xshell 通过SSH连接到Linux服务器 ssh -p 端口号 usernameip地址2. 查看当前目录下的子文件夹的内存占用情况 du -a -h -d 1或者 du -ah -d 1-a &#xff1a;展示所有子文件夹&#xff08;包括隐藏文件夹&#xff09;&#xff0c;-h &#xff1a;以人类可读的形式&am…...

编程日记 2024/12/24 4:44:29

【JetPack】Room数据库笔记

Room数据库笔记 ORM框架&#xff1a;对齐数据库数据结构与面向对象数据结构之间的关系&#xff0c;使开发编程只考虑面向对象不需要考虑数据库的结构 Entity : 数据实体&#xff0c;对应数据库中的表 <完成面向对象与数据库表结构的映射> 注解&#xff1a; 类添加注解…...

编程日记 2024/12/24 4:41:25

【CSS in Depth 2 精译_088】第五部分：添加动效概述 + 第 15 章：CSS 过渡特效概述 + 15.1：状态间的由此及彼

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第五部分 添加动效 ✔️【第 15 章 过渡】 ✔️ 15.1 状态间的由此及彼 ✔️15.2 定时函数 文章目录 第 5 部分 添加动效 Adding motion第 15 章 过渡 Transitions15.1 状态间的由此及彼 From here…...

编程日记 2024/12/24 4:40:24

# 起步专用 - 哔哩哔哩全模块超还原设计！(内含接口文档、数据库设计)

↑ 上方下载文档 (大小374KB) 接口文档预览 (超过50个接口) 一、数据库25张表er-关系清晰构图&#xff01;(tip: 鼠标右键图片 > 放大图像) 二、难点/经验 详细说明 热门评论排序评论点赞列表|DTO封装经验分享|精华接口文档说明 组员都说喜欢分档对应枚举码 如果这篇文章…...

编程日记 2024/12/24 4:35:16

[机器学习]XGBoost（3）——确定树的结构

XGBoost的目标函数详见[机器学习]XGBoost&#xff08;2&#xff09;——目标函数&#xff08;公式详解&#xff09; 确定树的结构 之前在关于目标函数的计算中&#xff0c;均假设树的结构是确定的&#xff0c;但实际上&#xff0c;当划分条件不同时&#xff0c;叶子节点包含的…...

编程日记 2024/12/24 4:31:11