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

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

news 2025/7/7 0:03:46

目录

一、标签语法

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

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/6/17 7:22:49

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/7/5 22:57:52

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/7/6 18:34:54

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/6/15 22:22:18

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/7/6 5:56:03

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/6/17 17:52:51

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

编程新知 2025/6/20 18:33:23

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/7/6 20:17:05

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2025/7/6 10:25:35

适应性Java用于现代 API：REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

编程新知 2025/6/21 11:20:52