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;…
阅读更多...
怎么在Vue3项目中引入Vant组件库并使用？

怎么在Vue3项目中引入Vant组件库并使用？

文章目录 前言一、项目中使用步骤1.安装&#xff1a;2.样式的导入&#xff08;2种方法&#xff09;2.1 main.ts全局导入&#xff08;平常自己的项目用的这个全局&#xff09;2.2 按需引入组件样式 (简单介绍一下)1.安装插件2.配置插件 3.组件按需使用&#xff1a;App.vue 总结 …
阅读更多...
5QI(5G QoS Identifier)

5QI(5G QoS Identifier)

5QI&#xff08;5G QoS Identifier&#xff0c;5G 服务质量标识符&#xff09;是在5G网络中用于定义特定数据流所需服务级别的指标。它用于优先处理流量&#xff0c;并根据流量的类型及其特定需求分配网络资源。5QI值从1到255&#xff0c;每个值对应一组QoS参数&#xff0c;这些…
阅读更多...
数据结构和算法基础（一）

数据结构和算法基础（一）

文章目录 链表反转链表合并删除链表倒数第 n 个结点找链表的中间结点链表中环的检测排序算法递归 趁空闲时间刷一遍极客时间上王争的《数据结构与算法之美》课程&#xff0c;个人觉得写的很好&#xff0c;每章节由浅入深且从基础到引入设计类问题&#xff0c;如果写过很多代码想…
阅读更多...
成都睿明智科技有限公司抖音电商服务靠谱吗？

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

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

WebSocket 在 Spring Boot 中的高级应用指南

WebSocket 在 Spring Boot 中的高级应用指南 深入理解WebSocket协议 深入理解STOMP协议 1. 概述 WebSocket 是一种基于 TCP 的全双工通信协议&#xff0c;允许服务器和客户端之间进行持续的双向通信。与传统的 HTTP 请求-响应模型不同&#xff0c;WebSocket 是一个持久的连接…
阅读更多...
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语言…
阅读更多...
微信小程序数据操作指南：从绑定到更新

微信小程序数据操作指南：从绑定到更新

微信小程序数据操作指南&#xff1a;从绑定到更新 在微信小程序开发中&#xff0c;数据操作是核心环节之一。微信小程序提供了一系列简洁而强大的数据操作方法&#xff0c;帮助开发者轻松实现数据的绑定、更新和渲染。本文将详细介绍微信小程序中常用的数据操作方法&#xff0…
阅读更多...
加密与安全_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…
阅读更多...
初始C语言（五）

初始C语言（五）

前言 本文章就代表C语言介绍以及了解正式完成&#xff0c;后续进行具体分析和详细解析学习。知识根深蒂固才可以应付后来的学习&#xff0c;地基要打好&#xff0c;后续才会轻松。 十四、结构体 结构体是C语言中最最重要的知识点&#xff0c;使得C语言有能力描述复杂的类型。 …
阅读更多...
使用fastapi搭建ChatGPT对话后台

使用fastapi搭建ChatGPT对话后台

使用fastapi搭建ChatGPT对话后台 参考资料&#xff1a;使用fastapi搭建ChatGPT对话后台 效果&#xff1a;在本地构建网页达成类似chatgpt的对话效果&#xff0c;一个字一个字的返回生成结果 ChatGPT初步调用 import os import fastapi import dotenv from httpx import AsyncC…
阅读更多...
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、修改本地项目…
阅读更多...
Egress Gateway 是一个重要的组件，用于管理从服务网格内部到外部服务的流量

Egress Gateway 是一个重要的组件，用于管理从服务网格内部到外部服务的流量

在 Istio 服务网格中&#xff0c;Egress Gateway 是一个重要的组件&#xff0c;用于管理从服务网格内部到外部服务的流量。Egress Gateway 充当了一个边界路由器的角色&#xff0c;处理所有从网格内部发出的请求到非网格服务的流量。它可以帮助解决服务网格内外部服务通信的问题…
阅读更多...
Linux启动mysql报错

Linux启动mysql报错

甲方公司意外停电&#xff0c;所有服务器重启后&#xff0c;发现部署在Linux上的mysql数据库启动失败.再加上老员工离职&#xff0c;新接手项目&#xff0c;对Linux系统了解不多&#xff0c;解决起来用时较多&#xff0c;特此记录。 1.启动及报错 1.1 启动语句1 启动语句1&a…
阅读更多...
【Rockchip系列】官方函数：drm_buf_alloc

【Rockchip系列】官方函数：drm_buf_alloc

drm_buf_alloc 函数 功能 分配一个DRM&#xff08;Direct Rendering Manager&#xff09;缓冲区。 语法 void* drm_buf_alloc(int width, int height, int bpp, int* fd, int* handle, size_t* size, int flags);参数 width: 缓冲区宽度&#xff08;像素&#xff09;heigh…
阅读更多...
最新文章

Copyright @ 2022~2023