Block块级元素
一个块级元素总是从一个新的行开始，并占据可用的宽度（尽可能延伸到左边和右边）。
常见的块级元素有<div> , <h1>-<h6> , <p> , <from>
Inline内联元素
内联元素不在新行上启动，只占用必要的宽度。下面是常用的内联lnline元素：<span> , <a> , <img>
The <div> Element
<div>常被用做其它HTML元素的容器。
<div>元素没有必需的属性，但样式和类都是常见的。
当和CSS一起使用时，<div>元素可用于样式内容块：
html
<div style="background-color: bisque;color: burlywood;padding: 20px;">
<h2>北京</h2>
<p>
北京是中国的首都，是全国政治、文化、国际交往和科技创新中心，拥有深厚的历史底蕴和现代化城市风貌。
</p>
<p>
2022年GDP约4.16万亿元（全国第二），人均GDP超18万元。第三产业占比超80%，以金融、信息科技、文化创意为主导。
</p>
</div><span>元素
元素通常用作一些文本容器。
元素没有必要属性，但样式和类都是常见的。当和CSS一起使用，该元素可用格式化部分文字的样式：
html
<h1>我的<span style="color: red;">重要</span>标题</h1>class类属性
HTML属性可以为同一类的名字，定义相同风格的元素。
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>
<style>
div{
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>伦敦</h2>
<p>伦敦是英国的首都，也是全球重要的政治、经济、文化中心和世界级城市。</p>
<p>位于英格兰东南部，横跨泰晤士河，距离北海入海口约80公里。</p>
</div>
<div class="cities">
<h2>巴黎</h2>
<p>巴黎是法国的首都，也是欧洲最具影响力的文化、艺术、时尚与历史中心之一。</p>
<p>位于法国北部，塞纳河两岸，属法兰西岛大区（Île-de-France）的核心。</p>
</div>
<div class="cities">
<h2>东京</h2>
<p>东京是日本的首都，也是全球人口最密集、经济最发达的超大城市之一，融合了传统与现代、科技与文化。</p>
<p>位于日本关东平原，濒临东京湾，与神奈川县、埼玉县、千叶县接壤。</p>
</div>
</body>
</html>在行内元素上使用类 class属性
HTML class 属性也可用于内联元素：
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>
<style>
span.note{
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>我的<span class="note">重要</span>标题</h1>
<p>这是一些<span class="note">重要</span>文本</p>
</body>
</html>