|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2019-4-8 10:20 编辑
万众瞩目的 零基础入门学习Web开发（H5&C3）开始更新了！！！ 
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
本讲的重点，来自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元素 - 区块五座大山
总结一下：
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最新的语义化标签，这才是纷繁世界背后的最终奥义。
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
|
评分
-
查看全部评分
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-3-9 10:12:57
置顶卡
千斤顶
显身卡
发表于 2019-4-8 23:29:07
发表于 2020-5-31 09:34:59