零基础HTML·笔记(持续更新…)

基础认知

HTML标签的结构

<strong>文字变粗</strong>

<开始标签>内容<结束标签>

结构说明:

  • 标签由<、>、1、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
  • 常见标签由两部分组成,我们称之为双标签前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容。
  • 少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容。

HTML标签学习

排版标签

标题标签

<h>系列标签(<h1><h2><h3>...)

语义:1~6级标题,重要程度依次递减

特点:文字加粗变大,并且独占一行

段落标签

场景:在新闻和文章的页面中,用于分段显示
代码:
<p>我是一段文字</p>
语义:段落
特点:段落之间存在间隙,独占一行

换行标签

<br>

水平线标签

<hr>

文本格式化标签

场景:需要让文字加粗、下划线、倾斜、删除线等效果

 

 有利于机器解析,对搜索引擎(SEO) 有帮助

图片标签

场景:在网页中显示图片

代码:<img src="./ 1.jpg" alt="替换文本 " title="鼠标悬停时显示的文本">

sre,title与alt间都有空格

特点:单标签,img标签需要展示对应的效果,需要借助标签的属性进行设置!

注意点:

标签的属性写在开始标签内部

标签上可以同时存在多个属性

属性之间以空格隔开

标签名与属性之间必须以空格隔开

属性之间没有顺序之分

属性名:src

属性值:目标图片的路径

注意点:当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)

属性名:alt

属性值:如果图片加载出错,显示的替换图片的文本

注意点:如果图片正常不会显示文本

属性名:title

属性值:鼠标悬停时显示的文字

注意点:title属性不仅仅可以用于图片标签,还可以用于其他标签

属性名:width和height

属性值:宽度和高度(数字)

注意点:

如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)

如果同时设置了width和height两个,若设置不当此时图片可能会变形

路径

相对路径(常用)

从当前文件开始出发找目标文件的过程

同级目录

"./"表当前层级

假设目标文件与当前文件在同一级目录

<img src="目标图片.gif">或者<img src="./目标图片.gif">

下级目录

<img src="./文件夹/目标图片.gif">

上级目录

"../"返回上一级目录

<img src="../目标图片.gif">

绝对路径

从盘符开始(C:/1.jpg)

音频标签

<audio src="./music.mp3"controls></audio>

常见属性:

 注意点:

音频标签目前支持三种格式:MP3、Wav、Ogg

视频标签

<video src="./video.mp4”controls></video>

常见属性:

 注意点:

视频标签目前支持三种格式:MP4、WebM、Ogg

链接标签

场景:点击之后,从一个页面跳转到另一个页面

称呼:a标签、超链接、锚链接

代码:<a href="./目标网页.html>替换文字</a>

特点:双标签,内部可以包裹内容,如果需要a标签点击之后去指定页面,需要设置a标签的href属性

类似于这是一个超链接

 属性名:target

属性值:目标网页的打开形式

取值:

  • _self     默认值,在当前窗口中跳转 (覆盖原网页)
  • _blank   在新窗口中跳转 (保留原网页)

<a href="https://www.baidu.com/"target="_blank">百度一下</a>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/75630.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nmcli创建wpa-psk2 wifi热点

1. 创建新的WiFi连接&#xff1a; sudo nmcli connection add type wifi ifname wlan0 con-name WiFi名称 autoconnect yes ssid WiFi名称 2. 配置接入点模式和IP共享&#xff1a; sudo nmcli connection modify WiFi名称 802-11-wireless.mode ap 802-11-wireless.band …

【消息队列kafka_中间件】一、快速入门分布式消息队列

在当今大数据和分布式系统盛行的时代&#xff0c;消息队列作为一种关键的中间件技术&#xff0c;发挥着举足轻重的作用。其中&#xff0c;Apache Kafka 以其卓越的性能、高可扩展性和强大的功能&#xff0c;成为众多企业构建分布式应用的首选消息队列解决方案。本篇文章将带你深…

在线地图支持天地图和腾讯地图,仪表板和数据大屏支持发布功能,DataEase开源BI工具v2.10.7 LTS版本发布

2025年4月11日&#xff0c;人人可用的开源BI工具DataEase正式发布v2.10.7 LTS版本。 这一版本的功能变动包括&#xff1a;数据源方面&#xff0c;Oracle数据源支持获取和查询物化视图&#xff1b;图表方面&#xff0c;在线地图支持天地图、腾讯地图&#xff1b;新增子弹图&…

【Linux实践系列】:匿名管道收尾+完善shell外壳程序

&#x1f525; 本文专栏&#xff1a;Linux Linux实践项目 &#x1f338;作者主页&#xff1a;努力努力再努力wz &#x1f4aa; 今日博客励志语录&#xff1a; 人生总会有自己能力所不及的范围&#xff0c;但是如果你在你能力所及的范围尽了全部的努力&#xff0c;那你还有什么遗…

【C++初学】课后作业汇总复习(七) 指针-深浅copy

1、 HugeInt类:构造、、cout Description: 32位整数的计算机可以表示整数的范围近似为&#xff0d;20亿到&#xff0b;20亿。在这个范围内操作一般不会出现问题&#xff0c;但是有的应用程序可能需要使用超出上述范围的整数。C可以满足这个需求&#xff0c;创建功能强大的新的…

【C++】 —— 笔试刷题day_16

刷题_day16&#xff0c;继续加油啊 一、字符串替换 题目解析 这道题是一道简单的字符题目&#xff0c;题目给我们一个字符串A&#xff0c;和n表示A字符串的长度&#xff0c;再给出一个字符数组arg&#xff0c;m表示arg中是数据个数。 然我们在字符串A中找到%s然后替换成arg中的…

n8n 本地部署及实践应用,实现零成本自动化运营 Telegram 频道(保证好使)

n8n 本地部署及实践应用&#xff0c;实现零成本自动化运营 Telegram 频道&#xff08;保证好使&#xff09; 简介 n8n 介绍 一、高度可定制性 二、丰富的连接器生态 三、自托管部署&#xff08;本地部署&#xff09; 四、社区驱动 n8n 的部署 一、前期准备 二、部署步…

flutter 桌面应用之系统托盘

系统托盘(Tray) 系统托盘就是状态栏里面对应的图标点击菜单 主要有两款框架 框架一句话评价tray_manager轻量、简单、易用&#xff0c;适合常规托盘功能system_tray更底层、更强大、支持图标/菜单/消息弹窗等更多功能&#xff0c;但复杂度更高 &#x1f9f1; 基础能力对比 …

修改idea/android studio等编辑器快捷注释从当前行开头的反人类行为

不知道什么时候开始&#xff0c;idea编辑的快捷注释开始从当前行开头出现了&#xff0c;显得实在是难受&#xff0c;我只想让在当前行代码的部份开始缩进两个字符开始&#xff0c;这样才会显得更舒服。不知道有没有强迫症的猴子和我一样&#xff0c;就像下面的效果&#xff1a;…

MySQL慢查询全攻略:定位、分析与优化实战

&#x1f680; MySQL慢查询全攻略&#xff1a;定位、分析与优化实战 #数据库优化 #性能调优 #SQL优化 #MySQL实战 一、慢查询定位&#xff1a;找到性能瓶颈 1.1 开启慢查询日志 -- 查看当前配置 SHOW VARIABLES LIKE %slow_query%; -- 动态开启&#xff08;重启失效&…

当原型图与文字说明完全不同时,测试要怎么做?

当测试遇上左右手互搏的需求&#xff0c;怎么办&#xff1f; "这个弹窗样式怎么和文档写的不一样&#xff1f;"、"按钮位置怎么跑到左边去了&#xff1f;"——根据Deloitte的调查&#xff0c;62%的项目存在原型图与需求文档不一致的情况。这种"精神分…

关于量化交易在拉盘砸盘方面应用的部分思考

关于“砸盘”的深层解析与操盘逻辑 ​​一、砸盘的本质与市场含义​​ ​​砸盘​​指通过集中抛售大量筹码导致价格快速下跌的行为&#xff0c;其核心目标是​​制造恐慌、清洗浮筹或实现利益再分配​​。不同场景下的砸盘含义不同&#xff1a; ​​主动砸盘&#xff08;操控…

【项目管理】第12章 项目质量管理-- 知识点整理

项目管理-相关文档,希望互相学习,共同进步 风123456789~-CSDN博客 (一)知识总览 项目管理知识域 知识点: (项目管理概论、立项管理、十大知识域、配置与变更管理、绩效域) 对应:第6章-第19章 第6章 项目管理概论 4分第13章 项目资源管理 3-4分第7章 项目…

一个好看的图集展示html页面源码

源码介绍 一个好看的图集展示html页面源码&#xff0c;适合展示自己的作品&#xff0c;页面美观大气&#xff0c;也可以作为产品展示或者个人引导页等等 源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c; 双击html文件可以本地运行…

2021第十二届蓝桥杯大赛软件赛省赛C/C++ 大学 B 组

记录刷题的过程、感悟、题解。 希望能帮到&#xff0c;那些与我一同前行的&#xff0c;来自远方的朋友&#x1f609; 大纲&#xff1a; 1、空间-&#xff08;题解&#xff09;-字节单位转换 2、卡片-&#xff08;题解&#xff09;-可以不用当组合来写&#xff0c;思维题 3、直…

LabVIEW 中 JSON 数据与簇的转换

在 LabVIEW 编程中&#xff0c;数据格式的处理与转换是极为关键的环节。其中&#xff0c;将数据在 JSON 格式与 LabVIEW 的簇结构之间进行转换是一项常见且重要的操作。这里展示的程序片段就涉及到这一关键功能&#xff0c;以下将详细介绍。 一、JSON 数据与簇的转换功能 &am…

蓝桥杯大模板

init.c void System_Init() {P0 0x00; //关闭蜂鸣器和继电器P2 P2 & 0x1f | 0xa0;P2 & 0x1f;P0 0x00; //关闭LEDP2 P2 & 0x1f | 0x80;P2 & 0x1f; } led.c #include <LED.H>idata unsigned char temp_1 0x00; idata unsigned char temp_old…

通过HTTP协议实现Git免密操作的解决方案

工作中会遇到这样的问题的。 通过HTTP协议实现Git免密操作的解决方案 方法一&#xff1a;启用全局凭据存储&#xff08;推荐&#xff09; 配置凭证存储‌ 执行以下命令&#xff0c;让Git永久保存账号密码&#xff08;首次操作后生效&#xff09;&#xff1a; git config --g…

Java常见面试问题

一.Liunx 二.Java基础 1.final 2.static 3.与equals 三.Collection 1.LIst 2.Map 3.Stream 四、多线程 1.实现方法 2.线程池核心参数 3.应用场景 五、JVM 1.堆 2.栈 六、Spring 1.面向对象 2.IOC 3.AOP 七、Springboot 1.自动装配 八、SpringCloud 1.Nacos 2.seata 3.ga…

【蓝桥杯】第十六届蓝桥杯 JAVA B组记录

试题 A: 逃离高塔 很简单&#xff0c;签到题&#xff0c;但是需要注意精度&#xff0c;用int会有溢出风险 答案&#xff1a;202 package lanqiao.t1;import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWrit…