语义化结构元素的种类与用途 - 作业

Community Learn Tools Library Leisure

English

Home > List of blog posts > 语义化结构元素的种类与用途

Blogger Information

Blog 5

fans 0

comment 0

visits 2778

Special Recommendation

More>

Related recommendations

1. 常用标签

序号	标签	名称	描述
1	`<h1>-<h6>`	标题	通常用来划分或标注内容中的文本段落
2	`<header>`	页眉	一般是由导航, logo 等元素组成
3	`<footer>`	页脚	一般是由友情链接,联系方式,备案号,版权等信息组成
4	`<nav>`	导航	导航通常是由一个或多个链接标签`<a>`标签组成
5	`<main>`	主体	展示页面主体内容,建议一个页面,只出现一次
6	`<article>`	文档	本义是文档, 实际上可以充当其它内容的容器
7	`<aside>`	边栏	与主体无关的信息(广告位, 相关推荐, 阅读排行等)
8	`<section>`	区块	文档或主体中的通用小组件
9	`<div>`	容器	本身无任何语义,通过它的属性来描述用途
10	`<p>`	段落	文本类的段落结构标签

2.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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页眉 -->
    <header>
        <h1>&lt;header&gt;</h1>
    </header>
    <!-- 主体区 -->
    <div class="container">
        <!-- 边栏 -->
        <aside>
            <h1>&lt;aside&gt;</h1>
        </aside>
        <!-- 主题内容区 -->
        <main>
            <h1>&lt;main&gt;</h1>
            <div>
            <!-- 部件小区块 -->
                <section>
                    <h1>&lt;section&gt;</h1>
                </section>
                <section>
                    <h1>&lt;section&gt;</h1>
                </section>
            </div>
        </main>
    </div>
    <!-- 页脚 -->
    <footer>
        <h1>&lt;footer&gt;</h1>
    </footer>
</body>
</html>

3.效果图

效果图

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：总结的很详细

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

redis

2020-10-13 14:19:17