鱼C论坛

 找回密码
 立即注册
查看: 6522|回复: 21

[学习笔记] 025 - 这终究是一个语义为王的时代

[复制链接]
发表于 2019-4-8 10:19:00 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 不二如是 于 2019-4-17 09:42 编辑







                               
登录/注册后可看大图


万众瞩目的零基础入门学习Web开发(H5&C3)开始更新了!!!


Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生,时间总是善待任何想拿它搞事情的存在体

很幸运,一切就这样开始了,开局总会有些不足,但一切在慢慢变好,不是吗?

作为,吹水阁中最爱吹水(爱干无意义事情)的鱼油,整套教程的亮点(槽点)由我来承包~

关注本系列推送(最下方有订阅方式)的鱼油,会享受到一个福利
会比正常推送,早一个时间节点,看到还未出炉的美味课程


哈哈,废话不多说了,#敲黑板时刻!





在线视频:传送门





课程思维导图

Snip20190408_94.png

猛戳

                               
登录/注册后可看大图
超清






                               
登录/注册后可看大图


1、语义化

上一讲我们了解了最新的语义话结构元素,本讲小甲鱼老师结合苹果官网将重要的元素进行了深入讲解。

2、section 元素

首先是MDN的一则Waring:
Snip20190408_88.png


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


如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>。

不要把 section 元素作为一个普通的容器来使用,这是本应该是<div>的用法。

一般来说,一个 <section> 应该出现在文档大纲中,意味着要有“标题”

而且 section 可以相互嵌套,浏览器渲染会根据层级关系自动修改标题大小:
  1. <section>
  2.         <h1>Section.1</h1>
  3.         <p>我爱FishC</p>
  4.             <section>
  5.                 <h1>Section.2</h1>
  6.                 <p>我爱FishC</p>
  7.                     <section>
  8.                         <h1>Section.3</h1>
  9.                         <p>我爱FishC</p>
  10.                     </section>
  11.             </section>
  12.     </section>
复制代码

Snip20190408_93.png


结构简单,section 中往往就是标题+文本

3、article 元素

article 元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构。

article 是一个特殊的 section 元素,它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。

当 article 元素嵌套使用时,则该元素代表与外层元素有关的文章。

例如,代表咱们论坛帖子评论的 article 元素可嵌套在代表帖子文章的 article 元素中。

article 元素结构比 section 更复杂:
  1. <article>
  2.       <header>         
  3.     <h1>标题</h1>
  4.            <p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>
  5.   </header>
  6.   <p>article的使用方法</p>   
  7.   <footer>
  8.             <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
  9.   </footer>
  10. </article>
复制代码


这也算是二者的区别所在,更多阅读:实用Tips - 47 - div、section、article的区别

4、details + summary 元素

details+summary 元素可创建一个组件,仅在被切换成展开状态时,它才会显示内含的信息。

summary 元素可为该部件提供概要或者标签,代码:
  1.     <details>
  2.         <summary>语义</summary>
  3.         HTML5的核心之一就是语义为王!
  4.     </details>
复制代码

Apr-08-2019 14-56-58.gif


通过为 details 元素添加 open 属性可以默认展开内容。




课后作业,完成了吗?


传送门






                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列学习笔记,请订阅 专辑&#9758;传送门)(不喜欢更要订阅



                               
登录/注册后可看大图




评分

参与人数 2荣誉 +9 鱼币 +5 贡献 +6 收起 理由
睦ちゃん她爹 + 4 + 3 无条件支持楼主!
cxyxzq + 5 + 5 + 3 无条件支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-4-8 10:23:11 | 显示全部楼层
抢楼+1

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2019-4-8 10:39

评分

参与人数 1荣誉 +2 鱼币 +3 贡献 +3 收起 理由
不二如是 + 2 + 3 + 3 鱼C有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-4-8 23:33:05 | 显示全部楼层
谢谢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-7-25 10:58:00 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-8-2 08:53:22 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-8-30 08:26:46 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-9-1 01:05:01 | 显示全部楼层
9999999999999999999999999
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-12-23 15:53:41 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-3-9 09:41:38 | 显示全部楼层
section部分的意思
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-4-18 09:56:31 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-6-19 15:16:28 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-9-1 10:35:15 | 显示全部楼层
11
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-12-14 22:17:15 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-1-7 13:35:43 | 显示全部楼层
回复看看看
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-1-18 11:37:40 | 显示全部楼层
11
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-3-2 21:26:35 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-8-3 08:30:01 | 显示全部楼层
回复回复回复
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-8-24 15:18:48 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2021-11-10 19:44:51 | 显示全部楼层
0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2022-3-10 15:24:23 From FishC Mobile | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

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

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 05:14

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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