HTML Day1-CSDN博客

本文链接：https://blog.csdn.net/weixin_47368591/article/details/135871194

本文介绍了HTML5中使用语义标签如<section>、<article>、<header>、<footer>和<aside>来组织页面结构，强调了这些标签在提升代码可读性和SEO优化中的重要性，同时提到了<div>标签的逐渐过时以及如何通过CSS实现美观的布局。

摘要由CSDN通过智能技术生成

1. 页面划分为头部（header）、页脚（footer）、侧边栏（sidebar）等几个区域。

2. 遇到的标签语义

标签	描述
<p>	定义段落
<nav>	定义导航链接
<ul>	定义无序列表，<ul>+<li>创建无序列表
<li>	定义列表项，用于有序列表 (<ol>)、无序列表 (<ul>) 和菜单列表 (<menu>) 中
<a>	定义超链接，最重要的属性是 href 属性，它指示链接的目的地
<section>	定义文档中的一个部分
<article>	规定独立的、自包含的内容
<h2>	用于定义 HTML 标题
<p>	定义段落,浏览器会自动在每个 `<p>` 元素前后添加一个空行
<i>	定义了以不同的语气或情态表达的文本部分,通常内部内容会以斜体显示。
<aside>	定义了它所在内容之外的一些内容,通常放在侧边栏

3. div依赖症：HTML5规范引入了新的用于描述内容的语义标签，为组织页面中的标签提供了解决方案。用<section>来取代<div>。

4. 复现页面

html文件

<!DOCTYPE html>
<html lang="en">
<head id="page_header">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="stylesheet/style.css">
    <title>Wen Blog</title>
</head>
<body>
    <section id="posts">
        <article class="post">
            <header>
                <h2>How Many Shoule We Put you Down For?</h2>
                <p>Posted by Brian on
                    <time datatime="2024-01-16T19:10">Jan 16th, 2024 at 7:10PM</time>
                </p>
            </header>
            <aside>
                <p>
                    &ldquo;Never give someone a chance to say no.&rdquo;
                </p>
            </aside>
            <p>
                As I wander through the enchanting tapestry of nature's wonders, I
                 am captivated by the whispering melodies of the wind as it dances through 
                 the emerald canopies of towering trees. The sun, like a master artist, brushes its 
                 tender rays upon the earth, casting a radiant glow that illuminates every blade of 
                 grass and delicate wildflower in a breathtaking display of beauty.
            </p>
            <p>
                With each step, my senses awaken to the delicate fragrance of blooming blossoms, 
                their sweet perfume mingling with the earthy scent of damp soil. The symphony of chirping
                 birds and buzzing insects provides a harmonious soundtrack, creating a tranquil 
                 oasis where tranquility reigns supreme.
            </p>
            <footer>
                <p><a href="comments"><i>25 Comments</i></a>...</p>
            </footer>
        </article>
    </section>

    <section id="sidebar">
        <nev>
            <h3>Archives</h3>
            <ul>
                <li><a href="2024/01">2024/01</a></li>
                <li><a href="2024/02">2024/01</a></li>
                <li><a href="2024/03">2024/03</a></li>
                <li><a href="2024/04">2024/04</a></li>
                <li><a href="2024/05">2024/05</a></li>
                <li><a href="2024/06">2024/06</a></li>
                <li><a href="2024/07">2024/07</a></li>
                <li><a href="2024/08">2024/08</a></li>
                <li><a href="2024/09">2024/09</a></li>
            </ul>
        </nev>
    </section>
</body>
<footer id="page_footer">
    <p>Copyright @ 2024 Wen.</p>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Terms of service</a></li>
            <li><a href="#">Privacy</a></li>
        </ul>
    </nav>
</footer>
</html>

css文件

body{
    margin: 15px auto;
    font-family: Arial, "MS Trebuchet", sans-serif;
    width: 960px;
}

p{margin: 0 0 20px 0;}
p, li{line-height: 20px;}

#page_header{width: 100%;}

#page_header > nav > ul, #page_footer > nav > ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
#page_header > nav > ul > li, #page_footer > nav > ul > li{
    margin: 0 20px 0 0;
    padding: 0;
    display: inline;
}

#posts{
    float: left;
    width: 74%;
}
#posts aside{
    float: right;
    font-size: 20px;
    line-height: 40px;
    margin-left: 5%;
    width: 35%;
}

#sidebar{
    float: left;
    width: 25%;
}

#page_footer{
    clear: both;
    display: block;
    text-align: center;
    width: 100%;
}