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

认识html

news 2025/12/15 23:52:31

1.html的特点

先看一段简单的html代码

<html><head></head><body>hello world</body>
</html>

如果将这段带有这段代码的.html文件拉进浏览器中,就会出现一个页面,内容就是hello world,

如下图:

由上面的代码,我们可以了解到一些html代码的特点.

html代码是通过标签来组织的,比如:<html></html>这种成对出现的东西叫做"标签"

一个标签通常是成对出现的

标签直接可以嵌套.一个表亲的内容可以是其他一个或多个标签,此时标签构成了一个"树形结构".

如下图:

可以在开始标签中,给标签富裕属性,属性相当于键值对,可以有一个或者多个.

html 是一个html文件的最顶层标签,也是树根节点

head 存放了这个页面的一些属性.

body 存放了这个页面包含的内容

再如下面这个代码(在vscode中敲"!"+"回车"就出来了)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>hello world
</body>
</html>

其中

表示网页中使用的语言是英语.(lang->language,en->english)

表示网页的标题.如下:

我们也可以对其修改,如下:

<title>我要上大厂</title>

2.html中的一些常见标签

注释标签

<body><!-- 这是一条注释 -->hello world
</body>

注释是不会在网页中出现的,但是如果查看网页源代码是可以看到的.

标题标签

<body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6>
</body>

注意:每个标签都单独占一行,html中写的换行符会被忽略.

段落标签

<body><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat enim corporis ex ad architecto quo dolore in saepe ipsa accusamus nulla sit sint, tempore dicta ullam ab culpa optio Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat mollitia quo at quidem quis! Quae deleniti molestias laudantium at doloribus aperiam a cumque numquam eaque voluptate reprehenderit consequatur, natus <minima class="lorem"></minima><a href="" class="lorem"></a></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat enim corporis ex ad architecto quo dolore in saepe ipsa accusamus nulla sit sint, tempore dicta ullam ab culpa optio Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat mollitia quo at quidem quis! Quae deleniti molestias laudantium at doloribus aperiam a cumque numquam eaque voluptate reprehenderit consequatur, natus <minima class="lorem"></minima><a href="" class="lorem"></a></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat enim corporis ex ad architecto quo dolore in saepe ipsa accusamus nulla sit sint, tempore dicta ullam ab culpa optio Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat mollitia quo at quidem quis! Quae deleniti molestias laudantium at doloribus aperiam a cumque numquam eaque voluptate reprehenderit consequatur, natus <minima class="lorem"></minima><a href="" class="lorem"></a></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat enim corporis ex ad architecto quo dolore in saepe ipsa accusamus nulla sit sint, tempore dicta ullam ab culpa optio Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat mollitia quo at quidem quis! Quae deleniti molestias laudantium at doloribus aperiam a cumque numquam eaque voluptate reprehenderit consequatur, natus <minima class="lorem"></minima><a href="" class="lorem"></a></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat enim corporis ex ad architecto quo dolore in saepe ipsa accusamus nulla sit sint, tempore dicta ullam ab culpa optio Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat mollitia quo at quidem quis! Quae deleniti molestias laudantium at doloribus aperiam a cumque numquam eaque voluptate reprehenderit consequatur, natus <minima class="lorem"></minima><a href="" class="lorem"></a></p>
</body>

此处我们使用vscode上输入lorem来快速生成一段文本,网页中如下:

可以看到每个段楼之间都会自动都隔一行.

换行标签

我们仍然使用上面的段落来测试(<br>在第一个逗号后面)

<body><p>Lorem ipsum dolor sit amet,<br><br> consectetur adipisicing elit. Repellat enim corporis ex ad architecto quo dolore in saepe ipsa accusamus nulla sit sint, tempore dicta ullam ab culpa optio Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat mollitia quo at quidem quis! Quae deleniti molestias laudantium at doloribus aperiam a cumque numquam eaque voluptate reprehenderit consequatur, natus <minima class="lorem"></minima><a href="" class="lorem"></a></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat enim corporis ex ad architecto quo dolore in saepe ipsa accusamus nulla sit sint, tempore dicta ullam ab culpa optio Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat mollitia quo at quidem quis! Quae deleniti molestias laudantium at doloribus aperiam a cumque numquam eaque voluptate reprehenderit consequatur, natus <minima class="lorem"></minima><a href="" class="lorem"></a></p>
</body>

格式化标签

<body><strong>变粗</strong><b>变粗</b><br><em>倾斜</em><i>倾斜</i><br><del>删除线</del><s>删除线</s><br><ins>下划线</ins><u>下划线</u>
</body>

其对应结果如下:

图片

<body><img src="d:apple.jpeg">
</body>

img里面有一个必填项是src

src里面需要填写图片的路径,这个路径可以是绝对路径、相对路径、网络路径.

上面这个是绝对路径,显示如下:

如果使用相对路径:

如果使用网络路径:

<body><img src="https://img1.baidu.com/it/u=3477494620,2150111877&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334">
</body>

上面这几种的展现结果都一样,就不截图展示了.

在img中还有几个其他的属性

alt

<body><img alt="这是一个苹果" src="https://im.baidu.com/it/u=3477494620,2150111877&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334">
</body>

此时我们对链接做出一些调整,让其展现不出来图片,此时就会显示alt里面的字符串.

如下:

title

<body><img title="这是一个苹果" alt="这是一个苹果" src="https://img1.baidu.com/it/u=3477494620,2150111877&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334">
</body>

此时将鼠标滑道图片上会显示title里面的字符串(此时链接是完好的)

但是没办法将此部分截图,此处不演示图片了.

width/height

width和height可以单独出现也可以同时出现,若单独出现,会根据单独的这一项对图片进行等比例缩放

<body><img width="500px" height="500px" title="这是一个苹果" alt="这是一个苹果" src="https://img1.baidu.com/it/u=3477494620,2150111877&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334">
</body>

width代表宽度,height代表高度.里面的px是像素(单位)

1个像素就是显示器里面的一个小灯泡,我们看到的显示器里面是由很多个小灯泡通过变换颜色显示的,

显示器分辨率就是横的小灯泡个数×纵的小灯泡个数.

超链接标签

<body><a href="https://www.sogou.com" target="blank">搜狗</a>
</body>

其中href里面存放链接或者IP地址都可以,target里面放上blank可以让该链接单独成一个页面.

如下:

如果不加这句,如下:

<body><a href="https://www.sogou.com">搜狗</a>
</body>

点击后就会在改页面展示搜狗页面.

表格标签

table表示整个表格

tr表示一行

td表示一个单元格

th表示表头中的一个单元格

<body><table><tr><th>姓名</th><th>电话</th></tr><tr><td>A</td><td>111</td></tr><tr><td>B</td><td>222</td></tr><tr><td>C</td><td>333</td></tr></table>
</body>

如果在table中加上width和height,如下:

<body><table width="500px" height="300px"><tr><th>姓名</th><th>电话</th></tr><tr><td>A</td><td>111</td></tr><tr><td>B</td><td>222</td></tr><tr><td>C</td><td>333</td></tr></table>
</body>

border加上表格线

<body><table width="500px" height="300px" border="1px"><tr><th>姓名</th><th>电话</th></tr><tr><td>A</td><td>111</td></tr><tr><td>B</td><td>222</td></tr><tr><td>C</td><td>333</td></tr></table>
</body>

cellspacing="0" 将线画实

若要居中需要css代码(此处不说明),如下:

<style>是css代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我要上大厂</title><style>td{text-align:center;}</style>
</head>
<body><table width="500px" height="300px" border="1px" cellspacing="0"><tr><th>姓名</th><th>电话</th></tr><tr><td>A</td><td>111</td></tr><tr><td>B</td><td>222</td></tr><tr><td>C</td><td>333</td></tr></table>
</body>
</html>

列表标签

有序列表 ol

无序列表 ul

列表项 li

<body><ol><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li></ol><ul><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li></ul>
</body>

有序列表带1234....

无序则不带.

表单标签

input标签

input有多种形态

1.单行文本框

<body><input type="text">
</body>

2.输入密码的单行文本框

<body><input type="password">
</body>

3.单选框

<body>请选择性别<input type="radio">男<input type="radio">女
</body>

此时是可以选择多个的,如果在每个标签中都加上一个name的话.此时name相同的单选框会互相排斥,也就是多个name相同的单选框只能选择一个.

<body>请选择性别<input type="radio" name="gender">男<input type="radio" name="gender">女
</body>

如果在上面的情况下,在其中一个标签中加上checked,此时会默认选择这一项

<body>请选择性别<input type="radio" name="gender">男<input type="radio" name="gender" checked="checked">女
</body>

4.多选框

<body>大学生的日常<input type="checkbox"> 吃饭<input type="checkbox"> 学习<input type="checkbox"> 睡觉
</body>

此时也可以使用checked来默认选中某个/某几个选项

5.按钮

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

value里面的内容会在按钮上面出现(可有可无)

提交按钮需要搭配form完成

6.文件选择框

<body><input type="file">
</body>

下拉菜单 select

<body><select><option>数学</option><option>语文</option><option>英语</option><option>物理</option><option>化学</option></select>
</body>

多行编辑框 textarea

<body><textarea cols="30" rows="10"></textarea>
</body>

cols表示行,rows表示列

这个框的大小还可以进行拖拽控制,此处不演示了.

无语意标签 div和span

像h1、p、table等这种有具体含义的标签是有意义标签

div、span这种无意义标签,是没有一个具体含义的,换言说就是可以在任意场景下使用的标签

div和span的区别:

div默认独占一行(块级元素)

span默认不独占一行(行级元素)

认识html

1.html的特点先看一段简单的html代码<html><head></head><body>hello world</body> </html>如果将这段带有这段代码的.html文件拉进浏览器中,就会出现一个页面,内容就是hello world,如下图:由上面的代码,我们可以了解到一些html代码的特点…...

编程日记 2023/2/26 8:49:12

在外包公司熬了 3 年终于进了字节，竭尽全力....

其实两年前校招的时候就往字节投了一次简历，结果很明显凉了，随后这个理想就被暂时放下了，但是这个种子一直埋在心里这两年除了工作以外，也会坚持写博客，也因此结识了很多优秀的小伙伴，从他们身上学到了特别…...

编程日记 2023/2/26 8:48:00

绝对让你明明白白，脚把脚带你盯着 I2C 时序图将 I2C 程序给扣出来（基于STM32的模拟I2C）

目录前言一、关于STM32 I/O端口位的基本结构讲解二、模拟I2C编写前的需知道的知识1、I2C简介2、根据时序编写模拟I2C程序重要的两点Ⅰ、主机发送数据给从机时的时序控制Ⅱ、主机接收来自从机的数据时的时序控制Ⅲ、完整的I2C时序图（按写程序的思想分割时序&#xff…...

编程日记 2023/2/26 8:46:52

2023年全国最新工会考试精选真题及答案5

百分百题库提供工会考试试题、工会考试预测题、工会考试真题、工会证考试题库等，提供在线做题刷题，在线模拟考试，助你考试轻松过关。一、单选题 1.企业工会委员会实行（），重要问题须经（&#x…...

编程日记 2023/2/26 8:45:46

一文2000字手把手教你自动化测试Selenium+pytest+数据驱动

主流自动化框架 selenium ：web端自动化框架 ，（行业里面最核心的框架） appium ：手机app端框架 requests ：接口测试 selenium 工具类封装 selenium提供了很多方法供我们去完成网页元素的操作， …...

编程日记 2023/2/26 8:44:37

windows安装Ubuntu子系统以及图形化界面记录

文章目录1. windows环境设置2. 开始安装3. ubuntu使用3.1 启动和退出 Linux 子系统3.2 安装位置3.3 更换源4. 安装图形化界面4.1 安装VcXsrv4.2 安装桌面环境（1）方法1：VcXsrv Gnome（2）方法2：VcXsrv Xfce4…...

编程日记 2023/2/26 8:43:29

通俗易懂，十分钟读懂DES，详解DES加密算法原理，DES攻击手段以及3DES原理。Python DES实现源码

文章目录1、什么是DES2、DES的基本概念3、DES的加密流程4、DES算法步骤详解4.1 初始置换(Initial Permutation，IP置换)4.2 加密轮次4.3 F轮函数4.3.1 拓展R到48位4.3.2 子密钥K的生成4.3.3 当前轮次的子密钥与拓展的48位R进行异或运算4.3.4 S盒替换（Subs…...

编程日记 2023/2/26 8:42:22

为多态基类声明virtual析构函数

我们知道，有时会让一个基类指针指向用 new 运算符动态生成的派生类对象（类似接口的作用）；同时，用 new 运算符动态生成的对象都是通过 delete 指向它的指针来释放的。如果一个基类指针指向用 new 运算符动态生成的派生类…...

编程日记 2023/2/26 8:41:12

啊哈算法读书笔记第 2 章栈、队列、链表

第 2 章栈、队列、链表目录第 2 章栈、队列、链表队列： 解密回文——栈纸牌游戏： 链表模拟链表队列： 首先将第 1 个数删除，紧接着将第 2 个数放到这串数的末尾，再将第 3 个数删除并将第 4 个数放到这串…...

编程日记 2023/2/26 8:40:05

Git ---- IDEA 集成 Git

Git ---- IDEA 集成 Git1. 配置 Git 忽略文件2. 定位 Git 程序3. 初始化本地库4. 添加到暂存区5. 提交到本地库6. 切换版本7. 创建分支8. 切换分支9. 合并分支10. 解决冲突1. 配置 Git 忽略文件 1. Eclipse 特定文件 2. IDEA 特定文件 3. Maven 工程的 target 目录问题1…...

编程日记 2023/2/26 8:38:55

【LeetCode 704】【Go】二分查找

二分查找题解一、碎碎念从本周开始，重新更新刷题记录了哈。基于费曼学习法的原理，最好的输入是输出，所以与大家分享。鉴于目前这个糟糕的市场环境，还是要练好自己的基本技术，万一那天就被迫 N 1了，你…...

编程日记 2023/2/26 8:37:46

【代码随想录训练营】【Day23】第六章｜二叉树｜669. 修剪二叉搜索树｜108.将有序数组转换为二叉搜索树｜538.把二叉搜索树转换为累加树

修剪二叉搜索树题目详细：LeetCode.669 做这道题之前建议先看视频讲解，没有想象中那么复杂：代码随想录—修剪二叉搜索树由题可知，需要删除节点值不在区间内的节点，所以可以得到三种情况： 情况一&#…...

编程日记 2023/2/26 8:36:35

CV——day78 读论文：通过静态背景构建扩展低通道路边雷达的探测距离（目标是规避风险）

Extending the Detection Range for Low-Channel Roadside LiDAR by Static Background Construction 通过静态背景构建扩展低通道路边雷达的探测距离I. INTRODUCTIONII. RELATED WORKA. LiDAR-Based 3-D Vehicle and Road User DetectionB. LiDAR Data Background FilteringC.…...

编程日记 2023/2/26 8:35:25

【编程入门】应用市场（go语言版）

背景前面已输出多个系列： 《十余种编程语言做个计算器》《十余种编程语言写2048小游戏》《17种编程语言10种排序算法》《十余种编程语言写博客系统》《十余种编程语言写云笔记》《N种编程语言做个记事本》目标为编程初学者打造入门学习项目，使…...

编程日记 2023/2/26 8:34:18

Linux（openEuler）没有界面连接互联网方法

前言: 系统版本openEuleropenEuler-22.03-LTS-x86_64-dvd 我们在安装linux之后，一般都是无界面的情况。大部分情况都是需要自己安装界面的，如果路由器的情况下直接插上网络就好了。下面就开始介绍两种方法进行linxu网络的连接。注意: 小编是使用的第一…...

编程日记 2023/2/26 8:33:08

第一天软考中级--嵌入式系统设计师考试复习教程开始了

第一天嵌入式系统设计师考试复习教程第二天软考中级--嵌入式系统设计师考试考试大纲解析目录...

编程日记 2023/2/26 8:31:57

分享 10 个高频 Python 面试题

Python 很容易学会，但很难掌握。你可以在几天内了解它的基本语法，但是要能够用 Python 开发出足够好的商业软件，多年的实践是必须的。因为，无论你使用哪种编程语言，你都必须对其复杂的内部机制有足够的了解&#xff0c…...

编程日记 2023/2/26 8:30:46

ThreadLocal原理、结构、源码解析

文章目录一、Thread简介1.什么是ThreadLocal2.为什么要是用ThreadLocal2.1Synchronized、Lock保证线程安全2.2ThreadLocal保证线程安全3.ThreadLocal和Synchronized的区别二、ThreadLocal原理1.Thread抽象内部结构2.ThreadLocal源码2.1Thread、ThreadLocal、ThreadLocalMap、En…...

编程日记 2023/2/26 8:28:28

分布式之PBFT算法

写在前面在分布式之拜占庭问题一文中我们分析了拜占庭问题，并一起看了支持拜占庭容错的口信消息性和签名消息性算法，但是这两种算法都有一个非常严重的问题，就是消息数量太多，通信的成本太大，消息数量复杂度为O(n ^…...

编程日记 2023/2/26 8:27:20

Linux 操作系统——查看/修改系统时区、时间、本地时间修改为UTC

文章目录1.背景描述2.知识储备3.解决步骤1. 查看当前时区2.修改设置Linux服务器时区3.复制相应的时区文件，替换系统时区文件；或者创建链接文件4. 查看和修改Linux的时间5. 硬件时间和系统时间的相互同步1.背景描述最近一个项目日期采用java8的LocalDa…...

编程日记 2023/2/26 8:25:05

铭豹扩展坞 USB转网口突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因：背景：一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/12/15 5:20:20

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

反射获取方法和属性

Java反射获取方法在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

令牌桶滑动窗口-＞限流分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析限并发分布式信号量代码实现结果分析lua脚本实现原理双注解去实现限流并发结果分析： 实际业务去理解体会统一注…...

编程新知 2025/12/11 17:03:24

力扣-35.搜索插入位置

题目描述给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/12/3 3:22:43

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...

编程新知 2025/12/14 1:43:42

小木的算法日记-多叉树的递归/层序遍历

🌲 从二叉树到森林：一文彻底搞懂多叉树遍历的艺术 🚀 引言你好，未来的算法大神！ 在数据结构的世界里，“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从二叉树开始入门的，它…...

编程新知 2025/11/13 14:22:52

【FTP】ftp文件传输会丢包吗？批量几百个文件传输，有一些文件没有传输完整，如何解决？

FTP（File Transfer Protocol）本身是一个基于 TCP 的协议，理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况，主要原因包括： ✅ 一、FTP传输可能“丢包”或文件不完整的原因原因描述网络…...

编程新知 2025/8/17 3:31:21

es6+和css3新增的特性有哪些

一：ECMAScript 新特性（ES6） ES6 (2015) - 革命性更新 1，记住的方法，从一个方法里面用到了哪些技术 1，let /const块级作用域声明2，**默认参数**：函数参数可以设置默认值。3&#x…...

编程新知 2025/11/26 7:13:37

在Zenodo下载文件用到googlecolab googledrive

方法：Figshare/Zenodo上的数据/文件下载不下来？尝试利用Google Colab ：https://zhuanlan.zhihu.com/p/1898503078782674027 参考： 通过Colab&谷歌云下载Figshare数据，超级实用！！&#xff0…...

编程新知 2025/12/14 17:27:00