HTML-块(1) - 芒果文档

📌 相关文章

📜 HTML-块(1)

📅 最后修改于: 2023-12-03 15:01:18.251000 🧑 作者: Mango

HTML块

HTML块是HTML文档中的最基本的结构单元。通常用标签来表示，可以包含其他HTML标记，以及纯文本数据、图片、链接等内容。在Web页面开发中，HTML块被广泛应用于布局、内容分隔、样式定义等方面。

常见的HTML块标记

<div>：表示文档流中的一块内容，可用于布局、容器等方面。
<p>：表示一段文本内容，通常用于段落。
<ul>和<ol>：分别表示无序列表和有序列表。
<li>：表示列表项，必须包含在<ul>或<ol>中。
<h1>~<h6>：表示文本的标题，<h1>最高级别，<h6>最低级别。
<header>、<main>和<footer>：表示文档的头部、主要内容以及尾部，可用于整个页面的布局和导航。
<section>：表示一个独立的块级区域，与<article>一同被视为HTML5中常常用到的分块元素。
<article>：表示独立的、自包含的内容块，如博客文章、新闻报道等。

HTML块的常见属性

id：为HTML块指定唯一的ID。
class：为HTML块指定一个或多个CSS类。
style：为HTML块指定CSS样式。
title：为HTML块指定一个标题。
data-*：为HTML块自定义属性，可用于JavaScript等方面的操作。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Block Example</title>
</head>
<body>
    <header>
        <h1>Welcome to my website!</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>Section Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet felis quis velit fringilla fringilla. Nunc sed sem id risus tristique tincidunt. Nunc dignissim, ipsum id blandit posuere, sapien nulla blandit lectus, sit amet sollicitudin risus erat non massa. </p>
        </section>
        <section>
            <h2>Section Title</h2>
            <ol>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ol>
        </section>
    </main>
    <footer>
        <p>&copy; 2021 Our Company</p>
    </footer>
</body>
</html>

以上是一个基本的HTML块代码，其中包含了头部、主体、尾部三个部分。在主体部分又包含了两个<section>块，分别用于展示文本和列表。可以根据需要自由调整块的嵌套结构和属性。