继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

kk吖
关注TA
已关注
手记 28
粉丝 0
获赞 1

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

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

主讲老师:五月的夏天

课程内容:

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

课程收获:

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

语法:<div>…</div>

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

http://img4.mukewang.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>

运行如图:

http://img4.mukewang.com/62f45cbf000153ee02470075.jpg


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP