概述

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言

HTML是由Web的发明者 Tim Berners-Lee于1990年创立的一种标记语言

板子

首先来看看HTML板子长什么样子

打开 VSCODE，新建一个 html 文件，在其中打入一个英文的感叹号 !，会弹出一个选框，选择一个感叹号的选项。如果选了三个感叹号的选项，只会给出文档头

自动打板后效果如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

但是此时还不够完善，让我们先去改了默认的板子

修改默认打板

上面不够完善的部分，是 meta 标签中的 content 部分

先不要管起了什么作用，改完了再说

修改步骤如下

打开 VSCODE 所在目录，进入 ./resources/app/extensions/emmet/dist/node 目录
打开 emmetNodeMain.js 文件，搜索 meta:vp
如无意外，会有两个设置项，两个引用项。确定两个设置项
设置项形如 "meta:vp":"meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}']"
改为 "meta:vp":"meta[name=viewport content='width=${1:device-width}, initial-scale=${2:1.0}, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no']"

改完后重新打板，效果如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Document</title>
</head>
<body>
</body>
</html>

底板解释

第一行是文档声明，声明该文档为 html 文档

注意感叹号是英文感叹号，DOCTYPE 大写，html 小写
第二行是根元素，含有 lang 属性，用于指定文档语言
第三行是文档头，包含了表示元数据的 meta 标签和表示页面标题的 title 标签
文档头之后是文档体，用于书写页面正文
meta:vp 是什么？

是 meta 的默认配置，具体含义如下

属性	取值	含义
charset	UTF-8	指定页面使用 UTF-8 编码
name	viewport	指定根据视口大小的设置
content>width	device-width	视口大小等于设备大小
content>initial-scale	1.0	初始大小与视口同大
content>minimum-scale	1.0	最小缩小比例与视口同大
content>maximum-scale	1.0	最大放大比例与视口同大
content>user-scalable	no	禁止用户手动放大页面

标签	含义
html	根元素
head	文档头
body	文档体
title	页面标题
meta	元数据
link	链接外部资源
style	内部样式
script	内部脚本或链接到外部脚本

标签	含义
article	文章
section	章节
h[1…6]	标题
p	段落
header	头部
footer	脚部
main	主要内容
aside	分支内容
div	块

标签	含义
ol	有序列表
ul	无序列表
li	列表项
dl	描述列表
dt	描述标题
dd	描述项
pre	预览
code	代码
q	引用（此项为内联元素
blockquote	引用（此项为块级元素
em	斜体（语气上强调
strong	粗体（实际上重要
hr	分隔线
br	换行符

标签	含义
table	表格
form	表单
a	超链接
img	图片
video	视频
audio	音频
canvas	画图
svg	矢量图

属性

刚才说到根元素有 lang 属性，用于指明文档语言

显然不同的标签有共通属性，也有专有属性

全局属性

属性名	是否取值	含义
class	是	css 类
hidden	否	visible=hidden，此时有渲染，但无事件
id	是	声明全局唯一 id，但需要程序员手动控制
style	是	内联样式
tabindex	是	指定 tab 的顺序，使用正整数，越小越优先；=0则最后；=-1则不会被 tab 访问
title	是	指定所在元素的说明，在鼠标放置在该元素上时会显示浮窗
contenteditable	是	指定所在元素是否（true/false）可以被用户编辑

专有属性

请前往重要标签查看，或查阅 MDN

谢谢阅读

HTML入门

概述

板子

修改默认打板

底板解释

标签

基本标签

文章标签

内容标签

重要标签

其余标签

属性

全局属性

专有属性