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

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

news 2025/7/6 0:55:55

目录

一、标签语法

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

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/7/4 14:32:36

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/7/5 13:50:25

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/6/15 6:20:40

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/6/17 19:00:28

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/7/5 21:15:51

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/6/25 0:28:07

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/7/5 2:52:28

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/7/1 6:09:06

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/7/4 15:12:40