0 0 1 6 - 分组分段元素

不二如是 · 发表于 2017-1-12 10:26:02

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:13 编辑

在15中，我们了解了四大区块内容。

实际开发中，我们还需要将页面内容以各种形式进行“分组”。

而最简单的分组就是“分段”。

分段就是将长篇的文字，分成一个一个段落<p>，便于观赏和阅读。

最为广泛的分组标签就是<div>了。

基本上，90%内容分组都用<div>搞定。

游客，如果您要查看本帖隐藏内容请回复

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

shishunfu · 发表于 2017-4-19 17:52:28

交作业

<!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>
<dt>小天才养殖场</dt>
<dd>小天才教程</dd>
<dd>小天才咨询</dd>
<dt>吹水阁</dt>
<dd>聊聊</dd>
<dd>美图</dd>
<dt>Qt交流</dt>
<dd>教程</dd>
<dd>疑问</dd>
</dl>
<hr/>
<figure>
<img src="b1.jpg" alt="美女图片">
<img src="eg_cute.gif" alt="动态图">
<figcaption>
静态图片+动态图
</figcaption>
</figure>
</body>
</html>

复制代码

lumber2388779 · 发表于 2017-4-23 12:26:44

不二如是发表于 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>

复制代码

YHao · 发表于 2017-7-6 11:26:44

光看不练可不行

<!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>

复制代码

登录/注册后可看大图

joker11111 · 发表于 2017-2-12 11:46:59

接着来

dreamdnj · 发表于 2017-2-18 22:18:32

看看！！！

不二如是 · 发表于 2017-2-19 07:06:03

dreamdnj 发表于 2017-2-18 22:18
看看！！！

欢迎～

772317495 · 发表于 2017-2-27 15:27:59

既来之则安之谢谢楼主

SonOmiga · 发表于 2017-3-4 14:46:19

看看

a540656809 · 发表于 2017-3-6 11:02:35

不想说话

金哥专用 · 发表于 2017-3-6 15:54:05

感谢分享！！

chaosllax · 发表于 2017-3-6 20:11:14

谢谢分享！

丶光明哥 · 发表于 2017-3-7 00:08:05

学习学习

345127857 · 发表于 2017-3-7 14:47:38

支持楼主没币了只能看免费的了

继续思索 · 发表于 2017-3-22 22:07:18

通俗易懂，讲知识点。不啰嗦，赞一个

yishfd · 发表于 2017-3-27 01:18:41

知识点很细。持续跟进学习中……

白牙 · 发表于 2017-3-27 10:30:03

支持楼主没币了只能看免费的了

tianyuan · 发表于 2017-3-27 20:01:43

Why竟然隐藏。

鱿鱼酱 · 发表于 2017-4-18 13:58:30

今日打卡~~~

lumber2388779 · 发表于 2017-4-23 00:05:00

这个元素备用的最广泛的一个，基本爬取任何网站的信息都是div一堆

不二如是 · 发表于 2017-4-23 09:00:21

本帖最后由不二如是于 2017-4-23 09:01 编辑

lumber2388779 发表于 2017-4-23 00:05
这个元素备用的最广泛的一个，基本爬取任何网站的信息都是div一堆

学和用，永远有差别

学，偏炫技，“看劳资学的有多难！（对搞项目，实际用处不大）"

用，偏现实，"黑猫白猫，能抓着耗子就是好猫(越是基础，越是好用，宁可重复复制1k遍，也不愿调库)"

正是如此，能将二者完美结合，掌握度的人，江湖人称“大神”

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 1 6 - 分组分段元素

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

点评

点评

点评

评分

点评

评分

浏览过的版块