标签归档:HTML5
HMTL5+CSS3+JS=交互六面体
深夜偶遇一个站,发现一段代码 “HMTL5+CSS3+JS=交互六面体” 很不错,必须梳理记录一下:老话说的好:“好记性不如烂笔头”。
1. 发现的过程——由来:
本姐常常整理资料,因为常常混乱,“断舍离”!刚要删掉:CSS完全参考手册.chm ,
不知怎么想看看作者,于是:
- 中文名:杜瑶
- 英文名:Joy Du
- 网 名:飘零雾雨
- 博 客:CSS探索之旅
命中缺水吗?起了这么个网名???
2. 沿着链走——走着:
沿链走着~~~,挺好的第三方页面。于是直接到底。由 Hexo 强力驱动 主题 - NexT.Mist
继续沿链走着~~~,https://hexo.io/ 下的一个主题Themes,“冥冥神神佛佛……你们都知道我为何点他?!就我不知道为何点他?!” 就是他——>Paperbox A responsive paper-like theme!
3.一见钟情——HTML+CSS3+JS六面体
一眼就相中那个六面体了,于是,“起锅——烧油——HTML+CSS3+JS—–锅里捣”,一切顺利!完活儿~录个屏,生个GIF ,感谢 FSCapture!
4.絮絮叨叨——多说一点儿:
什么是Hexo?
Hexo是一个快速,简单和强大的博客框架。您用Markdown(或其他标记语言)编写帖子,Hexo在几秒钟内生成具有精美主题的静态文件。
Hexo 6.3.0 发布 日期是 曾经的版本更新发布的也很频繁,说明:存在的,就是适用宜用的。愿越来越好!致敬勤恳的开发者!
综合案例-摄影吧~
HTML5新增文档结构元素
1. 简介:
相比HTML4在HTML5中有一个比较重大的变化就是新增了很多新的结构元素,例如article、section、aside、nav、header等。
这些元素和div的元素有类似的功能,但是具有更强的语义表示。
总结一句话就是:“见其名知其意”。
2. 为什么要引入语义元素呢?
在这里很多朋友就会产生疑问了,这些新语义元素既然和div的元素具有类似的功能为什么还要引入这些语义元素呢?
以上面这案例为例进行比较:
3. 新增语义标签简介:
区块标签:article、section、nav、aside、header、footer、figure、figcaption、main
内联标签:time、i、b、em、stromg
- article ———-定义文章
- section——— 定义页眉:一个主题性的内容分组,通常包含一个头部(header),可能还会有一个尾部(footer)
- nav —————定义导航:表示页面的导航,可以通过导航连接到网站的其他页面,或当前页面的其他部分
- aside————–定义文章的侧边栏:包含的内容不是页面的主要内容,具有独特性,是对页面的补充
- header ———–定义页眉:一般放置在页面的顶部,或者页面中某个区块元素的顶部,包含整个页面或某个区块的标题、简介等信息
- footer ————-定义页脚:一般被放置在页面的底部,或者页面中某个区块元素的底部
- figure ————–标签规定独立的流内容(图像、图表、照片、代码等等)
- figcaption ——–figure的子元素 用于对figure的内容 进行说明
- main —————-显示页面的主题内容,每个页面只能包含一个main标签,main标签中不包含网站标题、logo、主导航、版权声明等信息
4. 新增语义标签的使用:
使用article的例子:
- 一篇博客
- 一个论坛帖子
- 一篇新闻报道
- 一个用户评论
header标签的使用:
一篇文档中可以包含多于一个的header标签
header标签不一定非要显示在页面的上方,它的内容决定这里需要使用header标签,位置并不重要
可以为body、article、section、aside、添加header元素
nav标签的使用:
aside标签的使用:
section标签的使用:
main标签的使用:
HTML5+CSS代码:
<!DOCTYPE html> <html lang="en"> <head> <title>测试</title> <meta charset="UTF-8"> <style type="text/css"> body{ width: 80%; background-color: white; margin: 0 auto; text-align: center; font-size: 40px; color: white; } header{ width: 100%; height: 100px; background-color: #009dda; } nav{ width: 19%; height: 300px; background-color: #90c840; float: left; } section{ width: 60%; height: 300px; background-color: #dbdb00; float: left; margin-left: 1%; } aside{ width: 19%; height: 300px; background-color: #ec1f85; margin-left: 81%; } footer{ width: 100%; height: 80px; background-color: limegreen; } section>header{ height: 60px; background-color: lime; width: 80%; margin: 0 auto; } section>article{ height: 60px; background-color: mediumvioletred; width: 80%; margin: 0 auto; } section>footer{ height: 60px; background-color: lavender; width: 80%; margin: 0 auto; } section>header, section>article, section>footer, header, nav, section, section, aside, footer{ margin-top: 10px; } </style> </head> <body> <header>header</header> <nav>nav</nav> <section>section <header>header</header> <article>article</article> <footer>footer</footer> </section> <aside>aside</aside> <footer>footer</footer> </body> </html>
HTML 中 “role” 属性的目的是什么?
我一直在看某些人的工作中的角色属性。我也用它,但我不确定它的效果。
例如:
<header id="header" role="banner"> Header stuff in here </header>
要么:
<section id="facebook" role="contentinfo"> Facebook stuff in here </section>
要么:
<section id="main" role="main"> Main content stuff in here </section>
这个角色属性是否必要?
这个属性对于语义更好吗?
它改善了 SEO 吗?
可以在这里找到角色列表,但我看到有些人自己组成。是允许还是正确使用角色属性?
有什么想法吗?
答案
您看到的大多数角色都被定义为 ARIA 1.0 的一部分,然后被合并到 HTML5 中。一些新的 HTML5 元素(对话框,主要等)甚至基于原始的 ARIA 角色。
http://www.w3.org/TR/wai-aria/
除了本机语义元素之外,还有两个主要原因可以使用角色。
原因#1。覆盖没有适合宿主语言元素的角色,或者由于各种原因,使用了语义较少的元素。
在此示例中,使用了链接,即使生成的功能比导航链接更像按钮。
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
屏幕阅读器会将其视为按钮(而不是链接),您可以使用 CSS 属性选择器来避免 class-itis 和 div-itis。
*[role="button"] { /* style these a buttons w/o relying on a .button class */ }
原因#2。备份本机元素的角色,以支持实现 ARIA 角色但尚未实现本机元素角色的浏览器。
例如,浏览器多年来一直支持 “main” 角色,但它是 HTML5 的一个相对新增的版本,因此很多浏览器还不支持<main>
的语义。
<main role="main">…</main>
这在技术上是多余的,但可以帮助一些用户并且不会伤害任何用户。几年后,这种技术可能变得不必要了。
你还写道:
我看到有些人自己组成。是允许还是正确使用角色属性?
这是属性的有效使用,除非未包含真实角色。浏览器将在令牌列表中应用第一个已识别的角色。
<span role="foo link note bar">...</a>
在列表之外,只有link
和note
是有效角色,因此链接角色将被应用,因为它首先出现。如果您使用自定义角色,请确保它们与 ARIA 中的任何已定义角色或您正在使用的主机语言(HTML,SVG,MathML 等)不冲突。
据我了解,角色最初是由 XHTML 定义的,但已被弃用。但是,它们现在由 HTML 5 定义,请参见此处: https : //www.w3.org/WAI/PF/aria/roles#abstract_roles_header
role 属性的目的是识别解析软件元素(及其子元素)作为 Web 应用程序一部分的确切功能。这主要是作为屏幕阅读器的可访问性事物,但我也可以看到它对嵌入式浏览器和屏幕抓取器很有用。为了对不寻常的 HTML 客户端有用,需要将属性设置为我链接的规范中的一个角色。如果你自己构成,那么这个 “未来” 功能就无法运作 – 评论会更好。
实用性: http : //www.accessibleculture.org/articles/2011/04/html5-aria-2011/
这个角色属性是否必要?
答: 是的 。
-
当语言未定义自己的角色属性时,角色属性对于支持可访问富 Internet 应用程序( WAI-ARIA )以在基于 XML 的语言中定义角色是必需的。
-
虽然这是Protocols and Formats Working Group发布角色属性的原因,但该属性也有更多的一般用例。
它为您提供:
-
无障碍
-
设备适配
-
服务器端处理
-