VS Code快速生成html(头部)模板图文教程
1、快速生成 html（头部）模板
（1）快速打出<!DOCTYPE html>
① 打开 VS Code，创建一个 html 文件；
② 输入 ! ，选择 !!! 选项。
（2）生成完整的 html（头部）模板
输入 ! 后按 tab键 可直接生成 html 模板。
2、html 头部：<head> 元素
<head> 元素包含了所有的头部标签元素。
可以添加在头部区域的元素标签有：<title>，<style>，<meta>，<link>，<script>，<noscript> 和 <base>。
| 标签 | 描述 |
|---|---|
| <head> | 定义了文档的信息 |
| <title> | 定义了文档的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部资源之间的关系 |
| <meta> | 定义了HTML文档中的元数据 |
| <script> | 定义了客户端的脚本文件 |
| <style> | 定义了HTML文档的样式文件 |
① <title> 元素
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
<head> <title>文档标题</title> </head>
<title> 标签在 HTML/XHTML 文档中是 必需的。
② <base> 元素
<base> 标签描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接标签的默认链接：
<head> <base href="http://……" rel="external nofollow" target="_blank"> </head>
target=“_blank” 表示 在新的窗口中打开链接，如果不设置 target=“_blank” 属性，点击链接会进入新的页面并覆盖之前的页面。
注：target=“_blank” 属性必须要和 herf 一起才会生效。
③ <link> 元素
<link> 标签定义了文档与外部资源之间的关系，通常用于链接到样式表：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" rel="external nofollow" > </head>
④ <meta> 元素
<meta> 标签描述了一些基本的元数据。元数据不显示在页面上，但会被浏览器解析。
<meta> 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务：
为搜索引擎定义关键词：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容：
<meta name="description" content="html 教程">
定义网页作者：
<meta name="author" content="Evelyn">
每30秒钟刷新当前页面：
<meta http-equiv="refresh" content="30">
⑤ <script> 元素
<script> 标签用于加载脚本文件，如： JavaScript。
⑥ <style> 元素
<style> 标签定义了 HTML 文档的样式文件引用地址。在 <style> 元素中也可以直接添加样式来渲染 HTML 文档：
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue
}
</style>
</head>
总结
到此这篇关于VS Code快速生成html(头部)模板的文章就介绍到这了,更多相关VSCode快速生成头部模板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
kafka rabbitMQ及rocketMQ队列的消息可靠性保证分析
这篇文章主要介绍了kafka rabbitMQ及rocketMQ队列的消息可靠性保证分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
这篇文章介绍了Git配置.gitignore文件忽略被指定文件上传的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
使用Python解决Windows文件名非用反斜杠问题(python 小技巧)
要想让你的 Python 代码同时在 Windows 和 Mac/Linux 上工作，你需要处理不同系统文件名用不同斜杠的问题。而 Python 3 有一个名为「pathlib」的新模块，可以帮你解决这个麻烦，需要的朋友可以参考下2019-11-11
VSCode 安装 Copilot 详细过程和实例代码(最新推荐)
Copilot 作为一款 AI 辅助编程工具,可以极大地提高开发效率,让编程变得更加轻松愉快,在实际开发过程中,我们要注意审查和测试生成的代码,确保其符合项目需求和标准,这篇文章主要介绍了VSCode 安装 Copilot 详细过程和实例,需要的朋友可以参考下2024-05-05
网站程序员如何应对web标准...2007-04-04
这篇文章主要介绍了关于使用SQOOP抽数到Hive遇到的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
scratch-www是scratch-gui的网页版，功能包括gui的编辑，保存，播放，和gui的作品展示，这里主要介绍scratch-www在window系统下的安装和运行，感兴趣的朋友跟随小编一起看看吧2021-08-08
这篇文章主要介绍了VSCode自定义配色方案的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了详解idea切换git账号的两个方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要为大家介绍了pycharm中venv文件夹自定义处理方式图解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
最新评论