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.rhkb.cn/news/439082.html

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

相关文章

深度学习每周学习总结J1（ResNet-50算法实战与解析 - 鸟类识别）

深度学习每周学习总结J1（ResNet-50算法实战与解析 - 鸟类识别）

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 目录 0. 总结1. 设置GPU2. 导入数据及处理部分3. 划分数据集4. 模型构建部分5. 设置超参数&#xff1a;定义损失函数&#xff0c;学习率&a…
阅读更多...
STM32+PWM+DMA驱动WS2812 —— 2024年9月24日

STM32+PWM+DMA驱动WS2812 —— 2024年9月24日

一、项目简介 采用STM32f103C8t6单片机&#xff0c;使用HAL库编写。项目中针对初学者驱动WS2812时会遇到的一些问题&#xff0c;给出了解决方案。 二、ws2812驱动原理 WS2812采用单线归零码的通讯方式&#xff0c;即利用高低电平的持续时间来确定0和1。这种通信方式优点是只需…
阅读更多...
Vue 学习

Vue 学习

vue 核心语法 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Vue 核心语法测试</title> </head><body&…
阅读更多...
外包功能测试干了4年，技术退步太明显了。。。。。​

外包功能测试干了4年，技术退步太明显了。。。。。​

先说一下自己的情况&#xff0c;本科生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了差不多4年的功能测试&#xff0c;今年中秋&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测…
阅读更多...
信号用wire类型还是reg类型定义

信号用wire类型还是reg类型定义

wire类型就是一根线&#xff0c;线有两端&#xff0c;一端发生改变&#xff0c;经过线传递的信号当然也会发生改变&#xff0c;reg类型则不同&#xff0c;可以把reg类型理解为存储数据的寄存器&#xff0c;当满足一定条件时&#xff0c;数值才被激活发生改变。 那么&#xff0…
阅读更多...
【AI论文精读1】针对知识密集型NLP任务的检索增强生成（RAG原始论文）

【AI论文精读1】针对知识密集型NLP任务的检索增强生成（RAG原始论文）

目录 一、简介一句话简介作者、引用数、时间论文地址开源代码地址 二、摘要三、引言四、整体架构&#xff08;用一个例子来阐明&#xff09;场景例子&#xff1a;核心点&#xff1a; 五、方法 &#xff08;架构各部分详解&#xff09;5.1 模型1. RAG-Sequence Model2. RAG-Toke…
阅读更多...
【Conda】修复 Anaconda 安装并保留虚拟环境的详细指南

【Conda】修复 Anaconda 安装并保留虚拟环境的详细指南

目录 流程图示1. 下载 Anaconda 安装程序2. 重命名现有的 Anaconda 安装目录Windows 操作系统Linux 操作系统 3. 运行新的 Anaconda 安装程序Windows 操作系统Linux 操作系统 4. 同步原环境使用 robocopy 命令&#xff08;Windows&#xff09;使用 rsync 命令&#xff08;Linux…
阅读更多...
C++11新特性（基础）【2】

C++11新特性（基础）【2】

目录 1.范围for循环 2.智能指针 3.STL中一些变化 4.右值引用和移动语义 4.1 左值引用和右值引用 4.2 左值引用与右值引用比较 4.3 右值引用使用场景和意义 4.4 右值引用引用左值及其一些更深入的使用场景分析 4.5 完美转发 1.范围for循环 int main() {int array[10] { 1,2,3,4…
阅读更多...
超声波清洗机哪个品牌的最好？爆款超声波清洗机测评大揭秘

超声波清洗机哪个品牌的最好？爆款超声波清洗机测评大揭秘

面对超声波清洗机的选购疑虑&#xff0c;许多朋友或是担心其效用不实&#xff0c;落入消费陷阱&#xff0c;或是已经遭遇了不尽如人意的产品体验。对此&#xff0c;我分享的经验或许能为你指点迷津&#xff01;基于亲测超过二十几款市面上热门的超声波眼镜清洗机&#xff0c;我…
阅读更多...
Rust 做桌面应用这么轻松？Pake 彻底改变你的开发方式

Rust 做桌面应用这么轻松？Pake 彻底改变你的开发方式

Rust 做桌面应用这么轻松&#xff1f;Pake 彻底改变你的开发方式 网页应用装不下了&#xff1f;别担心&#xff0c;Pake 用 Rust 帮你打包网页&#xff0c;快速搞定桌面应用。比起动不动就 100M 的 Electron 应用&#xff0c;它轻如鸿毛&#xff0c;功能却一点都不少&#xff0…
阅读更多...
JavaScript 数组方法

JavaScript 数组方法

数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始)&#xff0c;整个数组用方括号表示。两端的方括号是数组的标志。 var a["a","b","c"]; 除了在定义时赋值&#xff0c;数组也可以先定义后赋值。 var arr[];arr[1]"a"…
阅读更多...
数据流和数据流处理技术

数据流和数据流处理技术

一数据流 首先明确数据流概念&#xff1a;数据流是连续不断生成的、快速变化的无界数据序列 数据流类型&#xff1a; 数据流大致可以分为四种类型 1.连续型数据流&#xff1a;不断地产生数据&#xff0c;数据稳定速度输入系统。 2.突发型数据流&#xff1a;在某特定时间或…
阅读更多...
【通配符】粗浅学习

【通配符】粗浅学习

1 背景说明 首先要注意&#xff0c;通配符中的符号和正则表达式中的特殊符号具备不同的匹配意义&#xff0c;例如&#xff1a;*在正则表达式中表示里面是指匹配前面的子表达式0次或者多次&#xff0c;而在通配符领域则是表示代表0个到无穷个任意字符。 此外&#xff0c;要注意…
阅读更多...
IDEA 配置 Git 详解

IDEA 配置 Git 详解

本文将介绍在IntelliJ IDEA 中如何配置Git 没有安装配置 Git 的可以参考我的这篇文章&#xff1a;安装配置 Git 一、操作环境及准备 1.win 10 2.已安装且配置了Git 3.有Gitee账户 4.安装了IntelliJ IDEA 2023.2.1 5.全程联网 二、配置步骤 2.1 配置git 1.采用全局设置&…
阅读更多...
基于SpringBoot+Vue+MySQL的装修公司管理系统

基于SpringBoot+Vue+MySQL的装修公司管理系统

系统展示 管理员后台界面 员工后台界面 系统背景 随着信息技术的快速发展&#xff0c;装修行业正面临数字化转型的关键时刻。传统的装修管理方式存在信息管理混乱、出错率高、信息安全性差等问题&#xff0c;已无法满足现代市场的需求。因此&#xff0c;开发一套高效、便捷的装…
阅读更多...
Gaussian-splatting 项目环境配置笔记（Win11）

Gaussian-splatting 项目环境配置笔记（Win11）

如果你是配置别的项目的过程中用到了3D GS相关的内容&#xff0c;然后这部分内容环境一直配不好&#xff0c;也可以跟随这个博客配一下环境&#xff0c;配完后起码3D GS部分就搞定了。 文章目录 概述项目链接&#xff1a;VS2019直接下载链接CUDA不同版本下载链接安装Condasetup…
阅读更多...
谷歌收录批量查询，谷歌收录批量查询的简单方法

谷歌收录批量查询，谷歌收录批量查询的简单方法

谷歌收录批量查询是网站管理员和SEO优化人员常见的需求&#xff0c;以下提供几种简单且高效的批量查询方法&#xff1a; 一、使用Google Search Console&#xff08;谷歌搜索控制台&#xff09; 注册并验证网站&#xff1a; 首先&#xff0c;确保你已经在Google Search Conso…
阅读更多...
【JVM】垃圾释放方式：标记-清除、复制算法、标记-整理、分代回收

【JVM】垃圾释放方式：标记-清除、复制算法、标记-整理、分代回收

文章目录 1. 标记-清除2. 复制算法4. 标记-整理4. 分代回收 把标记为垃圾的对象的内存空间进行释放。主要有三种释放方式 1. 标记-清除 把标记为垃圾的对象&#xff0c;直接释放掉&#xff08;最朴素的做法&#xff09; 此时就是把标记为垃圾的对象所对应的内存空间直接释放。…
阅读更多...
Visual Studio C# 处理和修复 WinRiver II 测量项目 MMT 文件错误

Visual Studio C# 处理和修复 WinRiver II 测量项目 MMT 文件错误

Visual Studio C# 处理和修复 WinRiver II 测量项目 MMT 文件错误 前言一、WinRiver II 测量项目 MMT 文件的结构二、WinRiver II 无法打开或操作测量项目 MMT 文件2.1 无法载入船测多线法测量文件2.2 可以载入测验项目 MMT 文件&#xff0c;但 ADCP 后处理软件无法写入信息2.3…
阅读更多...
【数学分析笔记】第4章第4节 复合函数求导法则及其应用（2）

【数学分析笔记】第4章第4节 复合函数求导法则及其应用（2）

4. 微分 4.4 复合函数求导法则及其应用 【例4.4.3】 y e 1 cos ⁡ x ye^{\sqrt{1\cos x}} ye1cosx ​&#xff0c;求 y ′ y y′ 【解】 y ′ e 1 cos ⁡ x ⋅ 1 2 1 cos ⁡ x ⋅ ( − sin ⁡ x ) − sin ⁡ x 2 1 cos ⁡ x e 1 cos ⁡ x ye^{\sqrt{1\cos x}}\cdot\f…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023