HTML元素

Block块级元素

一个块级元素总是从一个新的行开始，并占据可用的宽度（尽可能延伸到左边和右边）。

常见的块级元素有<div> , <h1>-<h6> , <p> , <from>

Inline内联元素

内联元素不在新行上启动，只占用必要的宽度。下面是常用的内联lnline元素：<span> , <a> , <img>

The <div> Element

<div>常被用做其它HTML元素的容器。
<div>元素没有必需的属性，但样式和类都是常见的。

当和CSS一起使用时，<div>元素可用于样式内容块：

<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一起使用，该元素可用格式化部分文字的样式：

<h1>我的<span style="color: red;">重要</span>标题</h1>

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>
        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 属性也可用于内联元素：

<!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>