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

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

news 2026/2/8 13:29:22

目录

一、标签语法

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">
  1. Windows 默认是 \ ，其他系统是 /，建议统一写为 /
  2. 特殊的绝对路径应用场景：在线网页地址，友情链接

7. 超链接标签

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

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

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

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

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

8. 音频

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

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

9. 视频

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

 

<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<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集合框架中的一个核心接口&#xff0c;它定义了一个有序的集合&#xff08;也称为序列&#xff09;。List接口继承自Collection接口&#xff0c;因此它包含了Collection接口中定义的所有方法&#xff0c;同时还增加了一些特定的方法…...

编程日记 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语句可以单行或者多行书写&#xff0c;以分号结尾SQL语句可以使用空格/缩进来增强语句的可读性Mysql数据库的SQL语句不区分大…...

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

MySQL用心总结

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

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

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

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

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

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

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

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

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

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

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

深度学习如何入门？

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

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

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

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

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

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

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

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

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

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

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

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

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

编程日记 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安装目录 方法二、添加到扩展工具里面&#xff08;失败了&#xff09;方法二的成功步骤总结 前言 方法一、基本脚本 将Qt Designer&#xff08;一种图形用户界面设计工具&#xff09;生成的.ui文件转换为Python代码的脚本。 pytho…...

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

λ-矩阵知识点

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

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

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

双击预制体&#xff0c;进入详情页&#xff0c;没有显示资源 Bomb 是个预制体&#xff0c;但是当我双击进来什么都没有了&#xff0c;无法对预制体进行可视化编辑 目前我只试出来一个解决方法&#xff1a; 把预制体拖进Canvas文件中&#xff0c;这样就能展示到屏幕上&#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

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/8 4:37:22

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/2/8 3:03:01

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2026/1/31 5:06:34

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

编程新知 2026/2/4 11:21:40

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2026/1/21 12:29:04

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2026/1/23 10:51:19