HTML基础用法介绍一

news2024/11/16 17:55:56
  • 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.coloradmin.cn/o/2171955.html

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

相关文章

相亲交友系统的社会影响：家庭结构的变化

相亲交友系统的社会影响：家庭结构的变化

随着互联网技术的发展&#xff0c;相亲交友系统已成为许多单身人士寻找伴侣的重要途径。这些平台不仅改变了人们的社交方式&#xff0c;还对家庭结构产生了深远的影响。本文将探讨相亲交友系统如何促使家庭结构发生变化&#xff0c;开发h17711347205并通过简单的Python代码示例…
阅读更多...
【bug fixed】hexo d的时候Spawn failed

【bug fixed】hexo d的时候Spawn failed

在执行hexo d部署的时候&#xff0c;遇到报错&#xff1a; % hexo d INFO Validating config INFO Deploying: git INFO Clearing .deploy_git folder... INFO Copying files from public folder... INFO Copying files from extend dirs... [main 8e89088] Site updated…
阅读更多...
信息学奥赛的最佳启蒙阶段是小学还是初中？

信息学奥赛的最佳启蒙阶段是小学还是初中？

信息学奥赛&#xff08;NOI&#xff09;近年来越来越受家长和学生的关注&#xff0c;尤其是在编程教育不断升温的背景下&#xff0c;信息学竞赛成为了许多家庭的教育选择之一。家长们往往关心的是&#xff1a;孩子应该在什么年龄段开始接触信息学竞赛&#xff0c;才能打下坚实的…
阅读更多...
设计模式 之 —— MVC模式

设计模式 之 —— MVC模式

目录 什么是MVC模式&#xff1f; MVC 工作流程&#xff1a; MVC模式&#xff08;java示例.部分代码&#xff09; 1、Model java 2、View HTML CSS JS 3、Controller java 运行结果&#xff1a; 适用场景&#xff1a; 什么是MVC模式&#xff1f; MVC模式提供了灵活…
阅读更多...
基于 C# 的文本文件的编码识别

基于 C# 的文本文件的编码识别

基于 C# 的文本文件的编码识别 前言一、有 BOM 文件头二、无 BOM 文件头三、简体中文汉字编码四、C# 程序对编码的识别1、文件选择按钮代码&#xff1a;2、获取文件编码&#xff0c;有 BOM 的文件识别3、获取文件编码&#xff0c;UTF8 无 BOM 文件的识别4、获取文件编码&#x…
阅读更多...
如何有效应对商标撤三挑战？

如何有效应对商标撤三挑战？

商标撤三作为商标法中的一项重要制度&#xff0c;时刻考验着企业的商标维护与保护能力。面对这一挑战&#xff0c;企业如何构建一套有效的商标撤三管理体系&#xff0c;以确保自身品牌权益不受侵害&#xff0c;成为了一个亟待解决的问题。 理解商标撤三制度的核心要义 商标撤三…
阅读更多...
【MyBatis 源码拆解系列】执行 Mapper 接口的方法时，MyBatis 怎么知道执行的哪个 SQL？

【MyBatis 源码拆解系列】执行 Mapper 接口的方法时，MyBatis 怎么知道执行的哪个 SQL？

欢迎关注公众号 【11来了】 &#xff0c;持续 MyBatis 源码系列内容&#xff01; 在我后台回复 「资料」 可领取编程高频电子书&#xff01; 在我后台回复「面试」可领取硬核面试笔记&#xff01; 文章导读地址&#xff1a;点击查看文章导读&#xff01; 感谢你的关注&#xff…
阅读更多...
web前端-CSS字体属性

web前端-CSS字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。 一、字体 1.字体系列 CSS使用font-family属性定义文本的字体系列 例如&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">&l…
阅读更多...
vmware-toolbox安装，VMware虚拟机访问win10共享目录

vmware-toolbox安装，VMware虚拟机访问win10共享目录

问题&#xff1a;VMware界面无法安装vmware-toolbox&#xff0c;共享目录设置失败 解决方法&#xff1a; VMware设置 共享文件夹 ubuntu24 vm中运行vmware-toolbox-cmd -v 检查版本 vm运行sudo apt install open-vm-tools // vm可能需要重启 vm的 /mnt 目录下如果没有 hgfs…
阅读更多...
UE5 C++: 插件编写04 | 增加和删改前缀

UE5 C++: 插件编写04 | 增加和删改前缀

准备工作 UObject* Asset UObject* Asset 通常指的是一个指向UObject的指针。UObject是Unreal Engine中的基类&#xff0c;几乎所有的引擎对象都继承自UObject。这个指针可以引用任何派生自UObject的对象&#xff0c;比如蓝图、材质、贴图、音频资源等资产。 如果你看到UObj…
阅读更多...
开箱即用的大模型应用跟踪与批量测试方案

开箱即用的大模型应用跟踪与批量测试方案

背景介绍 最近抽空参加了一个讯飞的 RAG 比赛&#xff0c;耗时两周终于在最后一天冲上了榜首。 整体的框架是基于 RAG 能力有点弱弱的 Dify 实现。在比赛调优的过程中&#xff0c;经常需要批量提交几百个问题至 Dify 获取回答&#xff0c;并需要跟踪多轮调优的效果差异。借助…
阅读更多...
Paxos 协议详解：分布式系统一致性的基石

Paxos 协议详解：分布式系统一致性的基石

文章目录 1. 分布式系统与一致性问题1.1 分布式系统的定义1.2 一致性问题的起源1.3 CAP 定理及其影响1.4 分布式系统中的失败假设 2. Paxos 协议的背景与介绍2.1 Paxos 协议是什么2.3 Paxos 解决什么问题 3. Paxos 的基本原理3.1 Paxos 角色3.2 Paxos 的多数原则3.3 Paxos 协议…
阅读更多...
Python画笔案例-068 绘制漂亮米

Python画笔案例-068 绘制漂亮米

1、绘制漂亮米 通过 python 的turtle 库绘制 漂亮米，如下图： 2、实现代码 绘制 漂亮米，以下为实现代码： """漂亮米.py注意亮度为0.5的时候最鲜艳本程序需要coloradd模块支持,安装方法:pip install coloradd程序运行需要很长时间,请耐心等待。可以把窗口最小…
阅读更多...
找不到MFC100U.dll,无法继续执行代码，重新安装此程序可解决此问题

找不到MFC100U.dll,无法继续执行代码，重新安装此程序可解决此问题

概要 最近在研究中移物联的模组ML307R&#xff0c;通过二次开发 的方式对之前开发的物联网--如意控项目进行升级&#xff0c;研究了ML307R模组的开发资料&#xff0c;中移物联的模组二次开发难度确实很高&#xff0c;中移物联ML307R的openCPU开发采用的事C语言开发的&#xff0…
阅读更多...
局域网中实现一对一视频聊天（附源码）

局域网中实现一对一视频聊天（附源码）

一、什么是webRTC WebRTC&#xff08;Web Real-Time Communication&#xff09;是一项支持网页浏览器进行实时语音对话或视频对话的API技术。它允许直接在浏览器中实现点对点&#xff08;Peer-to-Peer&#xff0c;P2P&#xff09;的通信&#xff0c;而无需任何插件或第三方软件…
阅读更多...
不可思议的转折，这部韩剧在口碑上实现逆袭

不可思议的转折，这部韩剧在口碑上实现逆袭

今天&#xff0c;推荐一下韩国版的《纸钞屋》&#xff0c;第一季豆瓣从9.4分滑到6.9分。第二季的回归却让这部剧迎来了“翻身仗”&#xff0c;目前豆瓣已飙升至8.4。 对比第一季&#xff0c;第二季不仅在剧情反转和人物刻画上有了明显的提升&#xff0c;还引入了《黑暗荣耀》中…
阅读更多...
浅谈Agent智能体

浅谈Agent智能体

Agent智能体无疑是24年最为火爆的话题之一&#xff0c;那么什么是Agent智能体&#xff1f;有什么作用&#xff1f;为什么需要Agent智能体&#xff1f; 用下边一张图简单说明一下 每日进步一点点
阅读更多...
Python制作进度条，18种方式全网最全！（不全去你家扫厕所！）

Python制作进度条，18种方式全网最全！（不全去你家扫厕所！）

想象一下&#xff0c;你的程序在执行复杂任务时&#xff0c;不再是冷冰冰的等待光标&#xff0c;而是伴随着色彩斑斓、动态变化的进度条&#xff0c;不仅让等待变得有趣&#xff0c;更让用户对你的作品刮目相看。从基础的文本进度条到高级的图形界面进度条&#xff0c;从简单的…
阅读更多...
小程序兼容问题

小程序兼容问题

【微信小程序】安卓兼容问题&#xff0c;scroll-view上拉导致input输入框上移 引用&#xff1a;https://blog.csdn.net/krico233/article/details/127491690 当一个scroll-view占据全屏高度(100vh)并包含input表单时&#xff0c;输入框聚焦会导致光标上移但输入框本身位置不变…
阅读更多...
【C语言】数组（上）

【C语言】数组（上）

【C语言】数组 1、数组的概念2、一维数组的创建和初始化2.1数组创建2.2数组的初始化2.3数组的类型 3、一维数组的使用3.1数组下标3.2 数组元素打印3.3数组的输入 4、一维数组在内存中的存储5、sizeof计算数组元素个数 1、数组的概念 数组是一组相同类型元素的组合&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023