0 0 1 6 - 分组分段元素
本帖最后由 不二如是 于 2021-8-11 09:13 编辑在15中，我们了解了四大区块内容。
实际开发中，我们还需要将页面内容以各种形式进行“分组”。
而最简单的分组就是“分段”。
分段就是将长篇的文字，分成一个一个段落<p>，便于观赏和阅读。
最为广泛的分组标签就是<div>了。
基本上，90%内容分组都用<div>搞定。
**** Hidden Message *****
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 交作业<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<main> <!--<main> 标签规定文档的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
注释：在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。-->
<h1>Web Browsers</h1>
<p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
</article>
<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer 由微软开发的一款免费的 web 浏览器，发布于 1995 年。</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器，发布于 2004 年。</p>
</article>
</main>
<dl><!--<dl> 标签定义了定义列表（definition list）。<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。-->
<dt>小天才养殖场</dt>
<dd>小天才教程</dd>
<dd>小天才咨询</dd>
<dt>吹水阁</dt>
<dd>聊聊</dd>
<dd>美图</dd>
<dt>Qt交流</dt>
<dd>教程</dd>
<dd>疑问</dd>
</dl>
<hr/><!--<hr> 标签在 HTML 页面中创建一条水平线。水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。-->
<figure> <!--figure元素，用来展示插图、图片、照片等。<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）-->
<img src="b1.jpg" alt="美女图片">
<img src="eg_cute.gif" alt="动态图">
<figcaption><!--提示：请使用 <figcaption> 元素为 figure 添加标题（caption）-->
静态图片+动态图
</figcaption>
</figure>
</body>
</html> 不二如是 发表于 2017-4-23 09:00
学和用，永远有差别
学，偏炫技，“看劳资学的有多难！（对搞项目，实际用处不大）"
受教，目前还是属于第一种，来连续三课做的- -有点丑别介意
<!doctype>
<html>
<head>
<meta charset='utf-8'>
<title>我是交作业的！</title>
<base/>
<base target='_blank' />
</head>
<body>
<header>
<meta charset='utf-8'>
<img src='4f8d8407513efb3b5aef02c719b7823c.png'><br />
<nav>
<ul>
<li>首页</li>
<li>电视剧</li>
<li>最新电影</li>
</ul>
</nav>
</header>
<section>
<h3>推荐</h3>
<article>
<header>
<h5>教你理财</h5>
</header>
<section>
<p>我理财还要你教！</p>
</section>
<footer>
<p>吐槽时间：2017年04月23日 12:00:03</p>
</footer>
</article>
<article>
<div style="color:#FF0000">
<h5>同城交友</h5>
<p>同城约P吧</p>
</div>
</article>
</section>
<section>
<h3>视频</h3>
<main>
<article>
<h5>爱奇艺高清</h5>
<p>说高清一点不高清</p>
</article>
</main>
<hr />
<article>
<h5>优酷网</h5>
<p>小样，把t换成k就成精了</p>
</article>
</section>
<section>
<h3>影视</h3>
<article>
<h5>电视剧</h5>
<p>看你妹电视剧</p>
</article>
<article>
<h5>电影·购票</h5>
<p>是日本的动作片吗</p>
</article>
</section>
<section>
<h3>游戏</h3>
<article>
<h5>4399游戏</h5>
<p>为啥不能凑成4400</p>
</article>
<article>
<h5>7k7k游戏</h5>
<p>要花7k才能玩的?</p>
</article>
</section>
<section>
<dl>
<dt><h3>新闻</h3></dt>
<dd><h5>新浪新闻</h5></dd>
<dd><h5>腾讯新闻</h5></dd>
</dl>
</section>
<section>
<figure>
<img src="4f8d8407513efb3b5aef02c719b7823c.png">
<figcaption>世界地球日</figcaption>
</figure>
</section>
<aside>
<h3>推荐</h3>
<p>XXX被查</p>
</aside>
<aside>
<h3>社会</h3>
<p>XXX被杀</p>
</aside>
<footer>
<p>不吐槽会死星人</p>
<a href="http://bbs.fishc.com/forum-33-1.html">吐槽区</a>
</footer>
</body>
</html> 光看不练可不行{:5_93:}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>第二个实例</title>
</head>
<body>
<main>
<h1>北上广深</h1>
<p>北上广深是指中国大陆经济实力最强的四个城市：北京、上海、广州、深圳。</p>
<article>
<h1>北京</h1>
<p>北京，简称“京”，是中华人民共和国的首都、直辖市、国家中心城市、超大城市、国际大都市，全国政治中心、文化中心、国际交往中心、科技创新中心，是中国第二大城市和中部战区司令部驻地。</p>
</article>
<article>
<h1>上海</h1>
<p>上海，简称“沪”或“申”，是中华人民共和国直辖市，国家中心城市，超大城市，是中国第一大城市，中国的经济、交通、科技、工业、金融、贸易、会展和航运中心，首批沿海开放城市。</p>
</article>
<article>
<h1>广州</h1>
<p>广州是广东省省会、国家中心城市、超大城市、南部战区司令部驻地。</p>
</article>
<article>
<h1>深圳</h1>
<p>深圳，简称“深”，别称鹏城，中国四大一线城市之一，广东省省辖市、计划单列市、副省级市、国家区域中心城市、超大城市。</p>
</article>
</main>
<dl>
<dt>小天才养殖场</dt>
<dd>小天才教程</dd>
<dd>小天才咨询</dd>
<dt>吹水阁</dt>
<dd>聊聊</dd>
<dd>美图</dd>
<dt>wechat交流</dt>
<dd>私信</dd>
<dd>群聊</dd>
</dl>
<hr/>
<figure>
<img src="0001.jpg" alt="logo">
<img src="0001.gif" alt="动态图">
<figcaption>静态+动态</figcaption>
</figure>
</body>
</html>
http://xxx.fishc.com/album/201707/06/112541kla6bn1l05sadc23.png {:10_257:} 接着来
看看！！！ dreamdnj 发表于 2017-2-18 22:18
看看！！！
欢迎～ 既来之则安之谢谢楼主 看看 不想说话 感谢分享！！ 谢谢分享！ 学习学习 {:10_260:}支持楼主没币了只能看免费的了
通俗易懂，讲知识点。不啰嗦，赞一个 知识点很细。持续跟进学习中…… 支持楼主没币了只能看免费的了{:10_247:} Why竟然隐藏。 今日打卡~~~ {:10_272:}这个元素备用的最广泛的一个，基本爬取任何网站的信息都是div一堆 本帖最后由 不二如是 于 2017-4-23 09:01 编辑
lumber2388779 发表于 2017-4-23 00:05
这个元素备用的最广泛的一个，基本爬取任何网站的信息都是div一堆
学和用，永远有差别
学，偏炫技，“看劳资学的有多难！（对搞项目，实际用处不大）"
用，偏现实，"黑猫白猫，能抓着耗子就是好猫(越是基础，越是好用，宁可重复复制1k遍，也不愿调库)"
正是如此，能将二者完美结合，掌握度的人，江湖人称“大神”