html初识
HTML认知
文章目录
- HTML认知
- 语法规范
- 注释
- 标签组成和关系
- 标签的关系
- 标签学习
- 排版系列标签
- **标题标签**
- **段落标签**
- 换行标签
- 水平线标签
- 文本格式化标签
- 媒体标签
- 图片标签
- src 目标图片的路径
- alt 替换文本
- title 图片的标题
- width 宽度 / height 高度
- 路径
- 绝对路径
- 相对路径（常用）
- 同级目录
- 下级目录
- 上级目录
- 音频标签
- 视频标签
- 链接标签
- 链接标签
- 链接标签的target属性
- 语法规范
- 注释
- 标签组成和关系
- 标签的关系
- 标签学习
- 排版系列标签
- **标题标签**
- **段落标签**
- 换行标签
- 水平线标签
- 文本格式化标签
- 媒体标签
- 图片标签
- src 目标图片的路径
- alt 替换文本
- title 图片的标题
- width 宽度 / height 高度
- 路径
- 绝对路径
- 相对路径（常用）
- 同级目录
- 下级目录
- 上级目录
- 音频标签
- 视频标签
- 链接标签
- 链接标签
- 链接标签的target属性
语法规范
注释
光标选住Ctrl+/
标签组成和关系
构成说明：
- 标签由< > / 英文单词或字母组成，并且把标签中的<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成，称之为 双标签，前部分叫 开始标签 ，后部分叫 结束标签。
- 少数标签由一部分组成，我们称之为：单标签，自成一体。
标签的关系
-
嵌套关系（父子
-
并列关系（兄弟
标签学习
排版系列标签
标题标签
代码：
<h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6>
选中<h6>中的数字6，按Ctrl+D，可以选中前后标签中的数字，可以直接修改
特点：
- 文字都有加粗
- 文字都有变大，并且从h1到h6文字逐渐变小
- 独占一行
***注意点：**h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻标签，网页的logo部分
段落标签
代码：
<p>段落标签内容</p>
特点：
- 段落之间存在间隙
- 独占一行
换行标签
代码：br
- 单标签
- 让文字强制换行
水平线标签
代码：<hr>
- 单标签
- 在页面中现实一条水平线
文本格式化标签
文字加粗、下划线、倾斜、删除线
| 标签 | 说明 |
|---|---|
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
| 推荐用下一组 语义更强 | |
| 标签 | 说明 |
| :----: | :----: |
| strong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
媒体标签
图片标签
代码：<img src="" alt="">
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置。
注意点：
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
src 目标图片的路径
- 当前网页和目标图片在 同一个文件夹中，路径直接写在目标图片的名字即可（包括后缀名）
./表示在当前文件夹中
alt 替换文本
-
当图片加载失败时，才显示alt的文本
-
当图片加载成功时，不会显示alt的文本
title 图片的标题
- 当鼠标悬停时，才会显示的文本
注意点：
- title属性不仅仅可以用于图片标签，还可以用于其他标签
width 宽度 / height 高度
- 如果只设置width或height中的一个，另一个没设置的会自动的等比例缩放（此时图片不会变形）
- 如果同时设置了width和height两个，若设置不当此时图片可能会变形
所以width和height只需给出一个属性就行。
路径
绝对路径
指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如：
- 盘符开头：D:\day01\images\1.jpg
- 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）
相对路径（常用）
概念：
- 当前文件：当前的html网页
- 目标文件：要找到的图片
相对路径：从当前文件夹开始出发找目标文件的过程
相对路径分类：
- 同级目录
- 下级目录
- 上级目录
同级目录
即当前文件和目标文件在同一目录中
代码：直接写目标文件的名字即可
- 方法一：
<img src="目标图片.gif"> - 方法二：
<img src="./目标图片.gif">
VSC 快捷操作：直接敲 ./后，会自动提示同级目录中有哪些文件，直接选择即可！
下级目录
下级目录：目标文件在下级目录中
代码：
- 先知道在哪个文件夹里面→文件夹名字
- 进入文件夹→/
- 进入后，直接写文件名字
VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可
上级目录
代码：
VS Code快捷操作：直接敲…/后，会自动提示上级目录下有文件，直接选择即可
音频标签
代码：<audio src="./music.mp3" controls></audio>
音频标签目前支持三种格式：MP3、Wav、Ogg
视频标签
代码：<video src="video.mp4" controls></video>
视频标签目前支持三种格式：MP4 、WebM 、Ogg
链接标签
链接标签
代码：<a href="./目标页面。html">超链接</a>
- 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
href属性：跳到地址 既可以是外部链接，也可以是内部链接
当网站开发初期，我们还不知道跳转地址的时候，href的值可以书写为#(空链接)
链接标签的显示特点（了解）
- a标间默认字体有下划线
- a标签从未点击过，默认文字显示蓝色
- a标签点击过后，文字显示为紫色（清楚浏览器历史记录为可恢复蓝色）
链接标签的target属性
target为目标网页的打开形式
[# HTML认知
语法规范
注释
光标选住Ctrl+/
标签组成和关系
构成说明：
- 标签由< > / 英文单词或字母组成，并且把标签中的<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成，称之为 双标签，前部分叫 开始标签 ，后部分叫 结束标签。
- 少数标签由一部分组成，我们称之为：单标签，自成一体。
标签的关系
-
嵌套关系（父子
-
并列关系（兄弟
标签学习
排版系列标签
标题标签
代码：
<h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6>
选中<h6>中的数字6，按Ctrl+D，可以选中前后标签中的数字，可以直接修改
特点：
- 文字都有加粗
- 文字都有变大，并且从h1到h6文字逐渐变小
- 独占一行
***注意点：**h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻标签，网页的logo部分
段落标签
代码：
<p>段落标签内容</p>
特点：
- 段落之间存在间隙
- 独占一行
换行标签
代码：br
- 单标签
- 让文字强制换行
水平线标签
代码：<hr>
- 单标签
- 在页面中现实一条水平线
文本格式化标签
文字加粗、下划线、倾斜、删除线
| 标签 | 说明 |
|---|---|
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
| 推荐用下一组 语义更强 | |
| 标签 | 说明 |
| :----: | :----: |
| strong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
媒体标签
图片标签
代码：<img src="" alt="">
- 单标签
- img标签需要展示对应的效果，需要借助标签的属性进行设置。
注意点：
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
src 目标图片的路径
- 当前网页和目标图片在 同一个文件夹中，路径直接写在目标图片的名字即可（包括后缀名）
./表示在当前文件夹中
alt 替换文本
-
当图片加载失败时，才显示alt的文本
-
当图片加载成功时，不会显示alt的文本
title 图片的标题
- 当鼠标悬停时，才会显示的文本
注意点：
- title属性不仅仅可以用于图片标签，还可以用于其他标签
width 宽度 / height 高度
- 如果只设置width或height中的一个，另一个没设置的会自动的等比例缩放（此时图片不会变形）
- 如果同时设置了width和height两个，若设置不当此时图片可能会变形
所以width和height只需给出一个属性就行。
路径
绝对路径
指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如：
- 盘符开头：D:\day01\images\1.jpg
- 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）
相对路径（常用）
概念：
- 当前文件：当前的html网页
- 目标文件：要找到的图片
相对路径：从当前文件夹开始出发找目标文件的过程
相对路径分类：
- 同级目录
- 下级目录
- 上级目录
同级目录
即当前文件和目标文件在同一目录中
代码：直接写目标文件的名字即可
- 方法一：
<img src="目标图片.gif"> - 方法二：
<img src="./目标图片.gif">
VSC 快捷操作：直接敲 ./后，会自动提示同级目录中有哪些文件，直接选择即可！
下级目录
下级目录：目标文件在下级目录中
代码：
- 先知道在哪个文件夹里面→文件夹名字
- 进入文件夹→/
- 进入后，直接写文件名字
VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可
上级目录
代码：
VS Code快捷操作：直接敲…/后，会自动提示上级目录下有文件，直接选择即可
音频标签
代码：<audio src="./music.mp3" controls></audio>
音频标签目前支持三种格式：MP3、Wav、Ogg
视频标签
代码：<video src="video.mp4" controls></video>
视频标签目前支持三种格式：MP4 、WebM 、Ogg
链接标签
链接标签
代码：<a href="./目标页面。html">超链接</a>
- 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
href属性：跳到地址 既可以是外部链接，也可以是内部链接
当网站开发初期，我们还不知道跳转地址的时候，href的值可以书写为#(空链接)
链接标签的显示特点（了解）
- a标间默认字体有下划线
- a标签从未点击过，默认文字显示蓝色
- a标签点击过后，文字显示为紫色（清楚浏览器历史记录为可恢复蓝色）
链接标签的target属性
target为目标网页的打开形式
思维导图总结.XMind
相关文章：
html初识
HTML认知 文章目录HTML认知语法规范注释标签组成和关系标签的关系标签学习排版系列标签**标题标签****段落标签**换行标签水平线标签文本格式化标签媒体标签图片标签src 目标图片的路径alt 替换文本title 图片的标题width 宽度 / height 高度路径绝对路径相对路径（常…...
BFC的概念与作用
本篇详细介绍FC的概念，以及BFC的作用：FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的.块级元素的布局属于Block Formatting Context（BFC） -也就是block level box都是在BFC中布局的； 行内…...
谷歌留痕代发技术指南_谷歌留痕怎么霸屏的？
本文主要分享谷歌留痕技术的一些常见问题，霸屏的原理是什么。 本文由光算创作，有可能会被修改和剽窃，我们佛系对待这种行为吧。 谷歌留痕也叫谷歌搜索留痕，那么谷歌搜索留痕的霸屏原理是什么？ 答案是：利…...
SCG failure information
我们知道5G网络有独立组网和非独立组网，独立组网中不论是核心网还是接入网都是5G，但是部署成本高；非独立组网也就是双连接(MRDC)也是目前比较流行的一种方式，其中的ENDC，即E-UTRA-NRDual Connectivity，是将…...
Idea修改Git账号及密码的方法
IDEA修改git账号及密码的方法：1、file->settings->passwords2、重启IDEA3、执行一次提交或更新当执行提交或更新之后，idea会自动提示输入账号、密码，如下：4、以上如果还修改不了，请尝试如下方式解决办法…...
leaflet 设置右键菜单，配置相应的功能（090）
第090个 点击查看专栏目录 本示例的目的是介绍如何在vue+leaflet中设置右键菜单，配置相应的功能。 直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果. 文章目录 示例效果配置方式示例源代码（共109行）安装插件相关API参考：专栏目标示例效果 配置方式 1）…...
怎么维护Linux VPS 服务器？简单7个步骤
维护VPS的目的是为了确保服务器网络始终畅通无阻。请注意，此列表中的任务并不是服务器维护所需完成的唯一任务。以下是 Linux VPS 服务器所有者可以做些什么来维护他们的服务器。 1.监控磁盘空间 服务器是个人服务器还是具有多个用户帐户的服务器并不重要࿰…...
[NOIP1999 提高组] 旅行家的预算（C++，贪心）
题目描述 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市（假设出发时油箱是空的）。给定两个城市之间的距离 D1D_1D1、汽车油箱的容量 CCC（以升为单位）、每升汽油能行驶的距离 D2D_2D2、出发点每升汽油价格PPP和沿途…...
Array.apply(null,{length: 99}) 逻辑解析
一、基础概述 vue 教程中有一段 demo code，如下： render: function (createElement) {return createElement(div,Array.apply(null, { length: 20 }).map(function () {return createElement(p, hi)})) }这个表达式Array.apply(null, { length: 20 })有…...
Web前端开发常用工具推荐（内含学前端必备软件资源）
1、Vim Vim作为一个类似于Vi的文本编辑器，功能强大的同时还可以做到高度可定制。当然了，虽然Vim类似Vi，但是它在Vi的基础上改进和增加了很多特性，VIM是纯粹的自由软件。即使Vim的学习成本高，但只要我们掌握很多的快捷…...
【python】考前复习，python基础语法知识点整理
文章目录1.常量与表达式2.变量和数据类型创建变量数据类型动态类型数据类型的转换3.注释4.字符串字符串的定义方式字符串的拼接字符串的格式化①字符串格式化的精度控制字符串的格式化②对表达式进行格式化5.从控制台输入(input)6.运算符算术运算符赋值运算符布尔类型和比较运算…...
3个月，入门网络安全并找到工作
在我进入大学之前，我一直对计算机感兴趣。虽然只是考了一个一般大学，但是选专业的时候还是选了计算机专业。 本来以为自己会在大学里学到很多有用的知识，并且能够很快找到一份好工作。但是，事实并不是这样。在大学期间，…...
你会用 TypeScript 的条件类型吗？
我们可以使用 TypeScript 中的条件类型来根据逻辑定义某些类型，就像是在编写代码那样。它采用的语法和我们在 JavaScript 中熟悉的三元运算符很像：condition ? ifConditionTrue : ifConditionFalse。我们来看看他是怎么工作的。 TypeScript 的条件类型…...
云原生丨一文教你基于Debezium与Kafka构建数据同步迁移（建议收藏）
文章目录前言一、安装部署Debezium架构部署示意图安装部署二、数据迁移Postgres迁移到PostgresMySQL迁移到PostgresSQL前言 在项目中，我们遇到已有数据库现存有大量数据，但需要将全部现存数据同步迁移到新的数据库中，我们应该如何处理呢&…...
顶象APP加固的“蜜罐”技术有什么作用
目录 蜜罐有很多应用模式 蜜罐技术让App加固攻守兼备 顶象端加固的三大功能 为了捕获猎物，猎人会在设置鲜活的诱饵。被诱惑的猎物去吃诱饵时，就会坠入猎人布置好的陷阱，然后被猎人擒获，这是狩猎中常用的一种手段。在业务安全防…...
训练一个ChatGPT需要多少数据？
“风很大”的ChatGPT正在席卷全球。作为OpenAI在去年底才刚刚推出的机器人对话模型，ChatGPT在内容创作、客服机器人、游戏、社交等领域的落地应用正在被广泛看好。这也为与之相关的算力、数据标注、自然语言处理等技术开发带来了新的动力。自OpenAI发布ChatGPT以来&…...
【GlobalMapper精品教程】053：打开dbf文件并生成有坐标系的shp数据
本文讲解在globalmapper汇总打开dbf文件并生成有坐标系的shp数据。 文章目录一、dbf文件解读二、打开dbf文件二、另存为shp文件一、dbf文件解读 我们可以通过Excel或FME等多种软件查看dbf的结构，字段有：Name，kind，Lat，…...
图像亮度调整
非线性方式 调整图像的方法有很多，最常用的方法就是对图像像素点的R、G、B三个分量同时进行增加（减少）某个值，达到调整亮度的目的。即改变图像的亮度，实际就是对像素点的各颜色分量值做一个平移。这种方法属于非线性的…...
精简版SDL落地实践
一、前言一般安全都属于运维部下面，和上家公司的运维总监聊过几次一些日常安全工作能不能融入到DevOps中，没多久因为各种原因离职。18年入职5月一家第三方支付公司，前半年在各种检查中度过，监管形势严峻加上大领导对安全的重视(主…...
第一回：Matplotlib初相识
一、认识matplotlib Matplotlib是一个Python 2D绘图库，能够以多种硬拷贝格式和跨平台的交互式环境生成出版物质量的图形，用来绘制各种静态，动态，交互式的图表。 Matplotlib可用于Python脚本，Python和IPython Shell、…...
【杂谈】-递归进化：人工智能的自我改进与监管挑战
递归进化：人工智能的自我改进与监管挑战 文章目录 递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
CMake基础：构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制（TuyaAI…...
中关于正整数输入的校验规则)
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
Mysql8 忘记密码重置，以及问题解决
1.使用免密登录 找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行： rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...