HTML5学习

时间  2021-01-15
标签 html 前端 html5 程序员 web ide 学习 搜索引擎 code 视频 栏目 HTML5 繁體版
原文   原文链接

HTML5

目录

1、基本结构

标签 说明
DOCTYPE 声明为HTML文档
html lang:设置网页的语言
head 文档说明部分，对搜索引擎提供信息或加载CSS、JS等
title 网页标题
keyword 向搜索引擎说明你的网页关键
description 向搜索引擎描述网页内容的摘要信息
body 页面主体内容 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keyword" content="html5,web前端">
    <meta name="description" content="html5的基本结构学习">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2、嵌套关系

1610610182258

3、内容标题

标题使用h1~h6 来定义，用于突出显示文档内容。html

  • 从h1到h6对于搜索引擎权重来讲会愈来愈小
  • 在一个页面中尽可能只有一个h1标签
  • 标题最好不要嵌套如h1内部包含h2

对于默认样式的效果，等掌握了CSS后咱们就能够随意美化了。前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容标题</title>
</head>
<body>

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    
</body>
</html>

1610610615401

4、页眉页脚

1. header

header标签用于定义文档的页眉，下图中的红色区域均可以使用header标签构建。html5

1610610832177

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>页眉</title>
</head>

<body>
    <header>
        <ul>
            <li><a href="">系统学习</a></li>
            <li><a href="">视频库</a></li>
        </ul>
    </header>

</body>

</html>

footer标签订义文档或节的页脚，页脚一般包含文档的做者、版权信息、使用条款连接、联系信息等等。程序员

1610611198600

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页脚</title>
</head>
<body>
    
    <footer>
        <ul>
            <li>©2021 Baidu </li>
            <li>(京)-经营性-2017-0020</li>
            <li>京公网安备11000002000001号</li>
            <li>京ICP证030173号</li>
        </ul>
    </footer>

</body>
</html>

五. 导航元素

在Html中使用nav设置导航连接。web

1610612088960

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航元素</title>
</head>
<body>

    <header>
        <nav>
            <ul>
                <li><a href="#">新闻</a></li>
                <li><a href="#">hao123</a></li>
                <li><a href="#">地图</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">贴吧</a></li>
                <li><a href="#">学术</a></li>
                <li><a href="#">更多</a></li>
            </ul>
        </nav>
    </header>
    
</body>
</html>

六. 主要区域

Html5中使用main标签表示页面主要区域，一个页面中main元素最好出现一次。ide

1610612356696

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主要区域</title>
</head>
<body>

    <main>
        <ul>
            <li>内容一</li>
            <li>内容二</li>
            <li>内容三</li>
            <li>内容四</li>
        </ul>
    </main>
    
</body>
</html>

七. 内容区域

使用article标签规定独立的自包含内容区域。学习

1610613159268

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容区域</title>
</head>
<body>
    
    <!-- 主要区域 -->
    <main>

        <!-- 内容区域 -->
        <article>
            <ul>
                <li>新闻一</li>
                <li>新闻二</li>
                <li>新闻三</li>
            </ul>
        </article>
    </main>

</body>
</html>

八. 区块定义

使用section定义一个区块，通常是一组类似内容的排列组合。搜索引擎

1610613700650

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区块定义</title>
</head>
<body>

    <main>
        <article>
            <section>
                拼劲每一刻
            </section>

            <section>
                2021男子手球锦标赛
            </section>
            
            <section>
                氧气般小清新教主
            </section>
        </article>
    </main>
    
</body>
</html>

九. 附加区域

使用aside用于设置与主要区域无关的内容，好比侧面栏的广告等。code

1610613958849

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>附加区域</title>
</head>
<body>

        <!-- 附加区域 -->
        <aside>
            附加区域
        </aside>

    <main>
        <!-- 内容区域 -->
        <article>
            内容区域
        </article>
    </main>
    
</body>
</html>

十. 通用容器

div通用容器标签是较早出现的，也是被大多数程序员使用最多的容器。不过咱们应该更倾向于使用有语义的标签，如： article（内容区域）、section（区块定义）、aside（附加区域）、nav（导航元素）等。视频

有些区域这些有语义的容器很差表达，这时能够采用div容器，好比轮播图效果中的内容。

十一. 图像

用做文档中插图的图像。

1610614857184

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>figure </title>
</head>
<body>

    <!-- 页眉 -->
    <header>这是页眉</header>

    <!-- 主要区域 -->
    <main>
        <!-- 内容区域 -->
        <article>
            <!-- 插入图像 -->
            <figure>
                <!-- 给插入图像添加一个标题 -->
                <figcaption>图像标题</figcaption>
                <img src="../images/timg.gif" alt="图片加载失败">
            </figure>
        </article>
    </main>

    <!-- 页脚 -->
    <footer>这是页脚</footer>
    
</body>
</html>

十二. meter

meter标签订义度量衡。仅用于已知最大和最小值的度量。

好比：磁盘使用状况，查询结果的相关性等

注意：meter不能做为一个进度条来使用。

1610615735390

<meter value="3" min="0" max="10"></meter>

十三. progress

progress标签订义运行中的任务进度。

注意：progress标签不适合用来表示度量衡（例如，磁盘空间使用状况或相关的查询结果）。

1610615917334

<progress value="3" max="10"></progress>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程