Java教程

【学习打卡】第6天 div标签与header标签

本文主要是介绍【学习打卡】第6天 div标签与header标签，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

课程名称：初识HTML(5)+CSS(3)-升级版课程

课程章节：我还想diy点样式- 使用<div>标签自定义块和听说开头写的好就能一键三连 - <header>标签定义头部区域

主讲老师：五月的夏天

课程内容：

了解<div>标签和<header>标签

课程收获：

网页制作过程中，把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

语法：<div>…</div>

确定逻辑部分：它是页面上相互关联的一组元素。网页中的独立的栏目版块就是一个典型的逻辑部分。如下图：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。

https://img4.sycdn.imooc.com/62f45cb30001d1d815810711.jpg

例子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>div标签</title>

</head>

<body>

    <div>

    <h2>热门课程排行榜</h2>

    <ol>

        <li>前端开发面试心法 </li>

        <li>零基础学习html</li>

        <li>javascript全攻略</li>

    </ol>

    </div>

      <div>

    <h2>最新课程排行</h2>

    <ol>

        <li>版本管理工具介绍—Git篇 </li>

        <li>Canvas绘图详解</li>

        <li>QQ5.0侧滑菜单</li>

    </ol>

    </div>

</body>

</html>

语法：

<header>我是头部标签</header>

例子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>header</title>

</head>

<body>

    <header>我是头部标签</header>

</body>

</html>

运行如图：

https://img4.sycdn.imooc.com/62f45cbf000153ee02470075.jpg


这篇关于【学习打卡】第6天 div标签与header标签的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航