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

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 - 分组分段元素

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

评分

本帖被以下淘专辑推荐:

点评

点评

点评

评分

点评

评分