课程名称:初识HTML(5)+CSS(3)-升级版课程
课程章节:我还想diy点样式- 使用<div>标签自定义块和听说开头写的好就能一键三连 - <header>标签定义头部区域
主讲老师:五月的夏天
课程内容:
了解<div>标签和<header>标签
课程收获:
网页制作过程中,把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。
语法:<div>…</div>
确定逻辑部分:它是页面上相互关联的一组元素。网页中的独立的栏目版块就是一个典型的逻辑部分。如下图:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div>标签作为容器。
例子:
<!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>
运行如图: