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

HTML基础语法

news 2025/12/16 15:09:12

一前端简介

构成	语言	说明
结构	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

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...

编程新知 2025/10/6 4:03:40

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎（Physics Engine） 物理引擎是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于游戏开发、动画制作、虚…...

编程新知 2025/12/15 21:46:10

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

3.3.1_1 检错编码（奇偶校验码）

从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...

编程新知 2025/12/16 11:08:34

HTML 列表、表格、表单

1 列表标签作用：布局内容排列整齐的区域列表分类：无序列表、有序列表、定义列表。例如： 1.1 无序列表标签：ul 嵌套 li，ul是无序列表，li是列表条目。注意事项： ul 标签里面只能包裹 li…...

编程新知 2025/12/12 12:44:29

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/12/14 17:38:32

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...

编程新知 2025/12/7 12:35:20

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录一、SQL注入二、insert注入三、报错型注入四、updatexml函数五、源码审计六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/12/5 1:47:15

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...

编程新知 2025/12/9 21:24:04

一 前端简介