1.vscode前端需要安装的插件

Auto Rename Tag 自动将结尾标签进行更改
HTML CSS Support 在html代码中支持css提示
HTML Snippets 自动生成html代码，专门针对html代码格式
image preview 在代码前预览图片的缩略图
IntelliSense for CSS class names in HTML 在html中提出css中的class名
Live Sever 将vscode作为一台服务器，让浏览器进行访问，实时更新数据
open in browser 可以将网页在不同浏览器打开，需要更新页面数据时需要刷新页面

文本标签

用来组织网页中的文本，不同的文本可以使用不同的文本标签

标题标签h

h1~h6用来组织标题文本，数字越大字号越小，文本变粗，独占一行默认标签上下有间距margin
- 语法
  1
  2
  3
  4
  5
  6
  <h1>h1标签</h1>
  <h2>h2标签</h2>
  <h3>h3标签</h3>
  <h4>h4标签</h4>
  <h5>h5标签</h5>
  <h6>h6标签</h6>

段落标签p

用来组织段落文本，一个段落就是一个p标签
语法：
1
2
3
<p>
文本
<p>
- p标签不能嵌套
- 默认上下有间距margin
- 独占一行

span标签，用来组织简短文本，或提示性信息

语法：
1
<span>文本<span>
span可以同行显示

label标签
- 提供了特殊用途，可以搭配表单元素一起使用，控制表单元素
  1
  <label>文本<label>
  注意：可以同行显示

b/strong标签

用来进行文本加粗处理
语法：
1
2
<b>文本</b>
<strong>文本</strong>
推荐使用strong

i/em标签

用来进行文本斜体处理
语法：
1
2
<i>文本</i>
<em>文本</em>
- 推荐使用i标签

换行br标签

用于换行，需要换几行就使用几个br标签
语法：
1
2
<br>
</br>
分割线hr标签
- 在页面上加一条直线
- 语法：
  1
  2
  <hr>
  <

图片标签

用来连接图片

语法：

<img src="需要连接图片的路径" title="图片加载成功时显示的图片" alt="图片加载失败时显示的解释说明文字" width:"设置图片的宽度" heigth:"设置图片的高度">

绝对路径：是指目标文件在目录的具体位置

在开发中指https或者http开头的路径，或者磁盘盘符路径
相对路径：是以某个文件为参考找到目标文件的路径

在开发中，是以当前文件出发，找到目标文件的路径
注意：返回上一级 ../
宽度和高度只设置一个时等比例缩放，如果都设置图片可能被拉伸，可能会变形

超链接标签

用于网页跳转
语法：
1
<a href="链接需要跳转到的网页路径" target="设置新网页的打开方式"></a>
- href：可以是本地路径，也可以是网络路径（必须包含http或https）------推荐使用相对路径
- target：控制新打开的网页的打开方式,_self 在原窗口打开网页,_blank 新开窗口打开网页

注意：

href=""或者href="#":代表刷新页面
锚点：以#id名可以指定跳转到指定位置 href="#id名"

id是唯一的，一个网页中不能出现同名的id

id命名规则：

是以数字，字母，下划线_，和短横线-构成

不能以数字开头，不能包含特殊符号

表格标签

语法

table：代表了一个表格，默认没有边框
        tr:代表的就是行，需要几行就是几个tr,可以设置高度height，会影响整行高度，不能设置宽度width
           align在tr上设置，设置的是该单元格中内容的对齐方式
           bgcolor：设置该行背景颜色
        td：代表的就是列，需要几列就是几个td，可以设置宽度width，会影响整列宽度，不能设置高度height
           align在td上设置，设置的是该单元格中内容的对其方式
           bgcolor：设置该列背景颜色
        border：设置表格的边框
        width：设置表格的宽度
        height：设置表格的高度
        align：设置表格在页面中的对应方式 left左对齐，right右对齐，center居中对齐
        bgcolor：设置的是背景颜色  颜色单词，#十六进制的值
        cellspacing：设置单元格间的间距
        cellpadding： 设置单元格边框到内容的距离

border:设置表格边框
align：设置对齐方式
left
right
center
注意：table标签设置align控制表格在页面中的对齐方式，tr和td设置align控制的是

单元格的内容在单元格的对齐方式
- bgcolor：背景颜色优先级： td>tr>table
- cellspacing: 设置单元格间的间距
- cellpadding: 设置单元格边框到内容的距离

注意：

1.th标签代表表头，默认会进行加粗，文本居中显示

2.表格的基本结构，table里面只能放tr，tr里面只能放th或td

3.表格是可以相互嵌套的，注意里面的表格需要放在外面表格的单元格之中，不能破坏外面表格结构

单元格合并：
- rowspan：跨行合并，垂直方向上进行合并
- colspan：水平合并，水平方向上进行合并

表单标签

登录注册等需要进行数据交互的标签

普通输入框

语法

1	<input type="text" placeholder="文本框中显示的提示信息" value="设置文本框中默认值">

密码框

语法：
1
<input type="passworld">
- 输入的内容是不可见的

单选框

语法：
1
2
<input type="radio" name="sex" id="nan">男 <label for="nan">男</label>
<input type="radio" name="sex" id="nv">女 <label for="nv">女</label>
- 注意：
- 单选框需要设置相同的name值进行绑定
- label的特殊用法：通过form属性指定对应的表单元素的id，就可以通过点击label中的内容控制对应的表单元素获取焦点

复选框

语法：

1
2
3

<input type="checkbox">LOL
<input type="checkbox">王者
<input type="checkbox">开心消消乐

注意：checke可以控制单选框或者多选框默认选中

下拉列表

语法：
1
2
3
4
5
<select>
<option value="" multiple>身份证</option>
<option value="">驾驶证</option>
<option value="" selected>学生证</option>
</select>
注意：下拉列表默认显示第一个选项，可以在option上设置select属性，控制默认显示的选项

默认下拉列表只能选中一个选项，可以在select标签上设置multiple属性控制多选

文本域

语法：
1
<textarea name="" id="" cols="30" rows="10"></textarea>
- cols:一行可以输入多少个字符
- rows：文本域可以显示几行可以变相控制文本域的宽高

按钮

语法：

<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<button>按钮</button>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>

推荐使用button按钮
注意：重置和提交按钮需要配合form标签一起使用

form标签

语法
1
2
<form action="success.html">
</form>
- action：设置提交数据的服务器地址
- method：设置提交数据提交方式
  - get：从服务器获取数据，也可以提交数据，但是数据会显示在窗口的地址栏
  - post：提交数据给服务器，数据不会显示在窗口的地址栏

列表标签

无序列表ul
- 语法
  1
  2
  3
  4
  5
  <ul>
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
  </ul>
  注意：默认有16像素的margin padding-left有40px
  
  ul里面只能放li标签
  
  ul，li标签都是独占一行
有序列表
- 语法
  1
  2
  3
  4
  5
  <ol>
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
  </ol>
  注意：有序列表ol 默认上下也有16px上下margin 有40px的padding-left
  
  ol里只能发li标签
  
  ol，li标签都是独占一行
  
  有序列表和无序列表可以嵌套

定义列表

语法

<dl>
        <dt>中国</dt>
        <dd>中华人民共和国</dd>
        <dt>汽水</dt>
        <dd>碳水化合物，冒着泡泡的肥宅水</dd>
    </dl>

注意：dl：定义列表

dt：指定一个名词 dd：针对名词进行解释说明

其他标签：

div标签：

可以看作一个容器结构，并且没有任何样式，独占一行，可以通过CSS自己设置
marquee标签：跑马灯，里面的内容从右边进入，从左边滚动到左侧消失，，循环播放
语法：

1	<marquee behavior="" direction="">公告：明天周五不上晚自习</marquee>

iframe 框架标签

可以在网页中嵌套其他的网页，可以是在线服务器的网页，也可以是本地服务器的网页
语法：src内是需要嵌套的其他网页，可以是在线服务器的网页，也可以是本地服务器的网页

1	<iframe src="http://www.woniuxy.com" frameborder="0" width="1000px" height="500px"></iframe>

注意：需要设置宽高，如果宽高不够，自动产生滚动条，不赞成使用

删除线标签 del

语法：
1
<del>$998</del>

带边框的标签 fieldset

语法：

<fieldset>
        <!-- 设置边框上的标题 -->
        <legend>登录</legend>
        <form action="">
            用户名： <input type="text">
            密码： <input type="password">
        </form>
</fieldset>

1.vscode前端需要安装的插件

文本标签

标题标签h

段落标签p

span标签，用来组织简短文本，或提示性信息

语法：

label标签

提供了特殊用途，可以搭配表单元素一起使用，控制表单元素

b/strong标签

i/em标签

换行br标签

分割线hr标签

图片标签

超链接标签

表格标签

单元格合并：

表单标签

普通输入框

语法

密码框

语法：

单选框

语法：

复选框

语法：

下拉列表

语法：

文本域

语法：

按钮

语法：

form标签

列表标签

无序列表ul

有序列表

定义列表

其他标签：

div标签：

可以看作一个容器结构，并且没有任何样式，独占一行，可以通过CSS自己设置

marquee标签：跑马灯，里面的内容从右边进入，从左边滚动到左侧消失，，循环播放

iframe 框架标签

注意：需要设置宽高，如果宽高不够，自动产生滚动条，不赞成使用

删除线标签 del

带边框的标签 fieldset