标签归档：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！

paperbox

paperbox

https://www.sun11.me/

https://www.sun11.me/

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的元素具有类似的功能为什么还要引入这些语义元素呢？
以上面这案例为例进行比较：

20200229141513339

20200229142732211

3.  新增语义标签简介：

20200229213000949

区块标签：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的例子：

  • 一篇博客
  • 一个论坛帖子
  • 一篇新闻报道
  • 一个用户评论
  • 20200229214753623

header标签的使用：

一篇文档中可以包含多于一个的header标签
header标签不一定非要显示在页面的上方，它的内容决定这里需要使用header标签，位置并不重要
可以为body、article、section、aside、添加header元素

20200229214944992
footer标签的使用：

20200229215057875

nav标签的使用：

20200229215134583

aside标签的使用：

  • 页面测边栏
  • 广告
  • 友情链接
  • 文章引语（内容摘要）
  • 20200229215220680

section标签的使用：

20200229215303754

main标签的使用：

20200229215430743
五、案例实现：

20200229220502771

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 吗？

可以在这里找到角色列表，但我看到有些人自己组成。是允许还是正确使用角色属性？

有什么想法吗？

html

答案

您看到的大多数角色都被定义为 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发布角色属性的原因，但该属性也有更多的一般用例。

它为您提供：

  • 无障碍

  • 设备适配

  • 服务器端处理

  • 复杂的数据描述，…… 等。