这是我参与「第四届青训营」笔记创作活动的的第1天。

第一天讲的是前端基石之——HTML，第一次上课时因某些原因体验不是很好，后面又在群里上传了重新录制的版本，所以这篇笔记是基于重新录制版本及个人学习经验总结而成。

尽管有些人学习前端可能有一段时间了，但是他们对前端的定位可能还是停留在写写CSS、调调样式，然而前端发展到现在，已经远远不止是这些简单（当然，这种说法也是见仁见智，毕竟调过CSS样式的人，都有这种“痛苦”。）

一、初识HTML

HTML是HyperText Markup Language的首字母简写，意思即超文本标记语言。

在最新版的vscode中，按下html后，就可以在下拉框中选择html模板，结构如下所示：

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

我来稍微解释一下上面这一段代码：

第一行代码中的 !DOCTYPE html 是声明这是一个HTML页面。
HTML标签是告诉浏览器，这个页面是从开始，到标签结束的。
head则表示网页的“头部”，其中可以定义一些特殊的内容，如页面标题、引入外部文件、SEO等。
body标签内则用来编写代码。

HTML的语法相对来说较为宽松：

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta
属性值推荐使用双引号包裹
某些属性值可以省略，比如required、readonly

二、常用HTML标签

2-1、h1-h6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

上面代码中的标题标签并不仅仅只是字体上的差异，对于浏览器搜索优化来说也很重要，所以一般代码中只会出现一个h1标签，这是需要注意的。

2-2、a标签

a标签主要用来跳转页面，在web发展的早期，就是通过a标签来实现在不同页面间进行跳转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://juejin.cn/" target="_blank">掘金</a>
</body>
</html>

target属性则可以设置跳转后的页面在新页面打开。

2-3、div、p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>div</div>
    <div>div</div>
    <p>p</p>
    <p>p</p>
</body>
</html>

2-4、input、button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入内容">
    <button>按钮</button>
</body>
</html>

三、语义化

什么是语义化？——HTML中的元素、属性及属性值都拥有某些含义，开发者应该遵循语义来编写HTML。

为什么要语义化？——便于开发者修改、维护页面，有利于SEO，有助于视力障碍者阅读网页。

前端三件套之HTML | 青训营笔记