Html种类和VScode快捷键

一、 vscode快捷键

1、!+回车生成HTML骨架元素

2、html元素：直接书写html元素名称，回车键自动补全

3、{}:书写html元素内容

div{内容}+Enter

就可生成如下效果

<h3>1234566</h3>

4、*批量生成多个相同元素时

p{2024}*5

    <p>2024</p>
    <p>2024</p>
    <p>2024</p>
    <p>2024</p>
    <p>2024</p>

5、>生成html的下一级子元素

                div>img+Enter

生成效果如下

    <div><img src="" alt=""></div>

6、+：批量生成不同的元素

 (div2024}*2>img)+img

生成效果如下

    <div>2024<img src="" alt=""></div>
    <div>2024<img src="" alt=""></div>
    <img src="" alt="">

7、快捷键组合

就是将上面的组合起来

8、“.”添加class属性值,连续.可以添加多个class属性值

                div.gx

<div class="gx"></div>

9、#id属性值添加id属性值的意思

 div#hi

div id="hi"></div>

二、基本元素、标签、盒子

1.h1、h2、h3、h4、h5、h6

特点：各个h之间有换行上下之间有空间

2、hr标签

作用：是画出一道分界线

单标签，

3、span

特点：没什么特点

体现了html最本质的特点——用来分隔不同元素

由于没受什么自带的特殊样式（比如边框、字体大小颜色等），所以可以更加随心所欲得去设计样式，“有之以为利，物质以为用”

4、div

5、p标签

p标签同样为竖向布局元素之间有空隙 -->

6、a标签

<1>a标签超链接从一个跳转到另一个

<a href="" target=""></a>

herf:指定页面资源路径：

网络资源：网址例如：https://www.baidu.com/

本地资源：存储在电脑上的html文件的文件所在路径例如：first\1.19\Test.html

traget:设置页面打开方式_self(默认，本窗口) _blank(新窗口) _top(顶级窗口) _parent(父级) 自定义窗口

http:是一种超文本传输规则

<2> a标签锚点（定位点）

name:设置锚点名称

跳转到某页面的某锚点页面所在资源路径+#+锚点

7、列表相关

1.无序列表ul unolder无序的

子元素 li

    <ul>
        <li>111</li>
        <li>222</li>
        <li>111</li>
        <li>5555</li>
    </ul>

2、有序列表ol

相关属性：

start:表示起始值始

type：次序的类型 "I"以希腊文开 "A"表示以大写字母开头

<ol start="2" type="I">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>

3、描述列表 dl

子元素 dt————描述的标题 dd————描述的内容

<dl>
        <dd>此处是标题</dd>
        <dt>此处是描述</dt>
        <dt>此处是描述</dt>
        <dt>此处是描述</dt>
        <dt>此处是描述</dt>
        <dt>此处是描述</dt>

    </dl>

8、图片元素

src:"设置文件资源路径"

art:设置图片不能正常加载时的说明文字

width="400px" height="150px"

<style>
        img {
            height: 150px;
            width: 400px;
        }
    </style>
</head>

<body>
    <img src="5.jpg" alt="这是一张风景图">
</body>

这里可以看到图片已经变形了，如果只设置长，或者只设置宽，则不会出现这样的问题，如下：

 img {
            width: 400px;
        }

注意

1、使用图片要注意图片是以原时尺寸显示的，如果像设置图片尺寸，切忌图片变形使用单方向设置图片尺寸即可

2、如果就像按照开发者设置的尺寸不变形图片必须使用css object-fit:cover ，达到一种剪切的效果如下图：

<style>
        img {
            height: 150px;
            width: 400px;
            object-fit: cover;
            object-position: 0px -39px;
        }
    </style>
</head>

<body>
    <img src="5.jpg" alt="这是一张风景图">
</body>

通过更改object-position的值可以实现裁剪位置的不同。

9、表格元素 table

相关属性：

span:设置作用的列数

tr:代表行

10、框架元素 iframe

src设置嵌套窗口刀客的路径资源

frameborder 嵌套窗口的边框是否显示默认显示

width 设置窗口宽度

height

name=""-->

11、媒体元素 audio video

audio

相关属性：

src:设置音频资源路径

controls:音频播放器是否显示

autoply:设置音频是否自动播放

loop:设置音频是否循环播放

video

相关属性：

src:设置音频资源路径

controls:音频播放器是否显示

autoply:设置音频是否自动播放

loop:设置音频是否循环播放

width:设置视频的宽度

height:设置视频的高度

-->

12、表单元素 form 收集用户信息的元素

表单控件元素

type：设置控件类型

text:单行文本框

password：密码框

radio：单选框

checkbox：复选框

file：文件上传器

submit：提交按钮

button：普通按钮

reset：重置按钮

color：颜色提取器

number：数字输入框

min数字最小值 max数字最大值 step value

range 滑块

date 日期

time 时间

month：月控件

week：周控件

datetime-local

name:设置控件名称

value：设置用户的值

checked是否默认选中

disabled:空间是否可用

readonly:是否只读

placeholder

autofocus 自动成为焦点设置表单状态为焦点状态可以键入状态

13、表单控件元素select 下拉框列表框

name：

size：显示下拉项的个数

multiple:实现多选

子元素：

option下拉选项

value

selected:默认哪个项默认选中

optgroup：下拉项分组

lable：下拉项组名

多行文本框 textares

cols：设置多行文本框的宽度

rows：设置多行文本宽

fieldset元素和legend元素主要把表单控件进行分类

请求参数列表请求参数名=请求参数值&

-->

Html种类和VScode快捷键

一、 vscode快捷键

1、!+回车生成HTML骨架元素

2、html元素：直接书写html元素名称，回车键自动补全

3、{}:书写html元素内容

4、*批量生成多个相同元素时

5、>生成html的下一级子元素

6、+：批量生成不同的元素

7、快捷键组合

9、#id属性值 添加id属性值的意思

二、基本元素、标签、盒子

1.h1、h2、h3、h4、h5、h6

2、hr标签

3、span

4、div

5、p标签

6、a标签

<1>a标签 超链接 从一个跳转到另一个

<2> a标签 锚点（定位点）

7、列表相关

1.无序列表ul unolder无序的

2、有序列表ol

3、描述列表 dl

8、图片元素

9、表格元素 table

10、框架元素 iframe

11、媒体元素 audio video

12、表单元素 form 收集用户信息的元素

13、表单控件元素select 下拉框 列表框

9、#id属性值添加id属性值的意思

<1>a标签超链接从一个跳转到另一个

<2> a标签锚点（定位点）

13、表单控件元素select 下拉框列表框