025 - 这终究是一个语义为王的时代
本帖最后由 不二如是 于 2019-4-17 09:42 编辑上一集：024 - 旧的不去新的不来
http://xxx.fishc.com/forum/201803/20/094616suu10rovsa60kazi.jpg
万众瞩目的零基础入门学习Web开发（H5&C3）开始更新了！！！{:10_298:}
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
https://xxx.ilovefishc.com/forum/201903/09/110322u2q3033cmch3qmh9.png
1、语义化
上一讲我们了解了最新的语义话结构元素，本讲小甲鱼老师结合苹果官网将重要的元素进行了深入讲解。
2、section 元素
首先是MDN的一则Waring：
翻译：
**** Hidden Message *****
如果元素内容可以分为几个部分的话，应该使用 <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>
结构简单，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>
通过为 details 元素添加 open 属性可以默认展开内容。
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：026 - 回眸一笑百媚生
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
抢楼+1 谢谢 {:5_92:} {:5_95:} {:5_102:} 9999999999999999999999999 1 section部分的意思 {:5_107:} 1 11 1 回复看看看 11 {:10_254:}{:10_254:}{:10_254:} 回复回复回复 {:7_130:} 0 {:10_249:}
页:
[1]
2