HTML基础用法介绍一

  • VS code 如何快速生成HTML骨架
  • 注释是什么？为什么要写注释？注释的标签是什么？
  • 标题标签
  • 段落标签
  • 换行标签与水平线标签 (都是单标签）
  • 文本格式化标签
  • 图片标签
  • 超链接标签
  • 音频标签
  • 视频标签

🚘正片开始

VS code 如何快速生成HTML骨架

在这里插入图片描述
如上先输入！然后再按回车或者table即可生成如下html骨架
在这里插入图片描述

注释是什么？

注释：注释就是对代码的解释和说明，其目的是让人能够更加轻松地了解代码，并且注释的内容是不会显示在网页中的。注释是编写程序时，写程序的人给一个语句，程序段，函数等的解释或提示，能够提高代码的可读性

为什么要写注释？

写注释方便理解，方便查找或方便项目组里的其他程序员了解你的代码，而且可以方便以后你对自己代码进行修改。

注释的标签是什么？

//这个只能注释每一行或者多行，不能注释某行中某部分内容
<!--内容--> //即可注释某部分内容，又可注释多行，以及一行
/*内容*/

在VS Code中，快速添加与删除注释的快捷加：ctrl+/

标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

用法展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是一个网页</title>
</head>
<body><h1>我是一级标签</h1><h2>我是二级标签</h2><h3>我是三级标签</h3><h4>我是四级标签</h4><h5>我是五级标签</h5><h6>我是六级标签</h6>
</body>
</html>

标题标签效果展示

在这里插入图片描述

标题标签的显示特点：

  1. 文字有加粗效果
  2. 每次使用完不需要使用换行标签，标题标签自带换行效果，使标题独占一行
  3. 一级标题标签字号最大，随着级数增大，字号逐渐减小

注：因为一级标题是重要标题，一级标题标签在一个网页中一般只会使用一次，如我们所看见的新闻的标题，或者是淘宝的logo

新闻

在这里插入图片描述

段落标签

<p>内容</p>

用法展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是一个网页</title>
</head>
<body><p>君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。</p>
</body>
</html>

效果展示
在这里插入图片描述

观察代码中<p>标签的内容，明明我每一句诗都是换行了的，可是为什么展示到网页中就成一行了呢？所以我们可以肯定你在代码中使内容换行是不会影响网页的效果的。要想使它们真正的换行还需要使用换行标签，后面我会介绍。

刚刚是一个标签的使用，我们现在看看多个段落标签使用的情况

代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是一个网页</title>
</head>
<body><p>淘宝网是中国深受欢迎的网购零售平台，拥有近5亿的注册用户数，每天有超过6000万的固定访客，同时每天的在线商品数已经超过了8亿件，平均每分钟售出4.8万件商品。随着淘宝网规模的扩大和用户数量的增加，淘宝也从单一的C2C网络集市变成了包括C2C、团购、分销、拍卖等多种电子商务模式在内的综合性零售商圈。已经成为世界范围的电子商务交易平台之一。</p><p>2024年2月，有多名网友发现部分淘宝订单可直接跳转至微信支付进行付款。淘宝客服表示，微信支付目前仅针对部分用户逐步开放，且仅支持购买部分商品时可选择。</p>
</body>
</html>

效果展示

在这里插入图片描述
特点：段落标签之间是自带换行效果的。

换行标签与水平线标签

  1. 换行标签
<br>

用法展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是一个网页</title>
</head>
<body><p>君不见黄河之水天上来，奔流到海不复回。<br>君不见高堂明镜悲白发，朝如青丝暮成雪。<br>人生得意须尽欢，莫使金樽空对月。<br>天生我材必有用，千金散尽还复来。<br>烹羊宰牛且为乐，会须一饮三百杯。<br>岑夫子，丹丘生，将进酒，杯莫停。</p>
</body>
</html>

效果展示

在这里插入图片描述
之前我们是在代码中按回车使<p>标签的内容换行，结果发现网页中的内容并没有按照我们预期想的换行，而是全部堆在了一行上面，现在我们使用了<br>标签之后，网页的内容发生了换行，当程序执行的<br>标签之后会自动跳到下一行，这就是<br>标签的作用

  1. 水平线标签
<hr>

用法展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是一个网页</title>
</head>
<body><p>君不见黄河之水天上来，奔流到海不复回。<br><hr>君不见高堂明镜悲白发，朝如青丝暮成雪。<br><hr>人生得意须尽欢，莫使金樽空对月。<br><hr>天生我材必有用，千金散尽还复来。<br><hr>烹羊宰牛且为乐，会须一饮三百杯。<br><hr>岑夫子，丹丘生，将进酒，杯莫停。<hr></p>
</body>
</html>

效果展示

在这里插入图片描述
特点：在<hr>标签的下面的内容会换行到下一行填写

文本格式化标签

文本格式化标签的作用：

  • 为文本添加特殊格式，以突出重点。
  • 常见的文本格式化：加粗，倾斜，删除线 ，下划线。
标签名用法效果
strong/b<strong>我被加粗啦</strong>
<b>我被加粗啦</b>		我被加粗啦
em/i<em>我被倾斜啦</em>
<i>我被倾斜啦</i>		我被倾斜啦
ins/u<ins>我添加下划线啦</ins>
<u>我添加下划线啦</u>		我添加下划线啦
del/s<del>我使用了删除线</del>
<s>我使用了删除线</s>		我使用了删除线

图片标签

在介绍图片标签前首先我们需要先准备几张素材图片，图片的位置尤为重要。接下来我会给大家介绍两种图片路径，第一种是相对路径，第二种就是绝对路径了。

  1. 用相对路径
    将图片放在html文件旁边
    在这里插入图片描述
    图片标签
<img src ="图片路径">

图片标签不仅仅只要rsc属性，还有其他属性，我将其他属性做成表格展示给大家看

属性作用说明
alt替换文本图片无法显示的时候显示的文字
title提示文本鼠标悬停在图片上面的时候显示的文字
width图片的宽度值为数字,没有单位
height图片的高度值为数字，没有单位

接下来我会逐一对这些属性使用一遍

  1. alt属性的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是一个网页</title>
</head>
<body><img src="./m.jpg" alt="这是一张动漫图片">
</body>
</html>

效果展示
在这里插入图片描述
可以看见当图片没有加载出来时，则会显示文字，告诉用户这张图片是什么。

  1. title属性的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是一个网页</title>
</head>
<body><img src="./dm.jpg" title="我是个漂亮的妹子">
</body>
</html>

展示效果
在这里插入图片描述

  1. width和height属性的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是一个网页</title>
</head>
<body><img src="./dm.jpg" width="300" height="400">
</body>
</html>

展示效果
在这里插入图片描述
将图片改成了宽300高400，当如果我们只更改width和height中的其中一个属性，另一个属性则会等比例更改

当只更改宽，图片没有变形，则证明了等比例缩放的效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是一个网页</title>
</head>
<body><img src="./dm.jpg" width="150">
</body>
</html>

展示效果
在这里插入图片描述

超链接标签

超链接：当你点击某个文字或者图片时会跳转到另一个网页

超链接的标签

<a herf="路径" target="_blank">这里可以输入内容或者使用其他标签也可以</a>

当使用该属性 arget="_blank" 时，点击超链接打开的新网页不会在该窗口直接打开，而是创建一个新窗口再打开。

这样说肯定不好理解，还是实践出真知吧。

用法展示

当我不用 target 属性时

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="https://www.baidu.com/">跳转到百度</a>
</body>
</html>

展示效果
在这里插入图片描述
当我点击这个超链接时
在这里插入图片描述
它直接在我当前网页打开了百度，并没有新建窗口打开，如果我也想要之前的网页，那岂不是还得点回退键才能退回去，这样岂不是很麻烦，所以我们在使用超链接时，基本会用target属性。

当使用了target属性时的效果
在这里插入图片描述

创建了个新窗口打开了百度。

小知识：当超链接路径是以后缀为exe结尾的话，点击该超链接会下载对应的exe程序

用法展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="https://dldir1.qq.com/qqfile/qq/QQNT/Windows/QQ_9.9.15_240925_x64_01.exe" target="_blank">下载QQ</a>
</body>
</html>

效果展示
在这里插入图片描述
此时我已经点击了超链接，它直接帮我开始下载QQ了。

音频标签

<audio src="音频路径"></audio>

属性表格

属性作用特殊说明
src（必须属性）指明音频路径支持格式：MP3，Ogg,Wav
controls显示音频控制面板无
loop循环播放无
autoplay自动播放为了提升用户体验，浏览器一般会禁用自动播放，该属性无意义

接下来只介绍一下controls属性的用法，其他属性用法相同

controls属性用法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><audio src="./纯音乐.mp3"  controls ></audio>
</body>
</html>

细心的朋友肯定会发现，controls 属性没有被赋值耶，这是咋回事？每个人都有偷懒的时候，当然设计者也不列外，当 controls 属性被赋值的内容和属性名一样时可简写成 属性名==controls="controls"。

效果展示
在这里插入图片描述

出现了一块音频控制板块

视频标签

<video src="音频路径"> </video>

属性表格

属性作用特殊说明
src（必须属性）指明视频路径支持格式：MP4，Ogg,WebM
controls显示视频控制面板无
loop循环播放无
muted静音播放无
autoplay自动播放使用该属性时必须有静音播放属性，否则不生效

用法展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="./dm.mp4"  controls ></audio>
</body>
</html>

效果展示
在这里插入图片描述

完结🎉🎉🎉

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

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

相关文章

基于Spring框架的分层解耦详解

基于Spring框架的分层解耦详解

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;Java Web关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Java Web 三层架构&#xff1a; Java Web可以大致被分为三层架构&#xff1a;…
阅读更多...
成都睿明智科技有限公司抖音电商服务靠谱吗？

成都睿明智科技有限公司抖音电商服务靠谱吗？

在这个电商风起云涌的时代&#xff0c;抖音作为短视频直播的超级流量池&#xff0c;正深刻改变着人们的购物习惯。无数商家蜂拥而至&#xff0c;渴望在这片蓝海中找到属于自己的岛屿。而提及抖音电商服务&#xff0c;成都睿明智科技有限公司无疑是一个备受瞩目的名字。那么&…
阅读更多...
Linux 进程的基本概念及描述

Linux 进程的基本概念及描述

目录 0.前言 1. 什么是进程 1.1 进程的定义与特性 1.2 进程与线程的区别 2.描述进程 2.1 PCB (进程控制块) 2.2 task_struct 3.查看进程 3.1 查看进程信息 3.1.1 /proc 文件系统 3.1.2 ps 命令 3.1.2 top 和 htop 命令 3.2 获取进程标识符 3.2.1使用命令获取PID 3.2.2 使用C语言…
阅读更多...
加密与安全_HTOP 一次性密码生成算法

加密与安全_HTOP 一次性密码生成算法

文章目录 HOTP 的基础原理HOTP 的工作流程HOTP 的应用场景HOTP 的安全性安全性增强措施Code生成HOTP可配置项校验HOTP可拓展功能计数器&#xff08;counter&#xff09;计数器在客户端和服务端的作用计数器的同步机制客户端和服务端中的计数器表现服务端如何处理计数器不同步计…
阅读更多...
AIGC学习笔记—minimind详解+训练+推理

AIGC学习笔记—minimind详解+训练+推理

前言 这个开源项目是带我的一个导师&#xff0c;推荐我看的&#xff0c;记录一下整个过程&#xff0c;总结一下收获。这个项目的slogan是“大道至简”&#xff0c;确实很简。作者说是这个项目为了帮助初学者快速入门大语言模型&#xff08;LLM&#xff09;&#xff0c;通过从零…
阅读更多...
vue3学习记录-computed

vue3学习记录-computed

vue3学习记录-computed 1.为什么要用computed2.使用方法2.1 基本实例2.2 可写计算属性 1.为什么要用computed 写个购物车的案例 <script setup> import { ref, reactive,computed } from "vue" const tableData reactive([{ name: 商品1, price: 10, num: 1…
阅读更多...
3. 轴指令（omron 机器自动化控制器）——＞MC_MoveRelative

3. 轴指令（omron 机器自动化控制器）——＞MC_MoveRelative

机器自动化控制器——第三章 轴指令 5 MC_MoveRelative变量▶输入变量▶输出变量▶输入输出变量 功能说明▶指令详情▶时序图▶重启运动指令▶多重启动运动指令▶异常 MC_MoveRelative 指定自指令当前位置起的移动距离&#xff0c;进行定位。 指令名称FB/FUN图形表现ST表现MC…
阅读更多...
JVM(HotSpot)：字符串常量池(StringTable)

JVM(HotSpot)：字符串常量池(StringTable)

文章目录 一、内存结构图二、案例讲解三、总结 一、内存结构图 JDK1.6 JDK1.8 我们发现&#xff0c;StringTable移入了Heap里面。所以&#xff0c;应该想到&#xff0c;StringTable将受到GC管理。 其实&#xff0c;1.6中&#xff0c;在方法区中的时候&#xff0c;也是受GC管…
阅读更多...
从底层理解为什么常量区中的代码不能被修改？

从底层理解为什么常量区中的代码不能被修改？

目录 前言&#xff1a;一、了解虚拟地址二、页表映射三、常量区不能被修改的原理四、常量区不可修改的意义 前言&#xff1a; 平时我们在编写代码时都会用到或遇到所谓的常量区或者不可修改的代码&#xff0c;比如说用双引号包起来字符串&#xff08;“Hello World”&#xff…
阅读更多...
微服务SpringSession解析部署使用全流程

微服务SpringSession解析部署使用全流程

目录 1、SpringSession简介 2、实现session共享的三种方式 1、修改Tomcat配置文件 2、Nginx负载均衡策略 3、redis统一存储 0、准备工作 1、本地服务添加依赖 2、修改本地服务配置文件 3、添加application.properties文件 4、添加nacos - redis配置 5、修改本地项目…
阅读更多...
Linux启动mysql报错

Linux启动mysql报错

甲方公司意外停电&#xff0c;所有服务器重启后&#xff0c;发现部署在Linux上的mysql数据库启动失败.再加上老员工离职&#xff0c;新接手项目&#xff0c;对Linux系统了解不多&#xff0c;解决起来用时较多&#xff0c;特此记录。 1.启动及报错 1.1 启动语句1 启动语句1&a…
阅读更多...
全站最详细的Python环境配置步骤

全站最详细的Python环境配置步骤

1、官网下载IDE JetBrains下载 2、IDE下载、安装步骤 这里展示的是如何在Windows上下载、安装Pycharm工具&#xff0c;Linux的步骤类似。 2.1、选择开发者工具 选择开发者工具 2.2、选择Pycharm 选择Pycharm 2.3、选择下载 选择下载 2.4、选择社区版 一般而言&#xff…
阅读更多...
基于SpringBoot+Vue的留守儿童爱心网站系统

基于SpringBoot+Vue的留守儿童爱心网站系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…
阅读更多...
MyBatis的注入问题

MyBatis的注入问题

对之前文章的补充&#xff1a;MyBatis中的#{}与${}注入问题----原文链接 前言&#xff1a; MyBatis是一个流行的Java持久层框架&#xff0c;用于将对象与数据库中的数据进行映射。然而&#xff0c;如果不当使用&#xff0c;MyBatis也可能受到诸如SQL注入这类的安全问题的影响。…
阅读更多...
解决VRM格式模型在Unity中运行出现头发乱飞等问题

解决VRM格式模型在Unity中运行出现头发乱飞等问题

1、问题 通过VRoidStudio制作导出的vrm格式的模型&#xff0c;放在unity中使用时&#xff0c;一运行就会出现头发乱飞&#xff0c;没有自然下垂的问题 2、解决方法 将模型下的secondary中的所有VRM Spring Bone脚本中的Drag Force改为1&#xff0c;Hit Radius改为0 修改后…
阅读更多...
JAVA笔记 | 实际上用到的策略模式(可直接套用)

JAVA笔记 | 实际上用到的策略模式(可直接套用)

自己开发中用到了策略模式&#xff0c;这样写不一定是最好的&#xff0c;但是满足了业务场景跟使用要求&#xff0c;做个笔记&#xff0c;下次有用到可以快速复习跟套用 假设使用场景&#xff1a;有几只宠物&#xff0c;猫跟狗等&#xff0c;要求他们做各种动作&#xff0c;比如…
阅读更多...
828华为云征文 | 华为云Flexus云服务器X实例搭建Zabbix网络设备监视系统（Ubuntu服务器运维）

828华为云征文 | 华为云Flexus云服务器X实例搭建Zabbix网络设备监视系统（Ubuntu服务器运维）

前言 Flexus X实例内嵌智能应用调优算法&#xff0c;性能强悍&#xff0c;基础模式GeekBench单核及多核跑分可达同规格独享型实例的1.6倍&#xff0c;性能模式更是超越多系列旗舰型云主机&#xff0c;为企业业务提供强劲动力。 &#x1f4bc; Flexus X Zabbix&#xff1a;打造…
阅读更多...
PWM驱动LED呼吸灯

PWM驱动LED呼吸灯

背景知识&#xff1a;TIM输出比较-CSDN博客 stm32f10x_tim.h函数 // *** OC是Output Compare输出比较函数 void TIM_OC1Init(TIM_TypeDef* TIMx, TIM_OCInitTypeDef* TIM_OCInitStruct); void TIM_OC2Init(TIM_TypeDef* TIMx, TIM_OCInitTypeDef* TIM_OCInitStruct); void TI…
阅读更多...
苹果盛宴：iPhone 16系列领衔，智能穿戴新潮流来袭

苹果盛宴：iPhone 16系列领衔，智能穿戴新潮流来袭

在科技界备受瞩目的苹果秋季发布会上&#xff0c;众多新品悉数亮相&#xff0c;从全新的Apple Watch系列到AirPods系列&#xff0c;再到备受期待的iPhone 16系列&#xff0c;每一款产品都以其独特的创新和卓越的性能&#xff0c;再次定义了智能设备的高标准。 本文将带您领略这…
阅读更多...
实验5 预备实验2-配置单个的路由器

实验5 预备实验2-配置单个的路由器

配置单个的路由器 一、实验目的 此次试验目的是了解思科网络设备的配置基本特点及IOS命令基本操作方法。这些是配置思科设备的重要前提。 二、实验内容及结果 1、实验环境搭建 添加一个模块化的路由器&#xff0c;单击Packet Tracer 5.3的工作区中刚添加的路由器&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023