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

HTML基础语法

news 2026/2/9 1:38:00

一前端简介

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（美化）
行为	JavaScript	网页模型的定义和页面交互

二 HTML

1.简介

HTML（Hyper Text Markup Language）：超文本标记语言。

网页结构

整体<html>、头部<head>、标签<title>、主体<body>

<html><head><title>网页标题</title></head><body>网页主体内容</body>
</html>

2.VSCode

!+Enter：获得网页结构

ctrl+s：保存

fn+f5：运行

alt+b：（要先运行一次）在游览器中运行

ctrl+/：注释

ctrl+d：得到与选择值相同的代码

alt+z：自动换行

3.基础

3.1 标签

标签结构

标签分类

1.父子关系（嵌套关系）

2.兄弟关系（并列关系）

3.2 标题标签

<h1>1级标题
</h1>
...
<h6>6级标题
</h6>

1~6标题依次递减

3.3 段落标签

<p>段落内容
</p>

3.4 换行标签

<br>

3.5 水平线标签

<hr>

3.6 文本格式化标签

一般

突出重要语义

两者显示效果相同，主要后者突出重要语义

3.7 媒体标签

3.7.1 图片标签

<img src="图片路径" alt="">

属性名=“属性值”

alt属性

title属性

提示文本，当鼠标悬停时，才显示文本。

还可用于其他标签。

width,height属性

宽度和高度

如果只设置其中一个，则自动等比例缩放。

如果同时设置两个，可能图片变形

3.7.2 音频标签

<audio scr="音频文件名" controls></audio>

<audio scr="音频文件名" controls autoplay loop></audio>

目前支持格式：mp3,wav,ogg（多用mp3）

3.7.3 视频标签

<video src="视频文件名">

<video src="视频名" controls autoplay muted loop></video>

格式：mp4

3.8 路径

相对路径

相对路径：常用

从当前文件开始，找目标文件。

相对路径分类：

1.同级目录：文件在当前同一目录上，有两种形式

<img src="直接写文件名">
<img src="./文件名">

<img src="文件夹名/目标文件">

3.上级目录：先出当前文件夹，再找目标文件

<img src="../目标文件">
<!--上级目录+下级目录-->
<img src="../文件夹名/文件名">

绝对路径

从盘符开始，完整路径

3.9 链接标签

作用：点击后可跳转页面

<a href="链接">点击的位置</a>

<a href="https://www.baidu.com">点击跳转到百度</a>

如果跳转到本地文件

<a href="相对路径">点击跳转</a>

空连接（可后续添加链接）

<a href="#">空链接</a>

target属性

控制目标打开形式

<a href="链接" target="_blank"></a>

3.10 案例1：zoo

<!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><h1>ZOO</h1><hr><h2>Introduce</h2><p>12345678</p><h2>Cat</h2><img src="images/cat1.jpg" alt="It's a cat!" width="150"></body>
</html>

3.11 案例2：链接

首页面命名为index.html

index.html

<!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><h1>热词</h1><hr><h2>1.音频</h2><p>听音乐<a href="./one.html">张艺兴-莲</a></p><h2>2.视频</h2><p>看视频<a href="./two.html">烟花</a></p>
</body>
</html>

one.html

<!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><h1>张艺兴-莲</h1><hr><audio src="../music/Lit.mp3"controls></audio>
</body>
</html>

two.html

<!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><h1>烟花视频</h1><hr><video src="../vidio/烟花.mp4" controls></video>
</body>
</html>

4.列表标签

4.1 无序列表

<ul><!--列表内容--><li>第一条内容</li><li>第二条内容</li>
</ul>

注：ul标签只允许包含li的标签。

4.2 有序列表

<ol><!--列表内容--><li>第一条内容</li><li>第二条内容</li>
</ol>

注：ol标签只允许包含li的标签。

4.3 自定义列表

<dl><!--列表内容--><dt>列表标题</dt><dd>第一条（会自动缩进）</dd>
</dl>

注：dl中只允许放dt和dd标签

5.表格标签

5.1 表格设置

<table><!--用于包裹多个tr--><tr><!--表格整行,包裹多个td--><td>第一行第一列</td><td>第一行第二列</td></tr><tr><!--表格整行,包裹多个td--><td>第二行第一列</td><td>第二行第二列</td></tr>
</table>

表格属性

border：表格边框粗细

width：表格宽

height：表格高

<table border="1" width="10" height="10"></table>

5.2 表格标题和表头单元格标题

caption：表格大标题

th：表头单元格

<table><caption><strong>表格大标题</strong></caption><tr><th>表头单元格标题1（会自动加粗）</th><th>表头单元格标题2（会自动加粗）</th></tr>
</table>

5.3 合并单元格

左上原则：上下合并保留最上的，左右合并保留最左的。

rowspan：跨行合并

colspan：跨列合并

属性：要合并几个单元格就填数字几。

<td rowapan="2">标题</td>

6.表单标签

6.1 input系列

作用：在网页中收集用户信息的表单。

type属性值：

<!--写什么就显示什么-->
文本框：<input type="text">
<br>
<!--写的内容变成点点-->
密码框：<input type="password">
<br>
单选框：<input type="radio">
<br>
多选框：<input type="checkbox">
<br>
上传文件：<input type="file">

6.2 文本框属性

placeholder：在输入框里，浅色提示输入内容

<input type="text" placeholder="提示内容"

6.3 选框属性

name属性：对于单选框有分组功能，相同name为一组。

checked：默认选中。(多选时通用)

男女选择：

性别：<input type="radio" name="gender">男 <input type="radio" name="gender" checked>女

6.4 文件属性

multiple：多个文件上传

操作时可 ctrl+a 全选或 ctrl+点击选多个文件

<input type="file" multiple>

6.5 按钮

submit：提交按钮，点击后直接提交数据给后端。

reset：重置按钮，点击后恢复表单默认值。

button：无功能，等js添加自定义功能

表单域：

作用：多个标签绑定，重置时会一起没有。

<form action=""></form>

<form action="">用户名：<input type="text"><br><!--提交按钮--><input type="submit"><!--重置按钮--><input type="reset"><input type="button" value="写按钮名字">
</form>

button按钮

属性同input按钮。

button是双标签，更加便于包裹其他内容。

<button type="submit">提交按钮
</button>

6.6 下拉菜单标签

标签组成

select标签：下拉菜单的整体。

option标签：下拉菜单的每一项。

属性

selected：下拉菜单的默认选中。

<select><option>选项1</option><option>选项2</option><option>选项3</option><option selected>选项4</option>
</select>

6.7 文本域标签

网页中可输入多行的表单控件

标签名：textarea

属性：

cols：调宽度

rows：调高度

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

可通过拖拽改大小（css中可避免）

一般在css中设置宽高。

6.8 label标签

用于绑定内容与表单标签的关系。

使用方法1

1.用label标签把内容包裹起来；

2.在表单标签上添加id属性；

3.在label标签的for属性中设置对应的id属性。

<!--单选框和‘男’字关联，点‘男’相当于点击单选框-->
<input type="radio" name="sex" id="nan"><label for="nan">男</label>

使用方法2

1.直接使用label把内容和表单标签一起包裹起来。

<label><input type="radio" name="sex">女</label>

6.9 语义化标签

无语义的布局标签

div标签：一行只显示一个，会自动换行。

span标签：一行可显示多个。

<div>这是div标签
</div><span>这是span标签</span>

有语义布局标签

6.10 字符实体

常见字符实体：

要打多个空格：

空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

7.案例1 学生信息表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" width="500" height="300"><caption><h2>学生信息表</h2></caption><tr><th>班级</th><th>姓名</th><th>学号</th></tr><tr><td rowspan="2">2101</td><td>zyy</td><td>2112190127</td></tr><tr><td>gtt</td><td>2112190239</td></tr><tr><td>评语</td><td colspan="3">都是美女</td></tr></table>
</body>
</html>

8.案例2 表单

<!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><h1>LOVE</h1><hr><!-- 表单框架 --><form action="">昵称：<input type="text" placeholder="请输入昵称"><br><br>性别：<label><input type="radio" name="sex" checked>男</label><label><input type="radio" name="sex">女</label><br><br>所在城市：<select><option>北京</option><option>上海</option><option>广州</option><option selected>杭州</option></select><br><br>学历：<label><input type="radio" name="study" checked>本科</label><label><input type="radio" name="study">专科</label><label><input type="radio" name="study">博士</label><label><input type="radio" name="study">硕士</label><br><br>喜欢类型：<label><input type="checkbox">可爱</label><label><input type="checkbox" checked>性感</label><label><input type="checkbox">御姐</label><label><input type="checkbox">辣妹</label><label><input type="checkbox">洛丽塔</label><br><br>个人介绍：<br><textarea name="" id="" cols="30" rows="10"></textarea><br><br><h3>承诺书</h3><ul><li>认真</li><li>严肃</li><li>忠诚</li></ul><br><label><input type="checkbox">同意所有条款</label><br><!-- 两种创建按钮的方法 --><input type="submit" value="注册"><button type="reset">重置</button></form>
</body>
</html>

HTML基础语法

一前端简介构成语言说明结构HTML页面元素和内容表现CSS网页元素的外观和位置等页面样式（美化）行为JavaScript网页模型的定义和页面交互二 HTML1.简介HTML（Hyper Text Markup Language）：超文本标记语言。网页结构整体&…...

编程日记 2023/3/1 8:32:58

微软新版必应gpt人工智能体验教程

大家好，我是雄雄，欢迎关注微信公众号：** 雄雄的小课堂 ** 现在是：2023年2月28日18:35:02 前言前几天，发了一篇文章，主要介绍了如何申请新必应的内测名单，其实一共也就那几步，然后等着就行：文章连接：new bing如何快速申请内测资格，从而体验人工智能? 今天，终于…...

编程日记 2023/3/1 8:31:35

你问我答｜虚拟机、容器和无服务器，怎么选？

在新技术层出不穷的当下,每家企业都希望不断降低成本,并提高运营效率,一个方法就是寻找不同的技术方案来优化运营。　　　　例如,曾经一台服务器只能运行一个应用(裸机);接着,一台服务器的资源可以划分为多个块,从而运行多个应用(虚拟化);再到后来,应用越来越多,为了方便它们…...

编程日记 2023/3/1 8:29:55

某建筑设计研究院“综合布线管理软件”应用实践

某建筑设计研究院有限公司（简称“某院”）隶属于国务院国资委直属的大型骨干科技型中央企业。“某院”前身为中央直属设计公司，创建于1952年。成立近70年来，始终秉承优良传统，致力于推进国内勘察设计产业的创新发展&…...

编程日记 2023/3/1 8:28:39

R语言绘制SCI论文中常见的箱线散点图，并自动进行方差分析计算显著性水平

显著性标记箱线散点图本篇笔记的内容是在R语言中利用ggplot2，ggsignif，ggsci，ggpubr等包制作箱线散点图，并计算指定变量之间的显著性水平，对不同分组进行特异性标记，最终效果如下。加载R包 library(ggplo…...

编程日记 2023/3/1 8:27:13

redux-saga

redux-saga 官网：About | Redux-Saga 中文网：自述 Redux-Saga redux-saga 是一个用于管理异步获取数据(副作用) 的redux中间件；它的目标是让副作用管理更容易，执行更高效，测试更简单，处理故障时更容易… …...

编程日记 2023/3/1 8:25:37

【C++】-- 智能指针

目录智能指针意义智能指针的使用及原理 RAII 智能指针的原理 std::auto_ptr std::auto_ptr的模拟实现 std::unique_ptr std::unique_ptr模拟实现 std::shared_ptr std::shared_ptr的模拟实现循环引用问题智能指针意义 #问：为什么需要智能指针&#…...

编程日记 2023/3/1 8:24:07

数据结构与算法——4时间复杂度分析2（常见的大O阶）

这篇文章是时间复杂度分析的第二篇。在前一篇文章中，我们从0推导出了为什么要用时间复杂度，时间复杂度如何分析以及时间复杂度的表示三部分内容。这篇文章，是对一些常用的时间复杂度进行一个总结，相当于是一个小结论 1.常见的大O…...

编程日记 2023/3/1 8:22:36

IIS解析漏洞

IIS 6.0在解析文件时存在以下两个解析漏洞。 ①当建立*.asa、*.asp格式的文件夹时，其目录下的任意文件都将被IIS当作asp文件来解析。例如：建立文件夹 parsing.asp，在 parsing.asp 文件夹内新建一个文本文档 test.txt，其内容为&…...

编程日记 2023/3/1 8:21:13

2023 年腾讯云轻量和CVM服务器租用价格表出炉（CPU/内存/带宽/系统盘）

腾讯云服务器的价格表是用户比较关心的问题，服务器的价格组成包括云服务器的机型价格、磁盘价格和宽带价格，主机教程网来详细说下腾讯云最新的云服务器价格表。我们以北京一区、Linux系统的云服务器为例，其他地域的价格会有所差异&#xff0c…...

编程日记 2023/3/1 8:19:55

Java学习之路002——面向对象编程

【说明】部分内容来源于网络，如有冲突，请联系作者删除。一、面向对象编程(OOP) 2.1 对象和类的关系 2.2 面向对象的特征 2.2.1 封装 2.2.2 继承 2.2.3 多态 3、抽象使用abstract关键字修饰的类或者方法定义抽象类(使用abstract) // 1、定义抽象方法…...

编程日记 2023/3/1 8:18:29

VR直播丨颠覆性技术革命，新型直播已经到来

细数当下最火热的营销手段，首先浮现脑海的无疑是“直播”。前有罗永浩、李佳琦，后有刘畊宏和东方甄选，直播如日中天，俨然成了大众足不出户就能休闲娱乐的重要途径。而随着虚拟现实在“十四五规划”中被列入“建设数字中国”数字…...

编程日记 2023/3/1 8:16:52

【微信小程序】-- WXSS 模板样式- rpx import （十三）

💌 所属专栏：【微信小程序开发教程】 😀 作者：我是夜阑的狗🐶 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！ &…...

编程日记 2023/3/1 8:15:26

Biotin-PEG-SVA，生物素聚乙二醇琥珀酰亚胺戊酸酯，可用于检测或分子标记

Biotin-PEG-SVA 结构式：PEG分子量： 1000，2000，3400，5000，10000中文名称：生物素聚乙二醇琥珀酰亚胺戊酸酯，生物素-PEG-琥珀酰亚胺戊酸酯英文名称：Biotin-PEG-SVA &#xf…...

编程日记 2023/3/1 8:14:09

云原生是什么？核心概念和应用方法解析

什么是云原生？ 云原生是一种基于容器、微服务和自动化运维的软件开发和部署方法。它可以使应用程序更加高效、可靠和可扩展，适用于各种不同的云平台。如果要更直接通俗的来解释下上面的概念。云原生更准确来说就是一种文化，是一种潮流&…...

编程日记 2023/3/1 8:13:00

Editor工具开发实用篇：EditorGUI/EditorGUILayout的区别和EditorGUILayout的方法介绍

目录一：EditorGUI和EditorGUILayout区别二：EditorGUILayout 1.EditorGUILayout.BeginFadeGroup(float value); 2.EditorGUILayout.BeginHorizontal EditorGUILayout.BeginVertical 3.EditorGUILayout.BeginScrollView 4.EditorGUILayout.BeginT…...

编程日记 2023/3/1 8:11:43

（五十二）大白话不断在表中插入数据时，物理存储是如何进行页分裂的？.md

上回我们讲到了数据页的物理存储结构，数据页之间是组成双向链表的，数据页内部的数据行是组成单向链表的，每个数据页内根据主键做了一个页目录然后一般来说，你没有索引的情况下，所有的数据查询，其实在物理…...

编程日记 2023/3/1 8:10:31

Unity 渲染顺序

Unity中的渲染顺序自上而下大致分为三层渲染优先级 Camera depth > Sorting Layer > Order in Layer > RenderQueueCamera depth:越小越优先（大的显示在小的前面）如图：尽管Sphere距离摄像机较远，但由于Camera_Sphere dep…...

编程日记 2023/3/1 8:09:21

短视频美颜sdk人脸编辑技术详解、美颜sdk代码分析

短视频美颜sdk中人脸编辑技术可以将人像风格进行转变，小编认为这也是未来的美颜sdk的一个重要发展方向，下文小编将为大家讲解一下短视频美颜sdk中人脸编辑的关键点。一、人脸编辑的细分关键点 1、年龄通过更改人脸的年龄属性，可用于模仿人…...

编程日记 2023/3/1 8:08:09

error: expected declaration specifiers or ‘...’ before ‘(’ token

一、问题最近写函数时，遇到了一个比较奇怪的问题，相信也好多人遇到一下的问题： error: expected declaration specifiers or ‘...’ before ‘(’ token代码如下： #include<stdio.h> struct stu{char *name;int score;…...

编程日记 2023/3/1 8:07:02

docker详细操作--未完待续

docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...

编程新知 2026/2/5 4:33:24

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色点击visual studio 上方的工具-> 选项在选项窗口中，选择环境 -> 常规 ，将其中的颜色主题改成深色点击确定，更改完成...

编程新知 2026/1/25 11:13:37

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。可以把它想象成你的 AI 模型和想要使用它…...

编程新知 2026/1/27 17:31:07

ESP32读取DHT11温湿度数据

芯片：ESP32 环境：Arduino 一、安装DHT11传感器库红框的库，别安装错了二、代码注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/30 8:46:45

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录问题现象问题原因解决办法问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。问题原因很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点）和 Decorator（装饰节点）四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/2/7 8:45:41

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。项目投运后，每年可节约标煤3670…...

编程新知 2026/1/30 2:45:51

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2026/2/7 0:28:16

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败网络不同，需要使用镜像源按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...

编程新知 2026/2/2 3:06:53

一 前端简介