QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

管理团队

Rank: 30Rank: 30Rank: 30Rank: 30

技术值
查看: 2279|回复: 45

[系列教程] 0 0 1 6 - 分组分段元素

[复制链接]
最佳答案
150 
累计签到:687 天
连续签到:215 天
不二如是 发表于 2017-1-12 10:26:02 227945 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 不二如是 于 2017-2-24 13:19 编辑

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

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

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

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

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

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


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







这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑传送门)(不喜欢更要订阅

本帖被以下淘专辑推荐:

楼层
跳转到指定楼层
最佳答案
0 
累计签到:137 天
连续签到:1 天
shishunfu 发表于 2017-4-19 17:52:28 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6. </head>
  7. <body>
  8. <main>    <!--<main> 标签规定文档的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
  9.                 注释:在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>。-->
  10.         <h1>Web Browsers</h1>
  11.         <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>

  12.         <article>
  13.                 <h1>Google Chrome</h1>
  14.                 <p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器,于 2008 年发布。</p>
  15.         </article>

  16.         <article>
  17.                 <h1>Internet Explorer</h1>
  18.                 <p>Internet Explorer 由微软开发的一款免费的 web 浏览器,发布于 1995 年。</p>
  19.         </article>

  20.         <article>
  21.                 <h1>Mozilla Firefox</h1>
  22.                 <p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器,发布于 2004 年。</p>
  23.         </article>
  24. </main>

  25. <dl><!--<dl> 标签定义了定义列表(definition list)。<dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。-->
  26.         <dt>小天才养殖场</dt>
  27.         <dd>小天才教程</dd>
  28.         <dd>小天才咨询</dd>
  29.         <dt>吹水阁</dt>
  30.         <dd>聊聊</dd>
  31.         <dd>美图</dd>
  32.         <dt>Qt交流</dt>
  33.         <dd>教程</dd>
  34.         <dd>疑问</dd>
  35. </dl>

  36. <hr/><!--<hr> 标签在 HTML 页面中创建一条水平线。水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。-->

  37. <figure> <!--figure元素,用来展示插图、图片、照片等。<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)-->
  38.         <img src="b1.jpg" alt="美女图片">
  39.         <img src="eg_cute.gif" alt="动态图">
  40.         <figcaption><!--提示:请使用 <figcaption> 元素为 figure 添加标题(caption)-->
  41.                 静态图片+动态图
  42.         </figcaption>
  43. </figure>
  44. </body>
  45. </html>
复制代码
0012.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-4-19 18:39
最佳答案
177 
累计签到:241 天
连续签到:1 天
lumber2388779 发表于 2017-4-23 12:26:44 | 显示全部楼层
不二如是 发表于 2017-4-23 09:00
学和用,永远有差别

学,偏炫技,“看劳资学的有多难!(对搞项目,实际用处不大)"

受教,目前还是属于第一种,来连续三课做的- -有点丑别介意
  1. <!doctype>
  2. <html>
  3. <head>
  4.         <meta charset='utf-8'>
  5.         <title>我是交作业的!</title>
  6.         <base  />
  7.         <base target='_blank' />
  8. </head>

  9. <body>
  10.         <header>
  11.                 <meta charset='utf-8'>
  12.                 <img src='4f8d8407513efb3b5aef02c719b7823c.png'><br />
  13.                 <nav>
  14.                         <ul>
  15.                                 <li>首页</li>
  16.                                 <li>电视剧</li>
  17.                                 <li>最新电影</li>
  18.                         </ul>
  19.                 </nav>
  20.         </header>
  21.         <section>
  22.                 <h3>推荐</h3>
  23.                 <article>
  24.                         <header>
  25.                                 <h5>教你理财</h5>
  26.                         </header>
  27.                         <section>
  28.                                 <p>我理财还要你教!</p>
  29.                         </section>
  30.                         <footer>
  31.                                 <p>吐槽时间:2017年04月23日 12:00:03</p>
  32.                         </footer>
  33.                 </article>
  34.                 <article>
  35.                         <div style="color:#FF0000">
  36.                                 <h5>同城交友</h5>
  37.                                 <p>同城约P吧</p>
  38.                         </div>
  39.                 </article>
  40.         </section>
  41.         <section>
  42.                 <h3>视频</h3>
  43.                 <main>
  44.                         <article>
  45.                                 <h5>爱奇艺高清</h5>
  46.                                 <p>说高清一点不高清</p>
  47.                         </article>
  48.                 </main>
  49.                 <hr />
  50.                 <article>
  51.                         <h5>优酷网</h5>
  52.                         <p>小样,把t换成k就成精了</p>
  53.                 </article>
  54.         </section>
  55.         <section>
  56.                 <h3>影视</h3>
  57.                 <article>
  58.                         <h5>电视剧</h5>
  59.                         <p>看你妹电视剧</p>
  60.                 </article>
  61.                 <article>
  62.                         <h5>电影·购票</h5>
  63.                         <p>是日本的动作片吗</p>
  64.                 </article>
  65.         </section>
  66.         <section>
  67.                 <h3>游戏</h3>
  68.                 <article>
  69.                         <h5>4399游戏</h5>
  70.                         <p>为啥不能凑成4400</p>
  71.                 </article>
  72.                 <article>
  73.                         <h5>7k7k游戏</h5>
  74.                         <p>要花7k才能玩的?</p>
  75.                 </article>
  76.         </section>
  77.         <section>
  78.                 <dl>
  79.                         <dt><h3>新闻</h3></dt>
  80.                         <dd><h5>新浪新闻</h5></dd>
  81.                         <dd><h5>腾讯新闻</h5></dd>
  82.                 </dl>
  83.         </section>
  84.         <section>
  85.                 <figure>
  86.                         <img src="4f8d8407513efb3b5aef02c719b7823c.png">
  87.                         <figcaption>世界地球日</figcaption>
  88.                 </figure>
  89.         </section>
  90.         <aside>
  91.                 <h3>推荐</h3>
  92.                 <p>XXX被查</p>
  93.         </aside>
  94.         <aside>
  95.                 <h3>社会</h3>
  96.                 <p>XXX被杀</p>
  97.         </aside>
  98.         <footer>
  99.                 <p>不吐槽会死星人</p>
  100.                 <a href="http://bbs.fishc.com/forum-33-1.html">吐槽区</a>
  101.         </footer>
  102. </body>
  103. </html>
复制代码

点评

我很赞同!: 5.0
我很赞同!: 5
hao123即视感~  发表于 2017-4-23 14:50
最佳答案
1 
累计签到:76 天
连续签到:1 天
YHao 发表于 2017-7-6 11:26:44 | 显示全部楼层
光看不练可不行
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.                 <meta charset="utf-8">
  5.                 <title>第二个实例</title>
  6. </head>
  7. <body>
  8. <main>
  9.         <h1>北上广深</h1>
  10.         <p>北上广深是指中国大陆经济实力最强的四个城市:北京、上海、广州、深圳。</p>
  11.        
  12.         <article>
  13.                         <h1>北京</h1>
  14.                         <p>北京,简称“京”,是中华人民共和国的首都、直辖市、国家中心城市、超大城市、国际大都市,全国政治中心、文化中心、国际交往中心、科技创新中心,是中国第二大城市和中部战区司令部驻地。</p>
  15.         </article>
  16.        
  17.         <article>
  18.                         <h1>上海</h1>
  19.                         <p>上海,简称“沪”或“申”,是中华人民共和国直辖市,国家中心城市,超大城市,是中国第一大城市,中国的经济、交通、科技、工业、金融、贸易、会展和航运中心,首批沿海开放城市。</p>
  20.         </article>

  21.         <article>
  22.                         <h1>广州</h1>
  23.                         <p>广州是广东省省会、国家中心城市、超大城市、南部战区司令部驻地。</p>
  24.         </article>

  25.         <article>
  26.                         <h1>深圳</h1>
  27.                         <p>深圳,简称“深”,别称鹏城,中国四大一线城市之一,广东省省辖市、计划单列市、副省级市、国家区域中心城市、超大城市。</p>
  28.         </article>       
  29. </main>

  30. <dl>
  31.                 <dt>小天才养殖场</dt>
  32.                 <dd>小天才教程</dd>
  33.                 <dd>小天才咨询</dd>
  34.                 <dt>吹水阁</dt>
  35.                 <dd>聊聊</dd>
  36.                 <dd>美图</dd>
  37.                 <dt>wechat交流</dt>
  38.                 <dd>私信</dd>
  39.                 <dd>群聊</dd>
  40. </dl>

  41. <hr/>

  42. <figure>
  43.                 <img src="0001.jpg" alt="logo">
  44.                 <img src="0001.gif" alt="动态图">
  45.                 <figcaption>静态+动态</figcaption>
  46. </figure>
  47. </body>
  48. </html>
复制代码



                               
登录/注册后可看大图

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-2-27 17:08

评分

参与人数 1荣誉 +6 鱼币 +6 收起 理由
不二如是 + 6 + 6 A

查看全部评分

最佳答案
3 
累计签到:412 天
连续签到:1 天
joker11111 发表于 2017-2-12 11:46:59 | 显示全部楼层
接着来
11.jpg
22.jpg
33.jpg
44.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
么么哒~  发表于 2017-2-12 15:09

评分

参与人数 1荣誉 +10 鱼币 +5 贡献 +5 收起 理由
不二如是 + 10 + 5 + 5 joker!!!

查看全部评分

最佳答案
0 
累计签到:89 天
连续签到:1 天
dreamdnj 发表于 2017-2-18 22:18:32 | 显示全部楼层
看看!!!
最佳答案
150 
累计签到:687 天
连续签到:215 天
不二如是  楼主| 发表于 2017-2-19 07:06:03 | 显示全部楼层


欢迎~
最佳答案
0 
累计签到:38 天
连续签到:1 天
772317495 发表于 2017-2-27 15:27:59 | 显示全部楼层
既来之则安之谢谢楼主
最佳答案
0 
累计签到:7 天
连续签到:1 天
SonOmiga 发表于 2017-3-4 14:46:19 | 显示全部楼层
看看
最佳答案
0 
累计签到:1 天
连续签到:1 天
a540656809 发表于 2017-3-6 11:02:35 From FishC Mobile | 显示全部楼层
不想说话
最佳答案
0 
累计签到:134 天
连续签到:4 天
金哥专用 发表于 2017-3-6 15:54:05 | 显示全部楼层
感谢分享!!
最佳答案
0 
累计签到:2 天
连续签到:2 天
chaosllax 发表于 2017-3-6 20:11:14 | 显示全部楼层
谢谢分享!
最佳答案
0 
累计签到:118 天
连续签到:1 天
丶光明哥 发表于 2017-3-7 00:08:05 | 显示全部楼层
学习学习
最佳答案
0 
累计签到:3 天
连续签到:1 天
345127857 发表于 2017-3-7 14:47:38 | 显示全部楼层
支持楼主  没币了  只能看免费的了
最佳答案
0 
累计签到:1406 天
连续签到:26 天
继续思索 发表于 2017-3-22 22:07:18 From FishC Mobile | 显示全部楼层
通俗易懂,讲知识点。不啰嗦,赞一个
最佳答案
0 
累计签到:439 天
连续签到:1 天
yishfd 发表于 2017-3-27 01:18:41 | 显示全部楼层
知识点很细。持续跟进学习中……
最佳答案
0 
累计签到:142 天
连续签到:1 天
白牙 发表于 2017-3-27 10:30:03 | 显示全部楼层
支持楼主  没币了  只能看免费的了
最佳答案
0 
累计签到:735 天
连续签到:2 天
tianyuan 发表于 2017-3-27 20:01:43 From FishC Mobile | 显示全部楼层
Why竟然隐藏。
最佳答案
0 
累计签到:26 天
连续签到:1 天
鱿鱼酱 发表于 2017-4-18 13:58:30 | 显示全部楼层
今日打卡~~~
最佳答案
177 
累计签到:241 天
连续签到:1 天
lumber2388779 发表于 2017-4-23 00:05:00 | 显示全部楼层
这个元素备用的最广泛的一个,基本爬取任何网站的信息都是div一堆
最佳答案
150 
累计签到:687 天
连续签到:215 天
不二如是  楼主| 发表于 2017-4-23 09:00:21 | 显示全部楼层
本帖最后由 不二如是 于 2017-4-23 09:01 编辑
lumber2388779 发表于 2017-4-23 00:05
这个元素备用的最广泛的一个,基本爬取任何网站的信息都是div一堆



学和用,永远有差别

学,偏炫技,“看劳资学的有多难!(对搞项目,实际用处不大)"

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

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

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /1 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.3 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-6-21 12:57

快速回复 返回顶部 返回列表