024 - 旧的不去新的不来
本帖最后由 不二如是 于 2019-4-8 10:20 编辑上一集：023 - 好戏在后头
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超清
本讲的重点，来自HTML5和旧世界的诀别——语义化。
课程中小甲鱼老师分别展示了“苹果”和“法拉利”的 div 网页框架。
div 元素定义 HTML 文档中的一个分隔区块或者一个区域部分。
用来为 HTML 文档内大块（block-level）的内容提供结构和背景的元素。
div 的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div元素的属性来控制。
或者是通过使用 css设 置达到布局等效果。
在HTML5中新增了很多语义化标签来明确Web页面中的不同部分，如下图所示：
在传统的HTML中，我们要完成上面的页面，需要这么写：
<ul class="nav">
<li></li>
</ul>
<div class="header"></div>
<div class="main">
<div class="section"></div>
</div>
<div class="footer"></div>
通过设置div的不同的class属性，来分别设置不同区块的功能。
在HTML5中，我们就可以这么写：
<nav></nav>
<header></header>
<main>
<div class="section"></div>
</main>
<footer></footer>
这样除了语义化的特点，页面组织也发生了根本变化，以前在HTML中只能写一个h1标签，现在可以写多个。
这是因为HTML5的页面大纲不再只是根据h1、h2等标签进行分类，更多依靠页面的章节来进行分类。
此外这样做还有利于SEO，屏幕阅读器也可以获取页面的大纲，让使用者决定是否要详细阅读下去。
推荐阅读：0 0 1 5 - body元素 - 区块五座大山
总结一下：
**** Hidden Message *****
section：表示文档中的节,一般是具有标题的。
文档大纲、文章章节、博客条目、用户评论部分或者论文中有编号的部分时使用。
通常会带有标题，如果没有标题，那么就不推荐使用section。
article：表示独立的自包含内容。
如：一篇文章。
文章中可包含标题、内容、脚注，article是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。
一般来说，article 会有标题部分(通常包含在 header 内)，有时也会包含 footer 。
虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。
最后记住，不管是新与旧，不要忘了用户体验才是重点，我们要遵循最终用户优先(Priority of Constituencies)：
“In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.”
一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。
我们要站在浏览器的肩膀上进行开发，与时俱进才能在Web洪流中不被淘汰。
遵循最终用户优先原则，使用HTML5最新的语义化标签，这才是纷繁世界背后的最终奥义。
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：025 - 这终究是一个语义为王的时代
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
谢谢小甲鱼 a {:10_257:} {:5_91:} {:5_95:} 看一看 12 {:5_102:} 7777777777777777777777777777777777 {:10_257:}厉害呀，有心了 看一看 0 小甲鱼，你的网站也全是div啊
看 好好好 我们不能常用div
要用header，main，aisde，footer，nav 学习学习 总结的太好了，爱了爱了{:10_298:} 1
页:
[1]
2