当前位置：首页 > article >正文

HTML基础用法介绍一

article 2024/10/4 18:49:13

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>

标题标签效果展示

在这里插入图片描述

标题标签的显示特点：

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

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

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

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

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

代码展示

<!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>

效果展示

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

换行标签与水平线标签

换行标签

<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>

效果展示

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

水平线标签

<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>`	~~我使用了删除线~~

图片标签

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

用相对路径
将图片放在html文件旁边

图片标签

<img src ="图片路径">

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

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

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

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>

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

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>

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

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>