# 案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>静夜思</h1>
<h2>李白</h2>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
低头 思故乡
</body>
</html>
# 案例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小滴课堂xdclass.net</title>
</head>
<body>
</body>
</html>
⽂档声明
告诉浏览器⽹⻚是以html5版本编写的
meta标签
⾃结束标签
可以提供该⽹⻚相关信息,元数据
charset="utf-8"：中⽂的⽹⻚需要⽤到的声明编码，否则会出现乱码
name="keywords" content="静夜思,诗词"：提供⽹⻚的关键字，关键字⽤,隔开
name="Description"：描述⽹⻚的信息
空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素的属性</title>
<style>
.front{
color: red;
font-weight: 900;
}
</style>
</head>
<body>
<a href='https://xdclass.net'>小滴课堂</a>
<p class="front">前端</p>
<p>后端</p>
<p>测试</p>
</body>
</html>
放在开始标签上
总是以名值对的形式出现的,值是通过双引号或者单引号包裹
在元素中添加附加信息，⽅便我们找到它
设置标签的内容展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自结束标签和注释</title>
<link rel="stylesheet" href="">
</head>
<body>
床前明月光
<hr>
疑是地上霜
<!-- 大课训练营的图片 -->
<!--
<img src="https://file.xdclass.net/video/2021/62-paas/zt-x.jpeg" alt="大课训练营图片">
<input> -->
</body>
</html>
<meta>
<link>
<hr>
<img>
<input>
内容要简介明了
在实际⼯作中，当代码复杂程度⼤时，便于解释说明代码含义
注释暂时⽤不到的代码⽚段
注释不能嵌套，否则⽹⻚中会渲染出 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化标签</title>
</head>
<body>
<h1></h1>
<h2></h2>
<h3></h3>
<p>小滴课堂：</p> <strong>前端</strong> <em>后端</em> 测试的教程
</body>
</html>
每个HTML元素都有其具体的含义
⽹⻚标题：title
⽹⻚内容标题：h1~h6
段落：p
强调：strong
头部元素：header
导航元素：nav
主要内容：main
语义化的作用
代码结构：在⻚⾯没有css的情况下，也能够呈现出很好的内容结构
有利于SEO: 标签确定关键字的权重，因此可以增加搜索相关权重，使⽹站在搜索结果中排名靠前
