鱼C论坛

 找回密码
 立即注册
查看: 7809|回复: 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 可以相互嵌套,浏览器渲染会根据层级关系自动修改标题大小:
<section>
        <h1>Section.1</h1>
        <p>我爱FishC</p>
            <section>
                <h1>Section.2</h1>
                <p>我爱FishC</p>
                    <section>
                        <h1>Section.3</h1>
                        <p>我爱FishC</p>
                    </section>
            </section>
    </section>
Snip20190408_93.png


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

3、article 元素

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

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

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

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

article 元素结构比 section 更复杂:
<article>
      <header>         
    <h1>标题</h1>
           <p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>
  </header>
  <p>article的使用方法</p>   
  <footer>
            <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
  </footer>
</article>

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

4、details + summary 元素

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

summary 元素可为该部件提供概要或者标签,代码:
    <details>
        <summary>语义</summary>
        HTML5的核心之一就是语义为王!
    </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-12-21 21:45

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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