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标签的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!