本文介绍了VScode的一些常用快捷键，如多行注释、复制行、格式化等，帮助提升开发效率。同时，详细讲解了HTML的基础知识，包括HTML的用途、基本标签结构、文本格式化、超链接、图片、列表、区块标签、表单元素等，为初学者提供了全面的入门指南。
VScode常用快捷键
多行注释快捷键 ctrl+/
复制当前行到下一项 alt+shift+↓
标签快捷写法 标签词+tab
网页格式化 alt+shift+f
查找 ctrl+f
撤销 ctrl+z
取消撤销 ctrl+y
多行选中 alt+shift+鼠标左键
从浏览器打开 alt+b
HTML
web标准：html(结构)、css(表现)、js(行为)
Html：超文本标记语言 作用 描述网页
Html不是编程语言 是标记语言
使用html的标记标签 描述网页
Html文档也叫web页面
Html标签：是使用 html标签通常成对出现 也有单标签
<html></html> <br/>
<!DOCTYPE HTML> 声明 当前文档是html
<html></html>标签里面显示当前网页的所有信息
<head lang="en"> 头标签
lang=“en” 标注网页的语言 en英语 zn-CH中文
<title></title>标签 显示在网页的选项卡区域
<body></body>标签 显示网页的所有内容
<meta charset="UTF-8">标签 信息标签
charse=utf-8 标注当前网页的编码格式为utf-8 meat标签在head里面
Html里面的常用标签
网页渲染格式：从左到右、从上到下
1.标题标签
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>文本加粗1-6字体由大到小 换行
2.<P></p> 段落标签 将文本分割为段落 换行
align=""center文本居中 right靠右 left靠左(默认)
3.<br/> 强制换行
4.<hr/> 水平线标签
文本格式化标签
5.文本格式化标签-(无换行功能)不能使用align属性
<i></i>斜体<em></em>强调
<b></b>加粗<strong></strong>强调
<u></u>下划线<ins></ins>强调
<s></s>删除线<del></del>强调
<sub></sub>下标
<sup></sup>上标
<small></small> 小号字
<pre></pre>标签 预先格式化标签
超链接a标签
6.超链接
<a href=""></a>标签 超文本链接 跳转页面
href 里面写跳转的地址 (相对路径、绝对路径、远程路径)
href 默认写# 代表跳转当前页面
<a href=”” target=""></a>
属性：target target=“_self” 在当前页面打开 target=“_blank” 重新打开一个选项卡 默认在当前页面打开
绝对路径是文件所在盘符目录
网页从服务端打开 路径不能用绝对路径 容易造成文件丢失（一般不使用绝对路径）
相对路径是绝对路径的一部分
远程路径就是相对路径 把项目放到远程服务器上 通过服务器来访问的路径
相对路径的写法
同级目录下 可直接写名称 eg：href=“名称”
或者 一个点表示从当前文件向外跳一级 eg：href=”./名称”
不同级目录 跳转兄弟文件的子目录 eg：href=（./···/名称）
<a href="./index-常用标签.html">index.常用标签</a>
<a href="./trump/trump1.html">trump1</a>
绝对路径
绝对路径要有效果 当前文件必须从静态文件打开 href=“文件所在盘符目录”
<a href="D:/html/2.18/index-常用标签.html">盘符目录打开</a>
使用a链接制作锚标 当前页面的锚标和跨页面锚标
href=“#名称” 跳转当前页面的锚标
href=“./trunp/trump.html#名称” 跳转到trump页面的锚标
<a href="#like">锚标位置1</a>
<a href="#likeyou">锚标位置2</a>
<a href="./trump/trump1.html#trumpp">trumpp锚标</a>
a链接 写name=名称 其他标签写id=名称
<a name="likeyou">锚标位置2</a>
<p id="like">锚标位置1</p>
img图片标签
7.img图片标签 <img src="" alt=""/>
<img src="https://i01piccdn.sogoucdn.com/c7fd23d792b99f10" alt="加载失败" align="center"/>极光<br/>
<img src="D:/html/2.18/trump/3a9af6a5c96568f8" alt="加载失败"/>
src属性是图片的路径（远程或相对） alt属性是图片加载失败时显示的内容 align属性 作用的是图片 效果是图片后的文字对齐位置（center居中 right靠右 left靠左）
列表标签
8.列表标签
有序列表 type属性 修改序号的显示方式（a A 1 等等）
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表 (前面没有序号，用图形代替)
<ul>
<li></li>
<li></li>
<li></li>
</ul>
自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
所有列表均可互相嵌套
区块标签——div、span
9.区块标签
div 相当于一个容器 主要用来做网页的框架布局 换行
Span标签 相当于一个容器 不换行
表单元素标签（表单域）
<form action="" method=""></form> 表单元素标签 做用户注册或登录
action属性 提交表单的数据到后台的路径
method属性 表单提交方式 get 显示提交（不安全、数据量大） post 隐式提交（安全、数据量小）
10.input标签 （配合form使用）
type属性 决定当前的input标签类型 没有type属性则默认单行文本框
type属性值：
text 单行文本框
password 密码框
checkbox 复选框
radio 单选框
file 打开资源管理器 用来上传文件
submit 提交按钮
reset 重置按钮
value属性：（单文本框会显示在界面）设置表单元素的值 是给代码使用的
checked 设置单选框和复选框的默认选中
name 实现单选框的互斥功能：给同一组单选框设置相同的那么属性
maxlength 输入的最大长度；minlength 输入的最小长度（较少使用）
placeholder属性是提示信息
multiple 可以设置文件域选择多个文件
lable标签
和input绑定使用，实现点击label内容时选中input
<label for="text"> 用户名:</label> <input type="text" id="text" >
select 下拉菜单
selected默认选择 、option选项
<select name="jobyear">
<option selected value="0">——请选择——</option>
<option value="1">——1年——</option>
<option value="2">——2年——</option>
<option value="3">——3年——</option>
<option value="4">——4年——</option>
<option value="5">——5年——</option>
</select>
textarea 文本域 多行文本框
rows cols 行和列 控制默认外观大小 Placeholder属性是提示信息
<textarea name="save" rows="20" cols="20" placeholder="请输入..."></textarea>
表格元素标签
<table></table>是表格元素标签
<tr></tr>行 <td></td>列
<th></th>也是行（文本加重、居中）
<caption></caption> 表头
border 属性 设置表格的边框宽度
width属性 设置表格的宽
cellspacing 设置列之间的间距
cellpadding 设置列之间的内间距 （按照左上设置距离 右和下自动）
align 设置居中方式
bgcolor 设置表格颜色
rowspan 跨行
colspan 跨列 (表格的跨行和跨列计数算自身)
Iframe框架
<iframe src="http://www.baidu.com" width="100%" height="700" name="1" frameborder="0"></iframe>
Iframe框架是一个内嵌框架 用于制作小型企业系统（实现点击a链接，在iframe框架中显示嵌入的网页）
Src属性：内嵌的地址
Width属性：设置宽
Height属性：设置高 （浏览器没有高只有宽 所以高设置100%无效）
Name属性：名称（在a链接中写target=名称实现在iframe框架中打开a链接所跳转的页面）
frameborder属性：边框属性（边框的大小）
扫一扫
4860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
