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

速通HTML

news 2026/4/18 13:54:29

目录

HTML基础

1.快捷键

2.标签

HTML进阶

1.列表

a.无序列表

b.有序列表

c.定义列表

2.表格

a.内容

b.合并单元格

3.表单

a.input标签

b.单选框

c.上传文件

4.下拉菜单

5.文本域标签

6.label标签

7.按钮标签

8.无语义的布局标签div与span

9.字符实体

HTML基础

1.快捷键

 基于VS Code记录编写过程中常用的快捷键

功能快捷键
生成HTML基本骨架!+回车
保存代码Ctrl+S
在浏览器运行代码Alt+B
注释Ctrl+/
缩进Tab
取消缩进Shift+Tab
收起侧边栏Ctrl+B

先保存，再在浏览器运行才能刷新

2.标签

标签作用
h1——h6双标签标题标签，独占一行
p双标签段落标签，独占一行，段落间存在间隙
br单标签换行标签
hr单标签水平线标签
img图像
audio音频
video视频

文本格式化标签：

标签（双标签）作用
strong加粗
b加粗
em倾斜
i倾斜
ins下划线
u下划线
del删除线
s删除线

标签作用
<img src="" alt="">插入图片，src属性图像存在的位置和名称，必须写
属性
alt替换文本，图片无法显示时显示的文字
title提示文本，鼠标悬停时显示
width图片宽度值为数字，没有单位，浏览器缩放图片默认等比例缩放
height图片高度值为数字，没有单位
标签作用
<video src=""></video>视频标签，src属性视频存在的位置和名称，必须写
属性
controls显示视频控制面板，在html5内如果属性值和属性名一样，可以简写为一个单词
loop循环播放
muted静音播放
autoplay自动播放，浏览器支持在静音模式下自动播放。注意autoplay属性需要和muted配合使用才能生效
标签作用
<audio src=""></audio>音频标签，src属性音频存在的位置和名称，必须写
属性
controls显示音频控制面板
loop循环播放
autoplay自动播放，浏览器会禁止自动播放，可以通过用户点击按钮再播放
标签作用
<a href="" target=""></a>超链接标签，双标签，herf属性为链接，target=_blank表示新窗口跳转页面

相对路径：

. 表示当前文件所在文件夹

.. 表示当前文件上一级

/ 表示进入某文件夹里

常常使用相对路径

绝对路径：

直接在盘符里复制就好，在Windows系统里默认是\，其他系统是/，统一使用/

也可以使用网络上图片的在线网址

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接标签</title>
</head>
<body><!-- 跳转到网络文件 --><a href="https://www.bilibili.com/">跳转到bilibili</a><br><!-- 跳转到本地文件，但是是在同一个页面跳转实现--><br><a href="./图像标签.html">跳转到图像标签</a><!-- 跳转到新标签页 --><a href="./标题和段落标签.html" target="_blank">标题和段落标签</a><br><!-- 开发初期不知道跳转链接的情况，使用#暂时填补则不会跳转 --><a href="#">空链接</a>
</body>
</html>

HTML进阶

1.列表

a.无序列表

b.有序列表

c.定义列表

2.表格

a.内容

加入表格结构标签thead,tbody,tfoot便于浏览器读取，也可省略

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第二天</title>
</head>
<body><!-- 无序列表 --><ul><li>无序列标签1</li><li>无序列标签2</li></ul><!-- 有序列表 --><ol><li>有序列标签1</li><li>有序列标签2</li></ol><!-- 定义列表 --><dl><dt>标题</dt><dd>描述1</dd><dd>描述2</dd></dl><!-- 表格标签，加border后能显示边框 加入表格结构标签thead,tbody,tfoot便于浏览器读取，也可省略--><table border="1"><thead><tr><th>第一行表头单元格1</th><th>第一行表头单元格2</th></tr></thead><tbody><tr><td>第一行内容单元格1</td><td>第一行内容单元格2</td></tr></tbody><tfoot><tr><td>第二行汇总单元格1</td><td>第二行汇总单元格2</td></tr></tfoot></table>
</body>
</html>

b.合并单元格

注意

表格是在自己的结构标签内进行合并的，不能跨结构标签thead、tbody、tfoot合并

<!-- 合并单元格，遵循“保留最左最上”原则 --><table border="1"><tr><th>语文</th><th>数学</th><th>英语</th></tr><tr><td>70</td><td rowspan="2">80</td><td>90</td></tr><tr><td>90</td><!-- <td>80</td> 删除--><td>70</td></tr><tr><td colspan="3">160</td><!-- <td>160</td> 删除--><!-- <td>160</td> 删除--></tr></table>

3.表单

作用：收集用户信息

使用场景：

  • 登录页面

  • 注册页面

  • 搜索区域

a.input标签

添加input标签占位文本：使用placeholder属性即可

b.单选框

c.上传文件

<br><!-- 表单标签——input标签使用 --><!-- 单纯的文本形式，不能换行 -->文本框：<input type="text"><br><!-- 自动非明文显示 --> <!-- input标签占位文本 -->密码框：<input type="password" placeholder="请输入密码"><br>单选框：<!-- gender是自定义名称，添加checked属性，默认选中 --><input type="radio" name="gender"> 男<input type="radio" name="gender" checked> 女<br><br><!-- 默认只可上传一个文件，添加multiple属性可实现文件多选功能 -->上传一个文件：<input type="file" ><br>上传多个文件：<input type="file" multiple><br><br><!-- 添加checked属性，实现默认选中 -->多选框：<input type="checkbox"> 苹果多选框默认选中：<input type="checkbox" checked> 草莓<br>

4.下拉菜单

<!-- 下拉菜单，使用属性selected实现默认选中-->城市：<!-- <select name="" id=""></select> name和id等是发送数据使用的属性--><select ><option>北京</option><option>上海</option><option selected>广州</option></select><br><br>

5.文本域标签

<!-- 文本域标签 与input不同，能自动换行，右下角有拖拽功能，在未来都要使用CSS设置尺寸并禁用该功能--><textarea>请输入评论</textarea><br><br><!-- 写法一： --><input type="radio" name="gender" id="man"><label for="man">男</label><!-- 写法二： --><label> <input type="radio" name="gender"> 女</label><br><br><br>

6.label标签

作用：

  • 网页中作为某个标签的说明文本

  • 绑定文字和表单控件的关系，增大表单控件的点击范围

7.按钮标签

<!-- 按钮标签 需要使用form标签统一管理功能才能实现，action属性是要与后台链接--><form action="">用户名：<input type="text"><br>密码：<input type="password"><br><br><!-- 如果省略type属性，是默认的提交功能 --><button type="submit"> 提交</button><button type="reset"> 重置</button><!-- 普通按钮后续与JS配合使用 --><button type="button">普通按钮</button></form><br><br>

8.无语义的布局标签div与span

作用：用于布局网页，划分区域，摆放内容

  • div：独占一行，换行，（大盒子）

  • span：不换行，（小盒子）

<!-- 无语义的布局标签 --><div> div标签</div> <span> span标签1</span><span> span标签2</span><br><br>

9.字符实体

在网页中显示预留字符

常用的字符实体：

在代码中敲很多个空格，网页仅显示一个空格

<!-- 常用的字符实体 （类似转义字符）--><!-- 在代码中敲很多个空格，网页仅显示一个空格 -->明天会&nbsp;&nbsp;更好<br><br><br>

 【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】

相关文章：

速通HTML

目录 HTML基础 1.快捷键 2.标签 HTML进阶 1.列表 a.无序列表 b.有序列表 c.定义列表 2.表格 a.内容 b.合并单元格 3.表单 a.input标签 b.单选框 c.上传文件 4.下拉菜单 5.文本域标签 6.label标签 7.按钮标签 8.无语义的布局标签div与span 9.字符实体 HTML…...

编程日记 2025/2/25 23:17:55

安装 Milvus Java SDK

本主题介绍如何为 Milvus 安装 Milvus Java SDK。 当前版本的 Milvus 支持 Python、Node.js、GO 和 Java SDK。 要求 Java&#xff08;8 或更高版本&#xff09;Apache Maven 或 Gradle/Grails 安装 Milvus Java SDK 运行以下命令安装 Milvus Java SDK。 Apache Maven &…...

编程日记 2025/2/25 23:16:53

云手机如何进行经纬度修改

云手机如何进行经纬度修改 云手机修改经纬度的方法因不同服务商和操作方式有所差异&#xff0c;以下是综合多个来源的常用方法及注意事项&#xff1a; 通过ADB命令注入GPS数据&#xff08;适用于技术用户&#xff09; 1.连接云手机 使用ADB工具连接云手机服务器&#xff0c;…...

编程日记 2025/2/25 23:14:45

牛客周赛 Round 82（思维、差分、树状数组、大根堆、前后缀、递归）

文章目录 牛客周赛 Round 82&#xff08;思维、差分、树状数组、大根堆、前后缀、递归&#xff09;A. 夹心饼干B. C. 食堂大作战&#xff08;思维&#xff09;D. 小苯的排列计数(差分、树状数组)E. 和和&#xff08;大根堆&#xff0c;前缀和&#xff09;F. 怎么写线性SPJ &…...

编程日记 2025/2/25 23:13:32

MQTT实现智能家居------2、写MQTT程序的思路

举个最简单的例子&#xff1a; 手机------服务器-------家具 我们这里只看手机和家具的客户端&#xff1a; 手机&#xff1a;1&#xff09;需要连接服务器 2&#xff09;需要发布指令给服务器到家里的家具 3&#xff09;接受来自于家里家具的异常状况 4&#xff09;保持心…...

编程日记 2025/2/25 23:10:27

大模型面试问题准备

1. BERT的多头注意力为什么需要多头&#xff1f; 为了捕捉不同子空间的语义信息&#xff0c;每个头关注不同的方面&#xff0c;增强模型的表达能力 2. 什么是softmax上下溢出问题&#xff1f; 问题描述&#xff1a; 上溢出&#xff1a;ye^x中&#xff0c;如果x取非常大的正数…...

编程日记 2025/2/25 23:09:22

C语言：二维数组在内存中是怎么存储的

目录 1. 二维数组的定义&#xff1a; 2. 行主序存储&#xff1a; 具体内存排列&#xff1a; 3. 如何通过指针访问数据&#xff1a; 4. 总结&#xff1a; 在 C 语言中&#xff0c;二维数组是按 行主序&#xff08;row-major order&#xff09; 存储的。也就是说&#xff0c…...

编程日记 2025/2/25 23:08:16

AI时代前端开发技能变革与ScriptEcho：拥抱AI，提升效率

在飞速发展的科技浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;正以前所未有的速度改变着各个行业&#xff0c;前端开发领域也不例外。曾经被认为是核心竞争力的传统前端技能&#xff0c;例如精通HTML、CSS和JavaScript&#xff0c;其价值正在发生微妙的变化。 得益于…...

编程日记 2025/2/25 23:01:57

计算机毕业设计SpringBoot+Vue.js美容院管理系统(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/2/25 22:55:41

【LeetCodehHot100_0x01】

LeetCodeHot100_0x01 1. 两数之和 解题思路&#xff1a; 暴力枚举法、哈希法 【暴力枚举】 class Solution {public int[] twoSum(int[] nums, int target) {int n nums.length;for(int i0;i<n;i) {for(int ji1;j<n;j) {if(nums[i] nums[j] target) {return new in…...

编程日记 2025/2/25 22:53:37

Qt::MouseButtons解析

一 问题 今天想自定定义一个QMouseEvent变量，变量的的初始化参数有Qt::MouseButtons，这是个啥？查看类型为QFlags<Qt::MouseButton>。 二 Qt::MouseButton Qt::MouseButton 是 Qt 框架中定义的一个枚举类型（enum），用于表示鼠标事件中的物理按钮。它是 Qt 事件处理…...

编程日记 2025/2/25 22:52:31

跨域问题解释及前后端解决方案（SpringBoot）

一、问题引出 有时,控制台出现如下问题。 二、为什么会有跨域 2.1浏览器同源策略 浏览器的同源策略 &#xff08; Same-origin policy &#xff09;是一种重要的安全机制&#xff0c;用于限制一个源&#xff08; origin &#xff09;的文档或 脚本如何与另一个源的资源进行…...

编程日记 2025/2/25 22:47:21

4-知识图谱的抽取与构建-4_2实体识别与分类

&#x1f31f; 知识图谱的实体识别与分类&#x1f525; &#x1f50d; 什么是实体识别与分类&#xff1f; 实体识别&#xff08;Entity Recognition&#xff09;是从文本中提取出具体的事物&#xff0c;如人名、地名、组织名等。分类&#xff08;Entity Classification&#x…...

编程日记 2025/2/25 22:46:15

腾讯云大模型知识引擎×DeepSeek赋能文旅

腾讯云大模型知识引擎DeepSeek赋能文旅 ——以合肥文旅为例的技术革新与实践路径 一、技术底座&#xff1a;知识引擎与DeepSeek的融合逻辑 腾讯云大模型知识引擎与DeepSeek模型的结合&#xff0c;本质上是**“知识库检索增强生成&#xff08;RAG&#xff09;实时联网能力”**…...

编程日记 2025/2/25 22:43:07

TMDS视频编解码算法

因为使用的是DDR进行传输&#xff0c;即双倍频率采样&#xff0c;故时钟只用是并行数据数据的5倍&#xff0c;而不是10倍。 TMDS算法流程&#xff1a; 视频编码TMDS算法流程实现&#xff1a; timescale 1 ps / 1ps //DVI编码通常用于视频传输&#xff0c;将并行数据转换为适合…...

编程日记 2025/2/25 22:42:06

C++程序员内功修炼——Linux C/C++编程技术汇总

在软件开发的宏大版图中&#xff0c;C 语言宛如一座巍峨的高山&#xff0c;吸引着无数开发者攀登探索。而 Linux 操作系统&#xff0c;以其开源、稳定、高效的特性&#xff0c;成为了众多开发者钟爱的开发平台。将 C 与 Linux 相结合&#xff0c;就如同为开发者配备了一把无坚不…...

编程日记 2025/2/25 22:40:36

【数据结构】链表中快指针和慢指针

目录 一、找出并返回链表的中间结点 二、输出链表中倒数第k个结点 三、判断链表中是否有环 四、两个单链表相交 一、找出并返回链表的中间结点 给你单链表的头结点 head ,请你找出并返回链表的中间结点。如果有两个中间结点,则返回第二个中间结点。 要求&#xff1a;只遍历…...

编程日记 2025/2/25 22:39:21

6_zookeeper集群配置

配置 一、配置myid文件 # 进入解压好的文件夹下面 touch myid vim myid # master节点写0&#xff0c;slave1节点写1&#xff0c;slave2节点写2二、配置zoo.cfg文件 1.在master节点编辑zookeeper配置文件 # 进入解压好的文件夹下面 cd conf/ cp zoo_sample.cfg zoo.cfg vim …...

编程日记 2025/2/25 22:37:09

Docker核心概念

容器介绍 Docker 是世界领先的软件容器平台&#xff0c;所以想要搞懂 Docker 的概念我们必须先从容器开始说起。 什么是容器? 先来看看容器较为官方的解释 一句话概括容器&#xff1a;容器就是将软件打包成标准化单元&#xff0c;以用于开发、交付和部署。 容器镜像是轻量…...

编程日记 2025/2/25 22:31:57

LD_PRELOAD 绕过 disable_function 学习

借助这位师傅的文章来学习通过LD_PRELOAD来绕过disable_function的原理 【PHP绕过】LD_PRELOAD bypass disable_functions_phpid绕过-CSDN博客 感谢这位师傅的贡献 介绍 静态链接&#xff1a; &#xff08;1&#xff09;举个情景来帮助理解&#xff1a; 假设你要搬家&#x…...

编程日记 2025/2/25 22:22:38

终极指南：3分钟创建专属动态生日祝福网页（完全免费）

终极指南&#xff1a;3分钟创建专属动态生日祝福网页&#xff08;完全免费&#xff09; 【免费下载链接】happy-birthday Wish your friend/loved-ones happy birthday in a nerdy way. 项目地址: https://gitcode.com/gh_mirrors/ha/happy-birthday 还在为生日祝福缺乏…...

编程新知 2026/4/18 13:48:00

手把手教你用Arduino IDE给自制STM32板子（比如RUMBA32）烧写程序，解决编译Marlin固件报错

从零构建STM32开发环境&#xff1a;Arduino IDE实战指南与Marlin固件编译排错 最近在折腾自制3D打印机主板时&#xff0c;发现用Arduino IDE给STM32芯片烧录程序远没有想象中简单。特别是当你用的不是标准开发板&#xff0c;而是自己设计的定制板型时&#xff0c;各种环境配置问…...

编程新知 2026/4/18 13:09:22

从单目到双目：利用aruco_ros和USB相机实现低成本机器人室内定位全流程

从单目到双目&#xff1a;低成本机器人室内定位系统实战指南 去年在为一个仓储AGV项目做POC验证时&#xff0c;客户提出了一个看似矛盾的需求&#xff1a;既要实现厘米级定位精度&#xff0c;又要求硬件成本控制在千元以内。面对这个挑战&#xff0c;我们最终选择了ArUco二维码…...

编程新知 2026/4/18 12:32:31

别再死记硬背IIC时序了！用STM32的GPIO位带操作手把手模拟一遍就懂了

从GPIO位带到IIC时序&#xff1a;用STM32实战破解通讯协议记忆难题 第一次接触IIC协议时&#xff0c;你是否也被那些起始条件、数据有效性、ACK应答的规则绕得头晕&#xff1f;作为嵌入式开发者&#xff0c;我们都经历过对着协议文档死记硬背却依然在调试时手忙脚乱的阶段。今天…...

编程新知 2026/4/18 12:32:31

AI写专著高效之道：AI专著生成工具，20万字专著快速搞定

学术专著写作与AI工具应用 学术专著的主要价值在于其内容的条理清晰和逻辑严谨&#xff0c;但这一点在写作过程中常常是最大的挑战。与专注于单一话题的期刊论文不同&#xff0c;专著的撰写需要构建一个包括绪论、理论基础、核心研究、应用拓展及结论的完整体系。每个章节都应…...

编程新知 2026/4/18 12:32:30

[Java][Leetcode hard] 42. 接雨水

没做出来&#xff0c;看的官解。 1. 动态规划的思想 当位于i处&#xff0c;i处能接水的体积左侧最高点和右侧最高点的最小值&#xff08;水桶原理&#xff09;-自身的高度 class Solution {public int trap(int[] height) {int sum 0;int n height.length;int[] leftMax new…...

编程新知 2026/4/18 12:22:23

别再死记硬背公式了！用Halcon+C#手把手搞定机器人九点标定（附完整代码与调试技巧）

HalconC#实战&#xff1a;机器人九点标定的工程化实现与避坑指南 在工业自动化领域&#xff0c;视觉引导机器人作业已成为提升生产效率的关键技术。而实现这一技术的核心环节&#xff0c;就是建立相机像素坐标系与机器人物理坐标系之间的精确映射关系——也就是我们常说的九点标…...

编程新知 2026/4/18 11:24:26

三步解锁Cursor Pro：告别试用限制的终极解决方案

三步解锁Cursor Pro&#xff1a;告别试用限制的终极解决方案 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your trial re…...

编程新知 2026/4/18 11:18:25

用Swift-All做AI绘画：快速微调Stable Diffusion模型实战

用Swift-All做AI绘画&#xff1a;快速微调Stable Diffusion模型实战 1. 引言&#xff1a;AI绘画的新选择 你是否曾经想过拥有一个专属的AI绘画助手&#xff1f;它能根据你的独特风格生成画作&#xff0c;理解你的创意需求&#xff0c;甚至模仿特定艺术家的笔触。传统的Stable…...

编程新知 2026/4/18 9:45:31

PyTorch实战：用ImageNet和MiniImageNet数据集快速验证你的模型（附完整代码）

PyTorch实战&#xff1a;用ImageNet和MiniImageNet数据集快速验证你的模型&#xff08;附完整代码&#xff09; 在深度学习研究领域&#xff0c;验证一个新模型的有效性往往需要大量的计算资源和时间。ImageNet作为计算机视觉领域的标杆数据集&#xff0c;虽然提供了丰富的训练…...

编程新知 2026/4/18 9:26:22