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

前端三剑客之HTML

article 2025/9/15 0:53:18

前端HTML

一、HTML简介

1.什么是html

HTML的全称为超文本标记语言(HTML ~~How To Make Love~~ HyperText Markup Language )，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面 [12]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

HTML定义网页的结构

CSS样式定义了网页的样式

js定义了网页动态样式，动态资源

2.HTML的开发工具

Adobe Dreamweaver
- Dreamweaver 是世界顶级软件厂商 Adobe 推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。Dreamweaver是集网页制作和管理网站于一身的所见即所得的网页代码编辑器，借助其经过简化的智能编码引擎，视觉辅助功能减少错误并提高网站开发速度，轻松创建、编码和管理动态网站。还能够通过访问代码提示，快速了解 HTML、CSS 以及其他 Web 标准。(注:根据自身需求选择版本)
  - 优点:
    - 制作效率。
    - 操控能力强。
    - 网站管理迅速简单。
    - 全面的 CSS 支持。
    - 学习资源多，如 DW 社区。
  - 缺点:
    - 效果难以精确达到与浏览器一致的显示效果。。
    - 不便监控生成干净准确的 HTML代码。
DevExtreme
DevExtreme 是高性能的HTML5,CSS和Java移动开发框架，可以直接在Visual studio集成开发环境，构建移动应用程序。从 Angular 和 React 到ASPNET MVC或 Vue，DevExtreme 包括一系列高性能和响应式 U| 小部件，用于传统的Web和下一代移动应用程序。目前，DevExtremeV19.1.6 全新发布，是Visual studio开发人员开发跨平台移动产品的首选工具。(注:根据自身需求选择版本)
JetBrains WebStorm
- “最强大的HTML5编辑器”、"最Webstorm 是 jetbrains 公司旗下一款 JavaScript 开发工具。被广大中国JS开发者誉为“Web前端开发神器”智能的JavaS IDE”等。与IntelliJ IDEA同源，继承了Intelli IDEA强大的JS部分的功能。(注:根据自身需求选择版本)
  - 优点:
    - 智能的代码补全，支持不同浏览器的提示。
    - 代码格式化，规则自定义。
    - HTML 智能提示。
    - 联想查询，查找高亮。
    - 代码重构。
    - 代码检查，快速修复。
    - 代码调试。
    - 代码结构快速浏览和定位。
    - 代码折叠。
    - 自动提示代码包裹或去除包裹。

HBuilderX

HBuilderX 是由 DCloud 开发的一款轻量级但功能强大的前端集成开发环境（IDE），专为现代前端开发设计。它支持多种编程语言，包括 HTML、CSS、JavaScript、Vue.js、TypeScript 等，适合各种前端开发需求。HBuilderX 提供智能代码补全、代码片段插入、语法高亮、代码格式化等功能，提高编码效率，并拥有丰富的插件市场，提供各种实用的插件，包括代码检查、版本控制、框架支持等。
- 主要特点和优势
  - 多语言支持：HBuilderX 支持多种编程语言，适合各种前端开发需求。
  - 高效的代码编辑：提供智能代码补全、代码片段插入、语法高亮、代码格式化等功能。
  - 丰富的插件生态：拥有丰富的插件市场，提供各种实用的插件。
  - UniApp 支持：作为 UniApp 的官方开发工具，HBuilderX 为 UniApp 项目提供一流的支持。
  - 跨平台开发：支持跨平台应用开发，可以一次编写，编译到 iOS、Android、Web 等多个平台。

二、HTML基础语法

1.认识HTML的基本结构

示例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body></body>
</html>

注意：HTML语言不区分大小写

1.1 基本结构中各标签的作用

声明此页面为HTML5页面，简称H5

<!DOCTYPE html>

根标签，元素囊括了页面中所有其它元素，整个页面只需一个

<html>

头标签，包含的是那些不用于展现内容的元素，如 title，link，meta 等

<head>

meta标签，存放的是与页面有关的元数据，不会显示到页面中，可以配置编码集

<meta charset="utf-8" />

标题标签，定义页面的标题

<title>

体标签，定义页面的内容

</body>

2.HTML常用标签

2.1标题标签

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

2.2段落标签

<p>段落标签</p>

2.3图片标签

//各属性含义：
//src：图片地址
//alt：当照片出错时，图片的替代文字
//title：鼠标悬停提示文字
<img src="img/a.jpg" alt="" title=""/>

注意：

图片资源的相对路径和绝对路径

1.相对路径：以当前页面所在的位置为基准，而且不能以 / 开始。

2.绝对路径：以最原始位置为基准

如果访问本机资源，以盘符开始
如果访问非本机资源，以网络协议开始

2.4换行标签

<br/>

2.5超链接标签

//href：链接跳转的目标路径
//target属性：
//target=_blank，在新窗口打开。表示在新窗口中打开该链接。
//target=_self，在当前窗口打开。<a href="https://www.baidu.com" target="_self">跳转到百度</a>

使用超链接标签实现锚记效果，例如返回顶部等等功能
<h1 id="top">一级标题</h1><a href="#top">返回顶部</a>

2.6 无序列表

<ul> <li>张三</li><li>李四</li><li>王五</li>
</ul>

2.7有序列表

<ol> <li>喜羊羊</li><li>美羊羊</li><li>懒羊羊</li>
</ol>

2.8 表格标签

<table border="1"><tr><th>第一行第一列</th><th>第一行第二列</th><th>第一行第三列</th></tr><tr><td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr><tr><td>第三行第一列</td><td>第三行第二列</td><td>第三行第三列</td></tr>
</table>

border：边框宽度

style="border-collapse: collapse;"相邻单元格共用一个边框

table：整个表格的最外层标签

tr：行标签

th：表格标题标签

td：列标签，一个td，就是一个单元格

表格合并

colspan：合并列
rowspan：合并行

<table border="1"><tr><th colspan="2">第一行第一列</td><th>第一行第三列</td></tr><tr><td rowspan="2">第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td></tr><tr><td>第三行第二列</td><td>第三行第三列</td></tr>
</table>

2.9表单标签

表单标签属性

readonly：不可编辑,但可以选择和复制;值可以传递到后台
disabled：不能编辑,不能复制,不能选择;值不可以传递到后台
checked：设置单选按钮和复选按钮的默认选中项
selected：设置下拉列表option的默认选中项
注意：以上都属于布尔类型的属性，布尔类型属性都有以下三种写法：
checked=“true”
checked=“checked”
checked
这三种写法的效果都是一样的。

form标签
- form是表单最外层标签。
- action属性：提交服务器地址
- method属性：提交方式：get、post

<form action="" method=""></form>

文本框
- placeholder属性为HTML5新增属性：提供可描述输入字段预期值的提示信息

<input type="text" placeholder="用户名" value="zhangsan" />

密码框

<input type="password"/>

单选按钮

<input type="radio" name="sex" value="1"/>女
<input type="radio" name="sex" value="0" checked="true"/>男

复选框

<input type="checkbox" name="like" value="0" checked="true" />苹果
<input type="checkbox" name="like" value="1" />香蕉
<input type="checkbox" name="like" value="2" />梨

下拉列表

<select name="country"><option value="0" selected="true">中国</option><option value="1">日本</option><option value="2">韩国</option>
</select>

文件域

<input type="file" name="files" />

文本域

<textarea name="brief" rows="5" cols="30">--这里输入个人简介--</textarea>

提交按钮
- 将表单全部内容，提交给action属性指定的服务器。一个表单都应该有一个提交按钮

<input type="submit" value="提交" />

重置按钮

<input type="reset" value="重置" />

普通按钮

<input type="button" value="点击我">
<button>点击我</button>

3.容器标签

div标签
- 可以在某块区域中指定出一块区域内容。其本身没有任何视觉上的效果。

<div><h1></h1>
</div>

span标签
- 内联标签，可以在一行中指定出一段内容。其本身没有任何视觉上的效果。

<span></span>

前端三剑客之HTML

前端HTML 一、HTML简介 1.什么是html HTML的全称为超文本标记语言(HTML How To Make Love HyperText Markup Language )，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整…...

编程日记 2025/9/8 12:14:57

linux中cpu内存浮动占用，C++文件占用cpu内存、定时任务不运行报错(root) PAM ERROR (Permission denied)

文章目录说明部署文件准备脚本准备部署g++和编译脚本使用说明和测试脚本批量部署脚本说明执行测试定时任务不运行报错(root) PAM ERROR (Permission denied)报错说明处理方案说明我前面已经弄了几个版本的cpu和内存占用脚本了，但因为都是固定值，所以现在重新弄个用C++编写的…...

编程日记 2025/9/7 23:31:24

RabbitMQ的核心原理及应用

在分布式系统架构中，消息中间件是实现服务解耦、流量缓冲的关键组件。RabbitMQ 作为基于 AMQP 协议的开源消息代理，凭借高可靠性、灵活路由和跨平台特性，被广泛应用于企业级开发和微服务架构中。本文将系统梳理 RabbitMQ 的核心知识&#xff…...

编程日记 2025/8/31 19:43:48

实时监控服务器CPU、内存和磁盘使用率

实时监控服务器CPU、内存和磁盘使用率监控内存使用率： free -g | awk NR2{printf "%.2f%%\t\t", $3*100/$2 }awk NR2{...} 取第二行（Mem 行）。 $3 为已用内存，$2 为总内存，$3*100/$2 即计算使用率。监控磁…...

编程日记 2025/7/7 20:31:28

linux国产机安装GCC

目录 1.包管理器安装 2.源码编译安装 linux安装GCC有两种方式，方法一，使用包管理器安装；方法二，源码安装。 1.包管理器安装 Ubuntu 基于 Debian 发行版，使用apt - get进行软件包管理；CentOS 基于 …...

编程日记 2025/7/19 5:44:42

python训练营打卡第30天

模块和库的导入知识点回顾： 导入官方库的三种手段导入自定义库/模块的方式导入库/模块的核心逻辑：找到根目录（python解释器的目录和终端的目录不一致） 一、导入官方库 1.标准导入：导入整个库 import mathprint(&quo…...

编程日记 2025/7/26 22:24:31

时间序列预测实战：用 LSTM 预测股票价格

📈 时间序列预测实战：用 LSTM 预测股票价格（PyTorch 实现）时间序列预测是深度学习在金融领域最常见的应用之一。本文将带你使用 PyTorch 搭建一个基于 LSTM 的模型，对股票收盘价进行预测，完整掌握从数据预处理到预测结果可视化的全流程。 🎯 一、项目目标任务：基于…...

编程日记 2025/9/7 19:41:51

STM32 | FreeRTOS 消息队列

01 一、概述队列又称消息队列，是一种常用于任务间通信的数据结构，队列可以在任务与任务间、中断和任务间传递信息，实现了任务接收来自其他任务或中断的不固定长度的消息，任务能够从队列里面读取消息，当队列中的消…...

编程日记 2025/9/13 11:43:55

便捷的Office批量转PDF工具

软件介绍本文介绍的软件是一款能实现Office批量转换的工具，名为五五Excel word批量转PDF。软件小巧这款五五Excel word批量转PDF软件大小不到2M。操作步骤一使用该软件时，只需把软件和需要转换的Word或Excel文件放在同一个文件夹里。操作步骤…...

编程日记 2025/9/10 9:19:57

pom.xml中的runtime

在 Maven 的 pom.xml 文件中，<scope> 元素可以指定依赖项的作用范围，而 runtime 是其中的一个作用范围值。以下是 runtime 作用范围的含义： 定义：runtime 作用范围表示该依赖项在编译时不需要，但在运行时需要。…...

编程日记 2025/6/18 15:00:13

SpringMVC 通过ajax 实现文件的上传

使用form表单在springmvc 项目中上传文件，文件上传成功之后往往会跳转到其他的页面。但是有的时候，文件上传成功的同时，并不需要进行页面的跳转，可以通过ajax来实现文件的上传下面我们来看看如何来实现： 方式1&…...

编程日记 2025/8/14 22:38:24

opcUA 编译和建模入门教程(zhanzhi学习笔记)

一、使用SIOME免费工具建模从西门子官网下载软件SIOS，需要注册登录，下载安装版就行。下载后直接安装就可以用了，如图： 安装完成后打开，开始建模，如图左上角有新建模型的按钮。新建了新工程后&#xff0c…...

编程日记 2025/9/5 8:29:53

【关联git本地仓库，上传项目到github】

目录 1.下载git2.绑定用户3.git本地与远程仓库交互4.github项目创建5.上传本地项目到github6.完结撒花❀❀❀！！！ 1.下载git git下载地址：https://git-scm.com/downloads 下载安装后创建快捷地址：（此处比较…...

编程日记 2025/9/10 20:35:54

初步认识HarmonyOS NEXT端云一体化开发

视频课程学习报名入口：HarmonyOS NEXT端云一体化开发 1、课程设计理念本课程采用"四维能力成长模型"设计理念，通过“能看懂→能听懂→能上手→能实战”的渐进式学习路径，帮助零基础开发者实现从理论认知到商业级应用开发的跨越。该模型将学习过程划分为四个维度…...

编程日记 2025/9/5 2:17:38

WebRTC技术EasyRTC音视频实时通话驱动智能摄像头迈向多场景应用

一、方案背景在物联网蓬勃发展的当下，智能摄像头广泛应用于安防、家居、工业等领域。但传统智能摄像头存在视频传输延迟高、设备兼容性差、网络波动时传输不稳定等问题，难以满足用户对实时流畅交互视频的需求。EasyRTC凭借低延迟、高可靠、跨平台特性…...

编程日记 2025/9/11 2:45:53

分布式ID生成器：原理、对比与WorkerID实战

一、为什么需要分布式ID？ 在微服务架构下，单机自增ID无法满足跨服务唯一性需求，且存在： • 单点瓶颈：数据库自增ID依赖单表写入 • 全局唯一性：跨服务生成可能重复 • 扩展性差：分库分表后ID规…...

编程日记 2025/9/4 23:33:02

java 代码查重（三）常见的距离算法和相似度（相关系数）计算方法

目录一、几种距离度量方法【海明距离 /汉明距离】【欧几里得距离（Euclidean Distance） 】【曼哈顿距离】【切比雪夫距离】【马氏距离】二、相似度算法【余弦相似度】【皮尔森相关系数】【 Jaccard相似系数 /杰卡德距离】…...

编程日记 2025/9/7 9:06:41

LangChain4j入门AI（六）整合提示词（Prompt）

前言提示词（Prompt）是用户输入给AI模型的一段文字或指令，用于引导模型生成特定类型的内容。通过提示词，用户可以告诉AI“做什么”、 “如何做”以及“输出格式”，从而在满足需求的同时最大程度减少无关信息的生成。有…...

编程日记 2025/9/10 20:06:13

redis--redisJava客户端：Jedis详解

在Redis官网中提供了各种语言的客户端，地址： https://redis.io/docs/latest/develop/clients/ Jedis 以Redis命令做方法名称，学习成本低，简单实用，但是对于Jedis实例是线程不安全的（即创建一个Jedis实例&a…...

编程日记 2025/9/5 10:17:27

[CSS3]百分比布局

移动端特点 PC和手机 PC端网页和移动端网页的有什么不同? PC屏幕大，网页固定版心手机屏幕小，网页宽度多数为100% 谷歌模拟器使用谷歌模拟器可以在电脑里面调试移动端的网页屏幕尺寸了解屏幕尺寸概念屏幕尺寸: 指的是屏幕对角线的长度&#xff…...

编程日记 2025/9/5 10:17:25

【Java微服务组件】异步通信P2—Kafka与消息

欢迎来到啾啾的博客🐱。记录学习点滴。分享工作思考和实用技巧，偶尔也分享一些杂谈💬。欢迎评论交流，感谢您的阅读😄。目录引言Kafka与消息生产者发送消息到Kafka批处理发送设计消息的幂等信息确保消息送达acks配置…...

编程日记 2025/9/5 10:14:08

R语言空间数据处理入门教程

我的课程《R语言空间数据处理入门教程》已重新恢复课程售卖，有需要的读者可以学习。 👇点击下方链接（文末“阅读原文”可直达），立即开启你的空间数据之旅： https://www.bilibili.com/cheese/play/ss13775…...

编程日记 2025/9/10 14:53:35

https://www.zaproxy.org/getting-started/ 检测方法 docker pull ghcr.io/zaproxy/zaproxy:stable# 执行baseline测试 docker run -t ghcr.io/zaproxy/zaproxy:stable zap-baseline.py \ -t https://baseline.yeshen.org# 执行api测试 docker run -t ghcr.io/zaproxy/zaproxy…...

编程日记 2025/9/5 10:23:54

UE5.6新版本—— 动画光照系统重点更新

UE5.6预览版已经可以下载，发布会在下个月的6.5号发布。 5.6界面UI设计 5.6 对引擎进行了大规模的重新设计，先看整体内容，主题UI设计被调整了位置，左边大多数的选择，框选工具，吸附工具，挪到了左…...

编程日记 2025/9/5 10:26:11

TypeScript 泛型讲解

如果说 TypeScript 是一门对类型进行编程的语言，那么泛型就是这门语言里的（函数）参数。本章，我将会从多角度讲解 TypeScript 中无处不在的泛型，以及它在类型别名、对象类型、函数与 Class 中的使用方式。一、泛型的核…...

编程日记 2025/9/10 19:39:22

腾讯位置服务重构出行行业的技术底层逻辑

位置智能：重构出行行业的技术底层逻辑在智慧城市建设与交通出行需求爆发的双重驱动下，位置服务正从工具层跃升为出行行业的核心基础设施。腾讯位置服务以“连接物理世界与数字空间”为核心理念，通过构建高精度定位、实时数据融合、智能决策…...

编程日记 2025/9/10 17:33:33

面试相关的知识点

1 vllm 1.1常用概念 1 vllm：是一种大模型推理的框架，使用了张量并行原理，把大型矩阵分割成低秩矩阵，分散到不同的GPU上运行。 2 模型推理与训练：模型训练是指利用pytorch进行对大模型进行预训练。模型推理是指用训…...

编程日记 2025/9/3 14:12:57

如何用JAVA手写一个Tomcat

一、初步理解Tomcat Tomcat是什么？ Tomcat 是一个开源的轻量级 Java Web 应用服务器，核心功能是运行 Servlet/JSP。 Tomcat的核心功能？ Servlet 容器：负责加载、实例化、调用和销毁 Servlet。 HTTP 服务器：监听端口…...

编程日记 2025/9/6 14:26:54

使用 Qt QGraphicsView/QGraphicsScene 绘制色轮

使用 Qt QGraphicsView/QGraphicsScene 绘制色轮本文介绍如何在 Qt 中利用 QGraphicsView 和 QGraphicsScene 实现基础圆形绘制，以及进阶的色轮（Color Wheel）效果。色轮是色彩选择器的常见控件，广泛应用于图形设计、绘画和 UI …...

编程日记 2025/9/6 14:26:36

游戏开发实战（三）：Python复刻「崩坏星穹铁道」嗷呜嗷呜事务所---源码级解析该小游戏背后的算法与设计模式【纯原创】

文章目录奇美拉类摸鱼仔，负能量，真老实，小坏蛋，压力怪治愈师小团体画饼王平凡王坏脾气抗压包请假狂请假王内卷王受气包跑路侠看乐子背锅侠抢功劳急先锋说怪话帮倒忙小夸夸工作狂职业经理严酷恶魔职场清流开始工作吧小奇美拉没想…...

编程日记 2025/8/19 22:27:46