HTML - day01 基本标签 (上)

大米粥同学

已于 2023-11-21 09:04:36 修改

阅读量22

点赞数

分类专栏：前端 HTML 文章标签： html 前端笔记

于 2023-11-20 22:41:27 首次发布

本文链接：https://blog.csdn.net/2301_76800763/article/details/134520717

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

HTML - day01 基本标签 (上)

文章目录

HTML - day01 基本标签 (上)
- 文章目录
- html 文件的基本结构
- 好用的 VSCode 插件
- 常用 VSCode 快捷键
- 常用标签
- 图片标签
- 链接标签
- 表格标签
- 列表标签
- 关注作者

html 文件的基本结构

<!-- 文档类型声明 -->
<!DOCTYPE html>
<!-- html 标签，lang 属性指定网页语言：zh-CN 是中文、en 是英文。 -->
<html lang="zh-CN">
    <!-- 头标签 -->
    <head>
        <!-- charset 指定了字符集 -->
        <meta charset="UTF-8" />
        <!-- title 是网页标题 -->
        <title></title>
    </head>
    <!-- 网页主体标签 -->
    <body>
    </body>
</html>

好用的 VSCode 插件

Chinese:中文语言包
Auto Rename Tag:自动重命名标签
One Dark Pro:一套好看的主题
格式化：设置自带的
Open in Browser:用自带的浏览器打开
Live Service:自动预览
VSCode-icons:一套好看的 VS 图标
easy less:Less 插件
会了吧：中文翻译插件

常用 VSCode 快捷键

shift + alt + down:快速复制一行

shift + alt + 鼠标拖动:矩形选择

ctrl + d:快速选择相同单词

ctrl + h:全局替换

ctrl + g:快速跳转

ctrl + +/-:缩放界面

ctrl + /:单行注释

ctrl + shift + /:块注释。需要修改快捷键，原本是ctrl + alt + a

ctrl + alt + up/down:添加多光标

常用标签

<!-- 标题标签 h1-h6 -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<!-- 段落标签 -->
<p></p>

<!-- 换行 -->
<br />

<!-- 文本格式化标签 -->
<!-- 加粗，两种。strong 语义更强，其他也是。 -->
<strong></strong>
<b></b>

<!-- 斜体 -->
<em></em>
<i></i>

<!-- 下划线 -->
<ins></ins>
<u></u>

<!-- 删除线 -->
<del></del>
<s></s>

<!-- 容器标签 -->
<!-- 块容器 -->
<div></div>

<!-- 段容器 -->
<span></span>

图片标签

<img src="图片路径" alt="替换文本" title="提示文本"/>

链接标签

<a href="链接地址" target="打开方式"></a>
<!-- 
    target 取值有两种:_self(默认) 和_blank
    _self:在本标签页内打开
    _blank:新开一个标签页打开

    当链接地址是 exe 文件地址时，一般是下载链接

    链接地址可以是 # ,表示空地址

    当链接地址为 # + id 且 文档内有对应的 id 元素时，就是锚点链接
 -->

表格标签

<!-- 表格标签 -->
<table align="对齐方式" border="边框" cellpadding="表格与内容的间隙" cellspacing="表格与表格间距">
    <!-- 表头部分标签，语义标签 -->
    <thead>
        <!-- 表头标签，与 tr 差不多，但是有加粗和居中效果，属于语义标签 -->
        <th>
            <!-- 单元格标签 -->
            <td></td>
        </th>
        <!-- 行标签 -->
        <tr>
            <td></td>
        </tr>
    </thead>
    <!-- 表体部分标签，语义标签 -->
    <tbody>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>
<!-- 
    表格常用属性有:
        align:center(居中)
        cellspacing:0(表格无间隙)
    
    表格的合并:
        行合并:rowspan
        列合并:colspan
 -->

列表标签

<!-- 无序标签 -->
<ul>
    <!-- 表项 -->
    <li></li>
</ul>

<!-- 有序标签 -->
<ol>
    <!-- 表项 -->
    <li></li>
</ol>

<!-- 自定义标签 -->
<dl>
    <!-- 列表头 -->
    <dt></dt>
    <!-- 列表项 -->
    <dd></dd>
</dl>