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

html基础语法看这一篇就够了！

news 文章来源：https://blog.csdn.net/2301_80122797/article/details/142031082 2025/5/14 6:50:29

在这里插入图片描述

HTML

一概念

html:html 文件根标签
head:编写页面相关的属性
title:页面标题
body:页面内容展示信息

二 DOM 树：

所有的标签都是 html 的子标签
head 和 body 是兄弟标签，同一级别
head 和 title 为父子标签

1.第一个程序

<html><head><title>标题</title></head><body>hello world</body>
</html>

三快速生成代码框架

！+ 回车

快速生成的模板：

<!DOCTYPE html>
<!-- 指定当前html版本为5 -->
<html lang="en"><!--指定当前页面为英文--><head><meta charset="UTF-8" /><!--浏览器解码规则--><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--移动端适配--><title>Document</title></head><body></body>
</html>

四 html 的标签

1.注释标签

ctrl+/ 一行变为注释

2.标题标签 h1-h6

数字越大，则字体越小

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

3.段落标签

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>

4.换行标签

默认换行标签换行之后间隙比段落标签间隙要小

<br />规范 <br />不规范

5.格式化标签

(1)加粗标签

<strong>加粗</strong>
<b>加粗</b>

(2)倾斜标签

<em>倾斜</em>
<i>倾斜</i>

(3)删除线标签

<del>倾斜</del>
<s>倾斜</s>

(4)下划线标签

<ins>倾斜</ins>
<u>倾斜</u>

6.图像标签

1.img 标签

src 属性
img 标签必须搭配 src 来使用，src 是用来指定照片路径

(1)相对路径

./xxx.png 当前路径的 xxx 照片
./img/xx.png 当前路径的 img 文件夹下 xxx 照片
…/xx.png 上一个路径的 xxx 照片

<img src="照片路径" />

(2)绝对路径

图片路径

<img src="照片路径" />

网络上的图片资源

<img src="照片路径" />

2.src 属性

(1)alt 属性

<img src="照片路径" alt="此照片加载失败" />

(2)title 属性

<img src="照片路径" title="这是图片的标题" />

(3)width/heigh 控制宽度高度

高度和宽度一般改一个就行，另外一个会等比缩放，否则就会造成图片失衡。

<img src="照片路径" height="100px" />

(4)border 属性边框

<img src="照片路径" border="10px" />

7.a 标签

href：必须具备，表示点击后会跳转到那个页面
target：打开方式，默认是_self，，如果是_blank 则用新标签页打开

1. href

<a href="网址">文字内容</a><a href="#">不做任何跳转，只在当前页面</a><a href="http://www.baidu.com"><!--通过图片的超链接--><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="" />
</a>

2. target

是否打开新页面
默认就是在当前页面打开新页面

<a href="www.baid.com" target="_blank"></a><a href="www.baid.com" target="_self"></a>

8.表格标签

table：表示整个表格
tr：表示表格的一行
td：表示一个单元格
th：表示表头的单元格。会居中加粗
thead：表格的头部区域(与 th 区分，范围比 th 大)
tbody：表格的内容区域

table 包含 tr；tr 包含 td 或者 th

shift+alt+向下直接将选中的内容向下复制

边框：

<table border="10px"></table>

大小：

<table width="500" height="300"></table>

单元格之间的间距：

<table cellspacing="0"></table>

内容距离边框的距离：

<table cellpadding></table>

控制表格整体位置：

<table align="center"></table>
<!--left center right-->

表头区域 thead
thead 中的内容是居中+加粗表示

<thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
</thead>

表格内容区域 tbody

<tbody><tr><td>张三</td><td>男性</td><td>12</td></tr><tr><td>李四</td><td>女性</td><td>4</td></tr><tr><td>王五</td><td>女性</td><td>56</td></tr>
</tbody>

单元格合并

行合并：

<tbody><tr><td>张三</td><td rowspan="2">男性</td><td>12</td></tr><tr><td>李四</td><!-- <td>男性</td> --><td>4</td></tr><tr><td>王五</td><td>女性</td><td>56</td></tr>
</tbody>

列合并:

<tbody><tr><td>张三</td><td>男性</td><td>12</td></tr><tr><td>李四</td><td>男性</td><td>4</td></tr><tr><td colspan="2">王五</td><td>女性</td><td>56</td></tr>
</tbody>

9.列表标签

无序列表: ul li
有序列表：ol li
自定义列表：dl(总标签) dt(小标题) dd(围绕标题来说明)

1.无序列表

ul li

快捷键：ul>li*4

<body><h1>这是无序列表</h1><ul><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li><li>这是内容4</li></ul>
</body>

(1).属性

type

disc 无序列表默认的实心圆点
square 实心黑方块
circle 空心圆圈

<body><h1>这是无序列表</h1><ul type="circle"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li><li>这是内容4</li></ul>
</body>

2.有序列表

ol li

<h1>这是有序列表</h1>
<ol><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li><li>这是内容4</li>
</ol>

(1).属性

type

a 表示小写英文字母编号
A 表示大写英文字母编号
i 表示小写罗马字母编号
I 表示大写罗马字母编号
1 表示数字编号(默认)

<h1>这是有序列表</h1>
<ol type="I"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li><li>这是内容4</li>
</ol>

start

决定从那个数字开始计数

<h1>这是有序列表</h1>
<ol type="I" start="2"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li><li>这是内容4</li>
</ol>

3.自定义列表

dl dt dd

<h1>自定义列表</h1>
<h1>自定义列表</h1>
<dl><dt>我的朋友们<dd>老三</dd><dd>王五</dd><dd>mike</dd></dt>
</dl>

10.表单标签

form
用表单标签来完成服务器的一次交互

分为两个部分

表单域：包含表单元素的区域重点是 form 标签。
表单控件：输入框，提交按钮等，重点是 input 标签。

1.属性

(1)action

<form action="服务器地址"></form>

(2)input

文本框

<input type="text" />

单行输入

<form action="">姓名<input type="text" /></form>

密码框

<form action="">密码<input type="password" /></form>

单选框

单选

此时还不是单选框，男女都可以选

<form action="">性别<input type="radio" />男 <input type="radio" />女</form>

name="gender"相等的只能选其中的一个

<form action="">性别<input type="radio" name="gender" />男<input type="radio" name="gender" />女
</form>

默认开始选择,checked="checked"所在的地方就是默认值

<form action="">性别<input type="radio" name="gender" checked="checked" />男<input type="radio" name="gender" />女
</form>

复选框

多选

<form action="">爱好<input type="checkbox" />吃饭 <input type="checkbox" />睡觉<input type="checkbox" />玩游戏
</form>

普通按钮

<form action=""><input type="button" value="这是一个普通按钮" />
</form>

应用
点击后弹出 hello

<input type="button" value="这是一个普通按钮" onclick="alert('hello')" />

提交按钮

提交按钮必须放到 form 标签内，点击后就会尝试给服务器发送

<form action=""><input type="submit" />
</form>

目标网址为百度一下

<form action="http://www.baidu.com">用户名<input type="text" name="user" /><br />密码<input type="password" /><br /><input type="submit" />
</form>

重置按钮 reset

<form action="http://www.baidu.com">用户名<input type="text" name="user" /><br /><input type="submit" /><input type="reset" /><!--重置按钮-->
</form>

选择文件(提交文件)

<form action="http://www.baidu.com"><input type="file" />
</form>

(3)label

通常与 input 搭配使用

<label for="存放关联的id">文本</label>

例如:

<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />

(4)select

通常搭配 option 使用

option 标签
属性:
selected 表示默认选择那个选项

<select name="" id=""><option valut="">--请选择年份--=</option><option valut="" selected>--1990--=</option><!--selected表示默认选择哪一个--><option valut="">--1991--=</option><option valut="">--1992--=</option><option valut="">--1993--=</option><option valut="">--1994--=</option>
</select>

(5)textarea

属性
rows:长
cols:高

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

11.无语义标签 div&span

div 标签，divsion 的缩写，含义是分割
span 标签含义是跨度
div 是独占一行，是一个大盒子
span 是不独占一行，是一个小盒子

无语义标签无固定用途
拿着这个标签啥都可以干

12.HTML 特殊字符

空格： ` `

小于号：`<`

大于号：`>`

按位与：`&`

在这里插入图片描述

html基础语法看这一篇就够了！

HTML 一概念 html:html 文件根标签 head:编写页面相关的属性 title:页面标题 body:页面内容展示信息二 DOM 树： 所有的标签都是 html 的子标签 head 和 body 是兄弟标签，同一级别 head 和 title 为父子标签 1.第一个程序 <html><head>…...

编程日记 2024/9/8 23:26:59

【redis】redis的特性和主要应用场景

文章目录 redis 的特性在内存中存储数据可编程的扩展能力持久化集群高可用快 redis 的应用场景实时数据存储缓存消息队列 redis 的特性 redis 的一些特性（优点）成就了它在内存中存储数据 In-memory data structures MySQL 主要是通过“表”的方式来…...

编程日记 2024/9/8 23:25:58

部署后端WebSocket服务到AWS云服务器

目录 1.创建AWS账户2.选择EC2实例3.配置EC2实例4.使用VSCode连接到EC2实例5.部署WebSocket服务6.配置域名和SSL（可选）7.监控和维护 1.创建AWS账户如果你还没有AWS账户，你需要先在AWS官网注册一个。 2.选择EC2实例登录到AWS管理控制台。搜…...

编程日记 2024/9/8 23:20:52

常见的集合

1、Collection 单列集合的根接口遍历方法 Collection<String> c new ArrayList<>(); c.add("赵敏"); c.add("小昭"); c.add("素素"); c.add("灭绝"); System.out.println(c); //[赵敏, 小昭, 素素, 灭绝]//1、迭代器遍…...

编程日记 2024/9/8 23:17:49

Swift知识点---RxSwift学习

1. 什么是RxSwift RxSwift是Swift函数响应式编程的一个开源库，由Github的ReactiveX组织开发、维护 RxSwift的目的是：让数据/事件流和异步任务能够更方便的序列化处理，能够使用Swift进行响应式编程 RxSwift本质上还是观察者模式&#xff…...

编程日记 2024/9/8 23:16:48

驾驭不断发展的人工智能世界

从很多方面来看，历史似乎正在重演。许多企业正争相采用生成式人工智能 (Gen AI)，就像它们争相采用云计算一样，原因也是一样的：效率、成本节约和竞争优势。然而，与云一样，GenAI 仍是一项发展中的技术&…...

编程日记 2024/9/8 23:13:45

冒泡排序——基于Java的实现

简介冒泡排序（Bubble Sort）是一种简单的排序算法，适用于小规模数据集。其基本思想是通过重复遍历待排序的数组，比较相邻的元素并交换它们的位置，以此将较大的元素逐步“冒泡”到数组的末尾。算法的名称源于其运行过程…...

编程日记 2024/9/8 23:11:43

Mendix 创客访谈录｜Mendix赋能汽车零部件行业：重塑架构，加速实践与数字化转型

在当前快速发展的技术时代，汽车行业正经历着前所未有的数字化转型。全球领先的汽车零配件制造商面临着如何利用最新的数字技术优化其制造车间管理的挑战。从设备主数据管理到生产执行工单管理，再到实时监控产量及能耗，需要一个灵活、快速且高…...

编程日记 2024/9/8 23:09:41

船舶机械设备5G智能工厂物联数字孪生平台，推进制造业数字化转型

船舶机械设备5G智能工厂物联数字孪生平台，推进制造业数字化转型。在当今数字化浪潮推动下，船舶制造业正经历着前所未有的变革。为了应对市场的快速变化，提升生产效率，降低成本，并增强国际竞争力，船舶机械设…...

编程日记 2024/9/8 23:08:40

什么是jsonp请求

JSONP（JSON with Padding）是一种解决跨域请求问题的技术。它允许网页从不同的域名请求数据，而不受同源策略的限制。JSONP 通过动态创建 script 标签来实现跨域请求，因为 script 标签不受同源策略的限制。一、工作原理客户端&a…...

编程日记 2024/9/8 23:07:39

【C++】STL容器详解【上】

目录一、STL基本概念二、STL的六大组件三、string容器常用操作 3.1 string 容器的基本概念 3.2 string 容器常用操作 3.2.1 string 构造函数 3.2.2 string基本赋值操作 3.2.3 string存取字符操作 3.2.4 string拼接字符操作 3.2.5 string查找和替换 3.2.6 string比…...

编程日记 2024/9/8 23:06:38

助贷行业的三大严峻挑战：贷款中介公司转型债务重组业务

大家是否察觉到一种趋势？现如今，众多贷款辅助服务机构与专注于债务再构的公司之间形成了紧密的“联动”。有的选择将获取的贷款需求转介给债务重组方，有的则直接下场，动用自身资本参与债务重组业务。这一现象背后，究竟…...

编程日记 2024/9/8 23:02:34

力扣第42题接雨水

前言记录一下刷题历程力扣第42题接雨水接雨水原题目：给定 n 个非负整数表示每个宽度为 1 的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水。示例 1： 输入：height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&…...

编程日记 2024/9/8 23:01:33

轻松录制每一刻：探索2024年免费高清录屏应用

你不会还在用一些社交工具来录屏吧？现在的市面上有不少免费录屏的软件了。别看如软件是免费的，它的功能比起社交工具的录屏功能来说全面的多。这次我就分享几款我用过的录屏工具。 1.福晰录屏大师链接直达：https://www.foxitsoftware.cn/R…...

编程日记 2024/9/8 23:00:32

【小沐学OpenGL】Ubuntu环境下glfw的安装和使用

文章目录 1、简介1.1 OpenGL简介1.2 glfw简介 2、安装glfw2.1 直接命令二进制安装2.2 源码安装 3、测试glfw3.1 测试1，glfwglew3.2 测试2，glfwglad3.3 测试3 结语 1、简介 1.1 OpenGL简介 OpenGL作为图形界的工业标准，其仅仅定义了一组2D和…...

编程日记 2024/9/8 22:59:31

[数据集][目标检测]汽油检泄漏检测数据集VOC+YOLO格式237张2类别

数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：237 标注数量(xml文件个数)：237 标注数量(txt文件个数)：237 标注类别…...

编程日记 2024/9/8 22:58:30

图文解析保姆级教程：Postman专业接口测试工具的安装和基本使用

文章目录 1. 引入2. 介绍3. 安装4. 使用此教程摘选自我的笔记：黑马JavaWeb开发笔记16——请求（postman、简单参数、实体参数、RequestParam映射）想要详细了解更多有关请求各种参数介绍的知识可以移步此篇笔记。 1. 引入在当前最为主流的开…...

编程日记 2024/9/8 22:53:21

jenkins配置流水线

新建任务，随便选一个名字，选中流水线配置git的用户名和密码，记录ID，后面配置流水线的时候用。 pipeline {agent anystages {stage(stop app){steps {script {def remote [:]//配置服务地址，用户名和密码remote.na…...

编程日记 2024/9/8 22:52:20

SQL 编程基础

SQL（结构化查询语言）广泛应用于数据库操作，是每个程序员都需要掌握的技能之一。这篇文章将带你从基础入门，了解SQL编程中的常量、变量及流程控制语句。我们将采用简单易懂的语言，结合实际示例，帮助你轻松理…...

编程日记 2024/9/8 22:50:18

sql 中名字不可以包含 mysql中具有特定意义的单词

这种sql执行不报错这种sql执行报错所以sql中名字不可以使用mysql中具有特定意义的单词以此文章作为警告，我下次起名字不可以使用 mysql中具有特殊意义的字符就因为这个导致我搞了一个多小时，急死我了，周五就要前后端联调了。下次千万不…...

编程日记 2024/9/8 22:48:16

分布式部署①

📑打牌 ： da pai ge的个人主页 🌤️个人专栏 ： da pai ge的博客专栏 ☁️宝剑锋从磨砺出，梅花香自苦寒来 1. 需要部署的服务 Nacos 理论上,应…...

编程日记 2024/9/8 22:44:12

开源可视化大屏superset Docker环境部署

superset 开源可视化大屏Docker环境部署前言 superset是俄罗斯开源的一款可视化大屏，用于数据可视化探索，含有丰富的图表组件，可以支持接入各种数据源。接触superset就是想体验下可视化大屏功能，想最快速度安装成功&#xff…...

编程日记 2024/9/8 22:40:08

tomato靶场通关攻略

1.御剑2014找到IP地址 2.dirb扫描目录 3.再次详细扫描目录 4.访问找到的目录文件进入antibots中 5.搜寻一会再info.php里面发现有东西 6.这个地方貌似可以进行利用 7.查看源代码发现包含include文件上传漏洞 8.网址后面跟?image../../../../../../../etc/passwd 9.既然可以查…...

编程日记 2024/9/8 22:37:05

【Spring Boot 3】【Web】处理跨域资源共享 CORS

【Spring Boot 3】【Web】处理跨域资源共享 CORS 背景介绍开发环境开发步骤及源码工程目录结构总结背景软件开发是一门实践性科学，对大多数人来说，学习一种新技术不是一开始就去深究其原理，而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中，每次学习新技术…...

编程日记 2024/9/8 22:33:01

HUAWEI华为MateBook B5-420 i5 集显(KLCZ-WXX9,KLCZ-WDH9)原装出厂Windows10系统文件下载

适用型号：KLCZ-WXX9、KLCZ-WDH9 链接：https://pan.baidu.com/s/12xnaLtcPjZoyfCcJUHynVQ?pwdelul 提取码：elul 华为原装系统自带所有驱动、出厂主题壁纸、系统属性联机支持标志、系统属性专属LOGO标志、华为浏览器、Office办公软件、华为…...

编程日记 2024/9/8 22:31:59

算法练习题10：leetcode76最小覆盖子串-滑动窗口

目录题目题目描述约束条件解决思路代码 getOrDefault(c, 0) 方法方法签名参数返回值示例 getOrDefault 与 get 的主要区别 Integer 题目题目描述给定两个字符串 s 和 t，请你在字符串 s 中找到包含 t 中所有字符的最小子串。要求&#xf…...

编程日记 2024/9/8 22:29:36

Svn常用操作技巧详细说明

TortoiseSVN是一个Windows操作系统下的Subversion客户端，它为用户提供了直观易用的界面，方便进行版本控制操作。下面是一些TortoiseSVN的常用操作技巧的详细说明： 检出代码： 在Windows资源管理器中，选择一个空文件夹&a…...

编程日记 2024/9/8 22:26:10

六、MySQL高级—架构介绍（1）

🌻🌻 目录一、Mysql 简介1.1 概述1.2 Mysql 高手是怎样炼成的二、Mysql Linux 版的安装2.1 mysql5.52.2 mysql5.7 三、Mysql 的用户与权限管理3.1 MySQL的用户管理3.2 权限管理3.3 通过工具远程访问四、 Mysql的一些杂项配置(了解)五、 Mysql 逻辑架构…...

编程日记 2024/9/8 22:24:08

TensorRT-For-YOLO-Series项目：实现yolov10模型的python-tensorrt推理（对比int8与fp16推理差异）

项目地址：https://github.com/Linaom1214/TensorRT-For-YOLO-Series/tree/cuda-python 算法支持状态： 2024.6.16 Support YOLOv9, YOLOv10, changing the TensorRT version to 10.0 2023.8.15 Support cuda-python 2023.5.12 Update 2023.1.7 support YO…...

编程日记 2024/9/8 22:23:07

码上君量化互助社群介绍

写在前面量化投资是一个漫长的过程，一个人单打独斗会走很多弯路，所以建立一个交流沟通互助群是有必要的。无论是加入我的这个量化互助社群，还是加入其他的社群，首先要想想自己加入社群的目的是什么，自己想从中获得…...

编程日记 2024/9/8 22:22:06

HTML

一 概念

二 DOM 树：

1.第一个程序

三 快速生成代码框架

四 html 的标签

1.注释标签

2.标题标签 h1-h6

3.段落标签

4.换行标签

5.格式化标签

(1)加粗标签

(2)倾斜标签

(3)删除线标签

(4)下划线标签

6.图像标签

1.img 标签

(1)相对路径

(2)绝对路径

2.src 属性

(1)alt 属性

(2)title 属性

(3)width/heigh 控制宽度高度

(4)border 属性 边框

7.a 标签

1. href

2. target

8.表格标签

9.列表标签

1.无序列表

(1).属性

type

2.有序列表

(1).属性

type

start

3.自定义列表

10.表单标签

1.属性

(1)action

(2)input

文本框

密码框

单选框

复选框

普通按钮

提交按钮

选择文件(提交文件)

(3)label

(4)select

(5)textarea

11.无语义标签 div&span

12.HTML 特殊字符

空格： &nbsp;

小于号：&lt;

大于号：&gt;

按位与：&amp;

相关文章：

一概念

三快速生成代码框架

(4)border 属性边框

空格： ` `

小于号：`<`

大于号：`>`

按位与：`&`