html笔记——vs code

原创已于 2024-06-15 19:51:36 修改 · 1.1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#笔记

于 2024-06-15 19:48:47 首次发布

一、HTML

1、vs code使用

1.1 软件不要像我下载成vs（vs少了很多插件）

1.2 软件使用

新建文件ctrl+N、保存 ctrl+S；ctrl+-放大缩小字号；输入！（英文的）按tab生成骨架。

1.3 插件

auto rename tag（同步更改前后标签）、live server（实时预览，需创建文件夹）、会了吧（翻译），其他：Chinese、one dark pro、open in browser、vscode-icons、easy less

1.4 快捷键

快速复制下一行 shift+alt+下箭头，或ctrl cv（光标放当行即可）

选定多个相同单词（修改）ctrl+D

添加多个光标（同时多行输入）ctrl+alt+上下箭头

全局替换单词 ctrl+H

快速定位某行 ctrl+G

成块地选择（修改）按住shift+alt 拖动鼠标

单行注释 ctrl+/，再点一次取消

多行/块注释 ctrl+shift+/（自定义的）

自动（整理文本）换行 ctrl+Z

2、标签

2.1 基本框架标签

<!DOCTYPE html>      <!-- h5版本声明标签 -->
<html lang="zh-CN">  <!-- 语言 -->

<head>
    <meta charset="UTF-8"> <!-- 万国码存储文字，防止乱码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网址</title>
</head>

<body>
    内容
    内容
    <!-- 注释 -->
</body>

</html>

2.2 语义标签

标题标签head ：<h1>-<h6> ， <h1>一级标题</h1>

段落标签paragraph：<p>段落（一段文字）</p>

换行标签break: </ br> ,单标签

2.3 文本格式化标签

粗体 <strong>文字</strong> <b > </b>

斜体 <em>文字</em> <i > </i>

下划线 <ins>文字</ins> <u> </u>

删除线 <del>文字</del> <s > </s>

2.4 <div> 盒子 <span> 分区

div独占一行

span跨距，一行多个

2.5 图像标签

<img src="图像URL（图像文件名img.jpg）"/>,单标签， src为图片属性，图片文件与网页放一个文件夹

<img src="图像URL" alt="替换文本" tittle="提示文本"/>， width 宽度，height 高度，border 边框粗细

2.6 相对路径绝对路径

同级路径 <img src="img.jpg"/>

下一级路径 <img src="images/baidu.gif"/>

上一级路径 <img src="../baidu.gif"/>

绝对路径：

个人电脑地址 D:\web\img\logo.gif

网路地址 http://www.a.b/c.gif

2.7 超链接标签

外部链接 <a herf="http://www.qq.com" target="_blank"> 腾讯 </a>

_self 当前窗口打开页面 _blank 新窗口打开页面

内部链接 <a herf="jianjie.html"> 公司简介 </a>

空链接 <a herf="#"> 公司简介 </a>

下载链接 <a herf="压缩包名字img.zip"> 公司简介 </a>

网页元素链接 <a herf="http://www.qq.com"> <img src="img.jpg"/> </a>

锚点链接 <a herf="#zuopin"> 作品 </a> 链接文本

<h3 id="zuopin"> 作品 </h3> 目标位置

2.8 特殊字符

空格  

大于号> >

小于号< <

3、表格

3.1 基本语法

<body>
    <table>
        <tr>
            <th> 姓名 </th>
            <th> 性别 </th>
        </tr>
        <tr>
            <td> 姓名 </td>
            <td> 性别 </td>
        </tr>
    </table>
</body>