WEB前端01-HTML5基础(01)
一.WEB相关概念
- 软件架构
-
C/S: Client/Server （客户端/服务器端）：在用户本地有一个客户端程序，在远程有一个服务器端程序
优点：用户体验好
缺点：开发、安装，部署，维护麻烦
-
B/S: Browser/Server （浏览器/服务器端）：只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
优点：开发、安装，部署，维护 简单
缺点：如果应用过大，用户的体验可能会受到影响。对硬件要求过高。
1. 静态资源：使用静态网页开发技术发布的资源。
* 所有用户访问，得到的结果是一样的。
* 如：文本，图片，音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
2. 动态资源：使用动态网页及时发布的资源。
* 所有用户访问，得到的结果可能不一样。
* 如：jsp/servlet
* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
- Web标准
HTML：负责网页结构(页面元素与内容)
CSS：负责网页表现(页面元素的外观，页面样式)
JavaScript：负责网页行为(交互效果)
二.HTML基础
- HTML基本概念
Hyper Text Markup Language 超文本标记语言
超文本: 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
标记语言:由标签构成的语言。<标签名称> 如 html，xml标记语言不是编程语言
- HTML标签规范
标签使用规范
1. 围堵标签：有开始标签和结束标签。如 <html> </html>
2. 自闭和标签：开始标签和结束标签在一起。如 <br/>
注意：
1.标签可以嵌套使用，但不可以交叉使用
2.html中不区分大小写
3.书写开始与结束标签时，在左尖括号与标签名或与斜杠“/”之间不能留有多余空格，否则浏览器对标签不能识别，导致错误标签直接显示在页面上，影响页面美观效果
1.基本标签
HTML文件包括头部和主体两部分
- <html**>**元素：文档以标签开始，以标签结束，所有内容都需要放在这两个标签之间。
- –<head**>** 元素：页面头部信息，用于向浏览器提供整个 页面的基本信息，但不包含页面的主体内容。头部信息中主要包括页面的标题、元信息、CSS样式、 JavaScript脚本等元素。页面头部信息通常并不在浏览器中显示，标题元素（标签的内容）除外， 会显示在浏览器窗口的左上角。
- –<body**>** 元素：网页的正文，是用户在浏览器主窗口中 看到的信息，包括图片、表格、段落、视频等内容， 且需位于标签之内；但并不是所有的内 部标签都是可见的。
<!-- 文档类型为HTML -->
<!DOCTYPE html><!-- HTML5中用来声明文档的类型 -->
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><!-- 设置浏览器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 标题设置 --><title>团日活动</title>
</head>
<body>
</body>
</html>
2.头部标签
- "title"标签
<title></title>
1.浏览器标题栏，默认快捷方式，收藏夹，搜索引擎标题
2.一个页面只有一个标题
3.标题长度小于64个字符
- "meta"标签(单标签)
<meta>的作用：提供有关页面的元信息
• 对页面的属性设置，如设置刷新、失效期、缓存、 cookie等，通过http-equiv属性进行指定。
• 对搜索引擎的属性设置，如设置关键字、简介、作者、机器人向导、 版权、编辑器等，通过name属性进行指定。
• 在HTML5中新增字符编码的属性设置，通过charset属性进行指定
格式：
<meta http-equiv="" content="">
<meta name="" content="“>
- "link"标签(单标签)
<link>标签的作用：定义文档与外部资源的关系，
最常见的用途是链接样式表。<link rel="" type="" href="">
3.文本标签
- **概述：**HTML中文本元素包括
“**标题段落标签**”：<h1>-<h6>, <p>“**文本格式标签**”：< br> , <hr>, 修饰标签，<div>“**特殊字符标签**”：以”&“开头，”；“结尾
- 标题标签 h 系列
A. 标题标签: <h1> - <h6><h1>111111111111</h1><h2>111111111111</h2><h3>111111111111</h3> <h4>111111111111</h4> //与默认文本大小基本相同<h5>111111111111</h5> //小于默认文本大小<h6>111111111111</h6>B. 效果 : h1为一级标题，字体也是最大的 ； h6为六级标题，字体是最小的。
C. 默认情况下，HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
D. 具有align属性：left，right，center，justify
- 段落标签
段落标签: <p> 如: <p> 这是一个段落 </p>
段落标签<p>是双标签，用于对网页内容提供块级格式，即首定义的内容从新的一行开始，并于上一段之间有一个空行。
- 换行标签
注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过br标签
- 水平分页线标签
<hr> </hr>
Size: 表示水平线的宽度。
Width:表示水平线的长。
Align: 表示水平线的对齐方式。
Noshade: 表示线段无阴影属性，为实心线段。
Color:表示线段的颜色
- 文本修饰标签
| 效果 | 标签 | 标签(强调) |
|---|---|---|
| 加粗 | b | strong |
| 倾斜 | i | em |
| 下划线 | u | ins |
| 删除线 | s | del |
前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。 而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。
- 特殊字符标签
- 文字标签
<font></font>
face:字体样式
size：大小
color：颜色
- 有关文本标签常见元素
* color：
1. 英文单词：red,green,blue
2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
* width：
1. 数值：width='20' ,数值的单位，默认是 px(像素)
2. 数值%：占比相对于父元素的比例
4.图片标签
- 图片的格式
gif:动态图片
png：体积更小
jpg: 色彩更加丰富，但每改一次都会失真
- 图片标签
<img/>
src:指定图像的url(绝对路径 / 相对路径)
width：图像的宽度(像素 / 相对于父元素的百分比)
height：图像的高度(像素 / 相对于父元素的百分比)<!-- img标签 -->
路径书写方式
相对路径：
./ : 当前目录， ./可以省略
../ : 回退上一级目录，不可以省略
绝对路径：
1.绝对网络路径https://www.gqt.org.cn/images/20210809_tuanhui_new.png
2.绝对磁盘路径：D:\VSCode\HTML\img\1.jpg大小标签
width: 宽度 px,像素; %,相对于父元素的百分比
height: 高度 px,像素; %,相对于父元素的百分比可替代文本(当图片为加载时显示的文字信息)：
alt="sada"图片的位置：
algin：top/middle/bottom/left左浮动/right右浮动(默认为bottom)
vspace：设置图像顶部和底部的间隙
hspace：设置图像左右两侧的间隙
5.列表标签
- 无序列表
<ul>:无序列表<li>:表示列表中的每一项type:disk,circle,square
- 有序列表
<ol>:有序列表<li>:表示列表中的每一项type:1,A,a,I,istart:列表的初始值，取值可以是1，2，3..
- 自定义列表
<dl>:自定义列表
<dl>
<dt>自定义列表名称1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
6.链接标签
- 作用一：页面间链接
文本超链接：
<a href="链宿" target="目标窗口位置">涟源</a>
图像超链接
<a href="path" target="目标窗口位置">链接文本或图像</a>
href(必填)：网址 表示要跳转到哪个网页
name:创建文档内的书签
title：指向链接的提示信息
target：指定打开的目标窗口，有5种取值：
_parent -上一级窗口；
_blank-新窗口；
_self - 同一窗口，默认值；
_top - 整个窗口打开；
framename-框架名
- 作用二：锚链接
--本页面跳转(用name标签进行标记)
#跳转标记
--其他页面跳转
要跳转页面#跳转标记
a.设置一个锚标记
<a name="标记">标记名</a>
b.跳转至此标记---------#
<a href="#跳转标记">标记名</a>
- 作用三：功能性链接
邮箱链接：<a href="邮箱名"></a>
如：
<a href="mailto:someone@163.com？cc=someoneelse@163.com&bcc=someoneelse2@163.com&subject=
hello%20world&body=这是一封测试邮件！">给作者的意见或建议！</a
下载歌曲
<a href="../ch5/Try Everything.mp3">下载歌曲    Try Everything</a>
相关文章：
WEB前端01-HTML5基础(01)
一.WEB相关概念 软件架构 C/S: Client/Server （客户端/服务器端）：在用户本地有一个客户端程序，在远程有一个服务器端程序 优点：用户体验好 缺点：开发、安装，部署，维护麻烦 B/S: Br…...
JUC-常见方法与线程的状态
常见方法 start()与run() 主线程直接调用某个线程t1的run()方法，run方法也会执行，但是并不会启动新的线程，而是有主线程调用的run方法，必须使用start才能启动新线程，但是start只能调用一次。 sleep()与yield() sle…...
如果你酿的酒是黄色，说明肯定是 “糊锅”了。
刚刚酿出的酒一般都是清澈见底的，如果你酿的酒是黄色，说明肯定是 “糊锅”了。这样的酒不仅颜色是黄的，而且还能闻到一股特别浓厚的 焦糊味。 这样的酒，米酒小哥是非常非常熟悉的，因为刚开始学习酿酒的那段时 间&#…...
国漫推荐07
玄幻、奇幻 1.侠岚系列 《侠岚》（第1至6季） 《画江湖之侠岚》（侠岚第7季） 2.《斗破苍穹》 三十年河东，三十年河西，莫欺少年穷！ 3.《武动乾坤》（第1至4季） 4.《妖神记》…...
力扣刷题35.搜索查找位置
给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示例 1: 输入: nums [1,3,5,6], target 5 输出: 2示例 2: 输入:…...
setContentView 流程
setContentView 流程 Activity -> setContentView 开发者设置入口PhoneWindow -> setContentView mWindow 在 attach 时初始化为 PhoneWindow，同时PhoneWindow也是Window唯一的实现类PhoneWindow -> installDecor 这一步的作用是 初始化DecorView, 把Deco…...
178)
基于STM32设计的智能手环(ESP8266+华为云IOT)178
基于STM32设计的智能手环(178) 文章目录 一、前言1.1 项目介绍【1】项目功能介绍【2】项目硬件模块组成【3】ESP8266工作模式配置【4】Android手机APP开发思路【5】项目模块划分1.2 项目功能需求（1）生理参数监测（2）计步功能（3）GPS定位（4）时间显示（5）OLED显示屏展示（…...
EE trade：实物黄金投资的好处和坏处
实物黄金是指以金条、金币、金饰品等形式存在的黄金。实物黄金具有保值、避险、抗通胀等特性，被视为传统的投资避险工具。近年来，随着全球经济形势的不确定性增加，实物黄金的投资价值也受到越来越多的关注。 投资实物黄金的优势 保值性&…...
Flutter RSA公钥转PEM
需添加依赖：pointycastle 参考链接：https://github.com/bcgit/pc-dart/issues/165 import dart:convert; import dart:typed_data;import package:pointycastle/pointycastle.dart; import package:pointycastle/src/platform_check/pl…...
下载站怎么防护DDOS攻击
下载站怎么防护DDOS攻击？随着互联网的发展，下载站作为资源分享的重要平台，面临着日益严峻的DDoS（分布式拒绝服务）攻击威胁。DDoS攻击通过大量恶意请求占用网络资源，导致服务器响应缓慢甚至瘫痪，…...
docker拉取镜像-配置阿里云镜像加速
1、配置阿里云镜像（用于拉取镜像加速） sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {"registry-mirrors": ["https://xxxxxxxx.mirror.aliyuncs.com"] } EOF sudo systemctl daemon-reload sudo syst…...
ai写作软件哪个好？亲测好用的5款工具分享
一眨眼，初伏就要到来了~办公室内的高温仿佛连空气都凝固了，键盘敲击声似乎都变得沉重而迟缓。在这样的天气下，创意与灵感似乎也躲进了阴凉处，办公效率显然大打折扣。 幸运的是，被我找到了新的应对之策，那便…...
Blender 中导出模型fbx
准备模型：确保你的模型已经完成，并且所有的材质、纹理等都已设置好。 应用所有变换： 选择模型，按下 CtrlA，选择 "All Transforms" 以应用所有的变换（位置、旋转和缩放）。 导出模型&a…...
景联文科技以高质量多模态数据集赋能AI大模型，精准匹配提升模型性能
在人工智能的浪潮中，语料数据如同建筑的基石，其质量、规模和运用策略直接决定了AI模型的表现和应用的广泛性。 景联文科技在AI领域深耕多年，打磨了高质量多模态数据集，致力于为不同训练阶段的算法精准匹配高质量数据资源。 3000万…...
【ROS2】中级:tf2-编写监听器（Python）
目标：学习如何使用 tf2 获取帧变换。 教程级别：中级 时间：10 分钟 目录 背景 先决条件 任务 1. 编写监听节点2. 更新启动文件3. 构建4. 运行 摘要 背景 在之前的教程中，我们创建了一个 tf2 广播器来发布乌龟的姿态到 tf2。 在本教…...
用QFramework重构飞机大战(Siki Andy的)（下02）（06-0？ 游戏界面及之后的所有面板）
用QFramework重构飞机大战(Siki Andy的)（下02）（06-0？ 游戏界面及之后的所有面板） GitHub // 官网的 全民飞机大战（第一季）-----框架设计篇（Unity 2017.3） 全民飞机大战&…...
Apifox报错404：网络错误，请检查网络，或者稍后再试的解决办法
详细报错如图： 解决办法： 1、检查 请求方法（get，post）是否正确，请求的URL是否正确，如果不正确，修改后重新发起请求；如果都正确，再参考2 2、复制curl用postm…...
腾讯混元大模型集成LangChain
腾讯混元大模型集成LangChain 获取API密钥 登录控制台–>访问管理–>API密钥管理–>新建密钥，获取到SecretId和SecretKey。访问链接：https://console.cloud.tencent.com/cam/capi python SDK方式调用大模型 可参考腾讯官方API import json…...
C++心决之stl中那些你不知道的秘密(string篇)
目录 1. 为什么学习string类？ 1.1 C语言中的字符串 2. 标准库中的string类 2.1 string类 2.2 string类的常用接口说明 1. string类对象的常见构造 2. string类对象的操作 3.vs和g下string结构的说明 3. string类的模拟实现 3.2 浅拷贝 3.3 深拷贝 3.4 写…...
date 命令学习
文章目录 date 命令学习1. 命令简介2. 语法参数2.1 使用语法2.2 说明2.3 参数说明 3. 使用案例:arrow_right: 星期名缩写 %a:arrow_right: 星期名全写 %A:arrow_right: 月名缩写 %b:arrow_right: 月名全称 %B:arrow_right: 日期和时间 %c:arrow_right: 世纪 %C:arrow_right: 按…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
Linux云原生安全：零信任架构与机密计算
Linux云原生安全：零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言：云原生安全的范式革命 随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...
网站指纹识别
网站指纹识别 网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍 为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...
CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！
本文介绍了一种名为AnomalyAny的创新框架，该方法利用Stable Diffusion的强大生成能力，仅需单个正常样本和文本描述，即可生成逼真且多样化的异常样本，有效解决了视觉异常检测中异常样本稀缺的难题，为工业质检、医疗影像…...
离线语音识别方案分析
随着人工智能技术的不断发展，语音识别技术也得到了广泛的应用，从智能家居到车载系统，语音识别正在改变我们与设备的交互方式。尤其是离线语音识别，由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力，广…...
深入浅出WebGL：在浏览器中解锁3D世界的魔法钥匙
WebGL：在浏览器中解锁3D世界的魔法钥匙 引言：网页的边界正在消失 在数字化浪潮的推动下，网页早已不再是静态信息的展示窗口。如今，我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室，甚至沉浸式的V…...
【技巧】dify前端源代码修改第一弹-增加tab页
回到目录 【技巧】dify前端源代码修改第一弹-增加tab页 尝试修改dify的前端源代码，在知识库增加一个tab页"HELLO WORLD"，完成后的效果如下 [gif01] 1. 前端代码进入调试模式 参考 【部署】win10的wsl环境下启动dify的web前端服务 启动调试…...