HTML基本标签（一）_vscode标签属性自动生成-优快云博客

本文链接：https://blog.youkuaiyun.com/a289246/article/details/135747916

本文介绍了如何在VScode中通过快捷键快速生成HTML基本标签，如div、ul、ol、li和img，以及a标签的href、target和各种列表的属性设置。还提到如何结合CSS样式如object-fit来处理图片布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML基本标签（一）

使用VScode快速生成标签

!:生成html骨架元素

{}:书写html元素内容，例如div{123}，按下回车会生成<div>123</div>

*：批量生成多个相同元素，例如div*3，会生成三个div

>：下一个的意思，生成html的下一级子元素，例如div > img，会生成<div><img src="" alt=""></div>

+：批量生成不同的元素，例如div+img，生成<div></div><img src="" alt="">，二者并列

()：改变快捷键组合，使用()可以将* + >结合使用，确定优先级

.：添加class属性值，div.xxx，连续.可以同时添加多个class属性值

#id属性值：添加id属性，只能取一个值

a标签

herf属性：指定页面资源路径
target属性：设置页面的打开方式，主要有_self(默认本窗口)，_blank(新窗口)，_top(顶级窗口)，_parent(父级窗口)，自定义窗口

a标签还可以用作锚点，具体用法是将一个a标签放在页面最开始，name属性设置为top，在页面底部设置一个a标签内容是“跳转到顶部”，herf属性设置为#top，也就是最开始a标签的name，点击“跳转到顶部”，页面就会回到最开始
实现方式大概如下

 <a name="top">锚点</a>
 <h1>xxx</h1>
 <h1>xxx</h1>
 <h1>xxx</h1>
 <h1>xxx</h1>
 <h1>xxx</h1>
 <h1>xxx</h1>
 <h1>xxx</h1>
 <h1>xxx</h1>
 <h1>xxx</h1>
 <h1>xxx</h1>
 <h1>xxx</h1>
 <h1>xxx</h1>
 <a href="#top">跳转到顶部</a>

a标签中的target属性还可以结合iframe来使用，iframe能够将另一个 HTML 页面嵌入到当前页面中。将iframe的name属性设置成show，将a标签的target属性设置成show，这样点击链接就会在iframe中呈现链接到的页面。
具体效果
具体代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>iframe的使用</title>
</head>

<body>
    <div style="height: 10vh;">
    	<!-- herf放入跳转的页面链接 -->
    	<!-- target的设置可以任意，但是必须跟iframe的name保持一致 -->
        <a href="#" target="show">链接</a>

    </div>
    <div style="height:80vh">
    	<!-- frameborder设置边框，属性值为“1”或“0” -->
        <iframe src="" frameborder="1" name="show" width="100%" height="100%"></iframe>
    </div>


</body>

</html>

<!-- 框架元素 iframe -->
<!-- 
    src 设置嵌套窗口打开的页面资源路径
    frameborder 设置嵌套窗口边框是否显示
    width 设置宽
    height 设置高
    name 设置窗口的名字
-->

列表标签

无序列表 ul
    子元素 li

有序列表 ol
    子元素 li
    相关属性：start 表示从哪开始（开始的序号可以是1，也可以是10，自定义开始的序号）
             type 编号的类型（可以是1，2，3；也可以是字母，还可以是罗马数字）

描述列表 dl
    子元素 dt dd

具体示例

无序列表
    <ul>
        <li>zzz</li>
        <li>zzz</li>
        <li>zzz</li>
        <li>zzz</li>
    </ul>

无序列表呈现效果
在这里插入图片描述

有序列表
    <ol>
        <li>ttt</li>
        <li>ttt</li>
        <li>ttt</li>
        <li>ttt</li>
    </ol>
    
	<ol start="10">
        <li>ttt</li>
        <li>ttt</li>
        <li>ttt</li>
        <li>ttt</li>
	</ol>
	  
	<ol type="a">
        <li>ttt</li>
        <li>ttt</li>
        <li>ttt</li>
        <li>ttt</li>
	</ol>

有序列表呈现效果
在这里插入图片描述

描述列表
    <dl>
        <dt>新闻一</dt>
        <dd>副标题</dd>
        <dt>新闻二</dt>
        <dd>副标题</dd>

        <dt>新闻三</dt>
        <dd>副标题</dd>

    </dl>

描述列表呈现效果
在这里插入图片描述

图片元素

图片元素img
    src 设置图片资源路径
    alt 图片不能正常加载时的文字说明
    width 设置图片的宽
    height 设置图片的高

注意！！！
使用图片要注意图片默认是以原始尺寸显示的，如果想设置图片尺寸，切记图片变形使用，单方向设置图片尺寸，未设置图片尺寸的方向会自动等比例变化。如果想按自己的尺寸设置图片不变形，借助CSS object-fit:cover

<img src="#" alt="图片xx" height="200" width="200" style="object-fit: cover;">