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

HTML5+CSS3+移动web——HTML 基础

news 2025/9/15 6:53:54

一、标签语法

HTML的基本框架

1. 标题标签

2. 段落标签

3. 换行和水平线

4. 文本格式化标签

5. 图像标签

6. 路径

相对路径

绝对路径

7. 超链接标签

8. 音频

9. 视频

10. 注释

二、标签结构

一、标签语法

HTML 超文本标记语言——HyperText Markup Language。

HTML的基本框架

html：整个网页
head：网页头部，用来存放给浏览器看的信息，例如 CSS
- title：网页标题
body：网页主体，用来存放给用户看的信息，例如图片、文字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页标签</title></title>
</head>
<body><strong>需要加粗的文字<strong><a href="./html基础.html" target="_blank">跳转打开新的页签</a><!-- href属性值写#，表示空链接，不会跳转 --><a href="#">空链接</a><br><hr><!--  --><p>你好呀！</p><p>受低温冻雨影响，多地电力人员通过无人机等科技手段除冰保供电。在部分山区，他们只能爬上电线杆，彻夜人工除冰。为了除冰抢修他们用了千方百计。转发致敬低温雨雪冰冻天气的守护者↓↓你们辛苦了，也注意安全</p>
</body>
</html>

VS Code 可以快速生成框架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键

1. 标题标签

<!-- h1 标签在一个网页中只能用一次 , h2 ~ h6 没有使用次数的限制 -->
<h1>一级标题</h1> 
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

显示特点：

文字加粗
字号逐渐减小
独占一行（换行）

2. 段落标签

<p>段落</p>

一般用在新闻段落、文章段落信息等等。

显示特点：

独占一行
段落之间存在间隙

3. 换行和水平线

<br> <!-- 换行 -->
<hr> <!-- 水平线 -->

4. 文本格式化标签

为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等

5. 图像标签

<img  src="图片的 URL">

用于在网页中插入图片， src用于指定图像的位置和名称，是 <img> 的必须属性。

属性语法：属性名="属性值"，属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

图片属性：

6. 路径

路径指的是查找文件时的地址

相对路径

查找方式：从当前文件位置出发查找目标文件

特殊符号：

/ 表示进入某个文件夹里面 → 文件夹名/
. 表示当前文件所在文件夹 → ./
.. 表示当前文件的上一级文件夹 → ../

绝对路径

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发

<img  src="D:\images\dog.jpg">

Windows 默认是 \ ，其他系统是 /，建议统一写为 /
特殊的绝对路径应用场景：在线网页地址，友情链接

7. 超链接标签

超链接标签用于点击跳转到其他页面。

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

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。

href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

8. 音频

<audio src="音频的 URL"></audio>

书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

9. 视频

<video src="视频的 URL"></video>

<video src="./media/vue.mp4" controls loop muted autoplay></video>

10. 注释

概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。

注释不会再浏览器中显示。

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

二、标签结构

标签要成对出现，中间包裹内容
<>里面放英文字母（标签名）
结束标签比开始标签多 /
标签分类：双标签和单标签

<strong>需要加粗的文字<strong>
<br>
<hr>
<p>你好呀！</p>

HTML5+CSS3+移动web——HTML 基础

目录一、标签语法 HTML的基本框架 1. 标题标签 2. 段落标签 3. 换行和水平线 4. 文本格式化标签 5. 图像标签 6. 路径相对路径绝对路径 7. 超链接标签 8. 音频 9. 视频 10. 注释二、标签结构一、标签语法 HTML 超文本标记语言——HyperText Markup Langua…...

编程日记 2024/2/8 10:19:14

Java中List接口的常用方法

列举一些List接口的常用方法 List接口是Java集合框架中的一个核心接口，它定义了一个有序的集合（也称为序列）。List接口继承自Collection接口，因此它包含了Collection接口中定义的所有方法，同时还增加了一些特定的方法…...

编程日记 2024/2/8 10:14:06

mysql基础从头到尾快速梳理

MYSQL数据库学习 mysql的启动 net start mysql net stop mysql MYSQL客户端的连接 mysql -h 127.0.0.1 -p 3306 -u root -p SQL SQL通用语法 SQL语句可以单行或者多行书写，以分号结尾SQL语句可以使用空格/缩进来增强语句的可读性Mysql数据库的SQL语句不区分大…...

编程日记 2024/2/8 10:12:03

MySQL用心总结

大家好，好久不见，今天笔者用心一步步写一份mysql的基础操作指南，欢迎各位点赞收藏 -- 启动MySQL net start mysql-- 创建Windows服务 sc create mysql binPath mysqld_bin_path(注意：等号与值之间有空格) mysql -h 地址 -…...

编程日记 2024/2/8 10:08:59

电路设计（13）——生产线易拉罐自动计数装置的proteus仿真

1.设计要求使用指定元件，用模电、数电等有关知识，设计并制作一个易拉罐饮料计数自动化的模拟装置。生产单位常采用红外自动计数装置，将装有饮料的易拉罐放在马达带动的传动带上，在传动带运动的过程中让每个易拉罐依次同一方向地穿…...

编程日记 2024/2/8 10:05:56

微服务-微服务Alibaba-Nacos 源码分析（源码流程图）-2.0.1

客户端注册临时实例，GRPC处理客户端服务发现及订阅处理客户端数据变换，数据推送，服务端集群服务数据同步...

编程日记 2024/2/8 10:03:54

编码技巧——在项目中使用Alibaba Cloud Toolkit远程部署

背景在新公司项目开发，当前项目为自建项目，意思是从开发到运维都需要自己负责，远程的服务器也是自己搭建的win操作系统； 之前在大厂工作时，一般提交代码之后，CICD流水线会自动的执行最新代码的拉取、构建打…...

编程日记 2024/2/8 10:02:53

深度学习如何入门？

深度学习是一个广泛且深入的领域，入门需要一些基础知识和学习资源。以下是一些推荐的步骤和资源： 数学基础：深度学习需要一些数学基础，包括线性代数、微积分、概率论和统计学。这些都是理解深度学习算法背后的原理的关键。编程基…...

编程日记 2024/2/8 10:01:52

米哈游（原神）终面算法原题

恒大正式破产准确来说，是中国恒大（恒大汽车、恒大物业已于 2024-01-30 复牌）。恒大破产，注定成为历史的注目焦点。作为首个宣布破产的房地产企业，恒大的破产规模也创历史新高。房地产作为曾推动中国三分之一经济增…...

编程日记 2024/2/8 10:00:52

机器学习如何改变缺陷检测的格局？

机器学习在缺陷检测中扮演着重要的角色，它能够通过自动学习和识别各种缺陷的模式和特征，改变缺陷检测的格局。以下是机器学习在缺陷检测中的一些应用和优势： 自动化检测：机器学习技术可以自动化处理大量的数据，通过学…...

编程日记 2024/2/8 9:59:51

【Java万花筒】图数据库 vs 多模型数据库：哪种数据库适合你的应用场景？

解密图数据库与多模型数据库：特性、查询语言和成功案例的全景展示前言图数据库和多模型数据库在当今数据处理领域扮演着重要的角色。本文将介绍四个主要的图数据库和多模型数据库：Neo4j、Apache TinkerPop、JGraphT和ArangoDB，探索它们的…...

编程日记 2024/2/8 9:53:46

【射影几何13 】梅氏定理和塞瓦定理探讨

梅氏定理和塞瓦定理目录一、说明二、梅涅劳斯（Menelaus）定理三、塞瓦(Giovanni Ceva）定理四、塞瓦点的推广一、说明在射影几何中，梅涅劳斯（Menelaus）定理和塞瓦定理是非常重要的基本定理。通过这两个定…...

编程日记 2024/2/8 9:50:43

Powershell Install 一键部署Openssl+certificate证书创建

前言 Openssl 是一个方便的实用程序，用于创建自签名证书。您可以在所有操作系统（如 Windows、MAC 和 Linux 版本）上使用 OpenSSL。 Windows openssl 下载前提条件开启wmi,配置网卡，参考自签名证书创建我们自己的根 CA 证书和 CA 私钥（我们自己充当 CA）创建服务器…...

编程日记 2024/2/8 9:46:40

SERVLET线程模型

1. SERVLET线程模型 Servlet规范定义了两种线程模型来阐明Web容器应该如何在多线程环境中处理servlet。第一种模型称为多线程模型，默认在此模型内执行所有servlet。在此模型中，每次客户机向servlet发送请求时Web容器都启动一个新线程。这意味着可能有多个线程同时访问servle…...

编程日记 2024/2/8 9:45:39

【开源】基于JAVA+Vue+SpringBoot的新能源电池回收系统

目录一、摘要1.1 项目介绍1.2 项目录屏二、功能模块2.1 用户档案模块2.2 电池品类模块2.3 回收机构模块2.4 电池订单模块2.5 客服咨询模块三、系统设计3.1 用例设计3.2 业务流程设计3.3 E-R 图设计四、系统展示五、核心代码5.1 增改电池类型5.2 查询电池品类5.3 查询电池回…...

编程日记 2024/2/8 9:43:37

【蓝桥杯冲冲冲】Prime Gift

【蓝桥杯冲冲冲】Prime Gift 蓝桥杯备赛 | 洛谷做题打卡day31 文章目录蓝桥杯备赛 | 洛谷做题打卡day31Prime Gift题面翻译题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示题解代码我的一些话 Prime Gift 题面翻译给你 n n n 个…...

编程日记 2024/2/8 9:42:36

【PyQt】06-.ui文件转.py文件

文章目录前言方法一、基本脚本查看自己的uic安装目录方法二、添加到扩展工具里面（失败了）方法二的成功步骤总结前言方法一、基本脚本将Qt Designer（一种图形用户界面设计工具）生成的.ui文件转换为Python代码的脚本。 pytho…...

编程日记 2024/2/8 9:36:31

λ-矩阵知识点

原文:链接 λ-矩阵若矩阵 A \mathbf{A} A 的元素为关于 λ λ λ 的多项式，则称 A \mathbf{A} A 为 λ λ λ-矩阵 (表示为 A ( λ ) \mathbf{A}(λ) A(λ)). λ λ λ-矩阵也存在秩、逆、初等变换、相抵的概念, 但是有一些不同. 定义. λ λ λ-矩阵的秩是…...

编程日记 2024/2/8 9:35:30

cocos creator 3.x 预制体无法显示

双击预制体，进入详情页，没有显示资源 Bomb 是个预制体，但是当我双击进来什么都没有了，无法对预制体进行可视化编辑目前我只试出来一个解决方法： 把预制体拖进Canvas文件中，这样就能展示到屏幕上&#xff…...

编程日记 2024/2/8 9:34:28

Tomcat之虚拟主机

1.创建存放网页的目录 mkdir -p /web/{a,b} 2.添加jsp文件 vi /web/a/index.jsp <% page language"java" import"java.util.*" pageEncoding"UTF-8"%> <html> <head><title>JSP a page</title> </head> …...

编程日记 2024/2/8 9:28:24

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...

编程新知 2025/9/11 7:28:46

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/9/14 13:47:53

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。同样的技术也是 Power BI 数据…...

编程新知 2025/9/9 10:12:58

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/9/9 10:12:54

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...

编程新知 2025/9/13 17:43:21

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎：品融电商，一站式全案代运营领跑者在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/9/10 3:42:08

C# 类和继承(抽象类)

抽象类抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。不能创建抽象类的实例。抽象类使用abstract修饰符声明。抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/8/26 6:51:02

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析：CodeRider、GitHub Copilot及其他随着人工智能技术的快速发展，AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者，分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/7/6 18:33:10

网络编程（UDP编程）

思维导图 UDP基础编程（单播） 1.流程图服务器：短信的接收方创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/9/12 23:22:08

有限自动机到正规文法转换器v1.0

1 项目简介这是一个功能强大的有限自动机（Finite Automaton, FA）到正规文法（Regular Grammar）转换器，它配备了一个直观且完整的图形用户界面，使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/9/12 22:46:16

一、标签语法

HTML的基本框架

1. 标题标签

2. 段落标签

3. 换行和水平线

4. 文本格式化标签

5. 图像标签

6. 路径

相对路径

绝对路径

7. 超链接标签

8. 音频

9. 视频

10. 注释

二、标签结构

相关文章：