• 建站服务
  • 建站做站公司
  • seo推广公司
  • 建站价格套餐
  • bob客户端苹果版建设流程
  • 响应式Web设计的HTML5和CSS

    2019-04-27 19:04:01 栏目:bob客户端苹果版建设

    HTML5现在是W3C的推荐。您可以在http://www.w3.org/TR/html5/上阅读规范。

    HTML5还提供了用于处理表单和用户输入的特定工具。这些功能可以减轻像JavaScript之类的资源这样的重量技术,例如表单验证等。

    HTML5标记 - 所有现代浏览器都能理解

    如今,我看到的大多数bob客户端苹果版(以及我自己制作的所有bob客户端苹果版)都是使用HTML5编写的,而不是旧的HTML 4.01标准。

    所有现代浏览器都了解HTML5的新语义元素(新的结构元素,视频和音频标签),甚至旧版本的Internet Explorer(Internet Explorer 9之前的版本)也可以提供微小的“polyfill”以允许它们呈现这些新元素。必须阅读如何在2018年开始病毒博客| 最新的200个趋势

    以正确的方式启动HTML5页面

    让我们从HTML5文档的开头开始吧。把这个部分搞砸了,你可能会花很长时间想知道为什么你的页面不能正常运行。前几行看起来像这样:

    让我们逐个浏览这些标签。一般来说,每次创建网页时它们都是相同的但是相信我,值得了解它们的作用。

    doctype

    doctype是一种向浏览器传达我们拥有的文档类型的方法。否则,它不一定知道如何使用其中的内容。

    我们用HTML5 doctype声明打开了我们的文档:

    如果你是小写的粉丝,那么也同样好。没什么区别。

    这是HTML 4.01页面的一个受欢迎的变化。他们曾经开始这样的事情:

    “ http://www.w3.org/TR/xhtml1/DTD / ... ”>

    疙瘩后方的巨大痛苦!难怪我曾经复制并粘贴它!

    另一方面,HTML5 doctype很好而且简短,只需。有趣的事实(无论如何):它实际上以这种方式结束,因为它确定这是告诉浏览器以“标准模式”呈现页面的最短方法。

    想要了解“怪癖”和“标准”模式的历史课程吗?维基百科有你覆盖:http://en.wikipedia.org/ 维基/ Quirks_mode

    HTML标记和lang属性

    在doctype声明之后,我们打开html标签; 我们文档的根标签。我们还使用lang属性指定文档的语言,然后打开部分:

    指定备用语言

    根据W3C规范(http://www.w3.org/TR/html5/dom.html#the-lang- 和-xml:lang-attributes),lang属性指定元素内容的主要语言和包含文本的任何元素属性。如果您不是用英语编写页面,最好指定正确的语言代码。例如,对于日语,HTML标记将是。有关语言的完整列表,请查看http://www.iana.org/ assignmentments / language-subtag-registry。

    字符编码

    最后,我们指定字符编码。因为它是一个void元素(不能包含任何东西),所以它不需要结束标记:

    除非你有充分的理由另外指定,否则charset的值几乎总是utf-8。对于好奇,有关该主题的更多信息可以

    在发现//www.w3.org/International / ...:HTTP。

    随和的HTML5

    我记得,回到学校,我们的超级平均(但实际上是非常好的)数学老师经常会离开。这个班级会松了一口气,而不是“平均先生”(名字已被改变以保护无辜者),替代教师通常是一个随和而和蔼可亲的人。他静静地坐着,让我们继续前进,不用尖叫或不断针刺。在我们工作的时候,他没有坚持沉默,如果我们坚持他解决问题的方式,他并不在乎,所有重要的是答案,我们可以清楚地说明我们是如何找到他们的。如果HTML5是一名数学老师,那就是那位随和的供应老师。我现在将对这个奇怪的类比进行鉴定。

    如果你注意编写代码的方式,你通常会大部分使用小写,用引号包装属性值,并为脚本和样式表声明一个“类型”。例如,您可能链接到这样的样式表:

    HTML5不需要这么精确,它很高兴看到这个:

    你注意到了吗?没有结束标记/斜杠,属性值周围没有引号,也没有类型声明。但是,轻松的HTML5并不关心。第二个例子和第一个例子一样有效。

    这种更宽松的语法适用于整个文档,而不仅仅是链接资产。例如,如果您愿意,请指定这样的div:

    这是完全有效的HTML5。插入图像也是如此:

    这也是有效的HTML5。没有结束标记/斜杠,没有引号,以及大写和小写字符的混合。您甚至可以省略诸如打开标记之类的内容,并且页面仍然有效。XHTML 1.0会对此有何评论?必须阅读Blog如何赚钱200趋势方式2018

    想要一个简短的HTML5代码?考虑一下HTML5 Boilerplate(http://html5boilerplate.com/)。它是一个预先制作的“最佳实践”HTML5文件,包括基本样式,polyfill和可选工具,如Modernizr。您可以通过查看代码来获取许多很棒的技巧,也可以自定义构建模板以满足您的特定需求。强烈推荐!

    一种明智的HTML5标记方法

    就个人而言,我喜欢写我的标记'XHTML'风格。这意味着关闭标签,引用属性值,并坚持一致的字母大小写。有人可能会争辩说,放弃其中一些做法可以节省几个字节的数据,但这就是工具的用途(如果需要,可以剥离任何不必要的字符/数据)。我希望我的标记尽可能清晰,我会鼓励其他人也这样做。我认为代码的清晰度应该胜过简洁。必须阅读如何撰写病毒博客| 2508趋势方式2018

    因此,在编写HTML5文档时,我认为您可以编写清晰易读的代码,同时仍然可以接受HTML5提供的经济效益。举例来说,对于CSS链接,我会使用以下内容:

    我保留了结束标记和引号,但省略了type属性。这里要说的是你可以找到自己满意的水平。HTML5不会对你大吼大叫,在课堂前标记你的标记,然后站在角落里戴着傻瓜帽以便不进行验证(这只是我的学校那样做了吗?)。但是你想写你的标记就好了。

    我在开什么玩笑?我希望您现在知道,如果您在编写代码时没有引用属性值并关闭标记,我会默默地评判您。

    尽管HTML5的语法更宽松,但总是值得检查您的标记是否有效。有效标记是更易于访问的标记。W3C验证器就是出于这个原因而创建的:

    http://validator.w3.org/

    我足以指责'时髦'风格标记的作者。让我们看看HTML5的其他一些好处。

    所有人都欢呼强大的标签

    HTML5中的巨大经济性是我们现在可以在标签中包含多个元素(哇哇!关于时间,对吧?)。以前,如果您希望您的标记验证,

    有必要将每个元素包装在自己的标记中。例如,查看以下HTML 4.01代码:

    主页

    本段还链接到主页 使用HTML5,我们可以抛弃所有单独的 标签,而是用一个包裹组:

    要记住的唯一限制是,可以理解的是,你不能将一个标签包装在另一个标签(因为,像,duh)或另一个交互式元素(如按钮)中(因为喜欢,双重duh!并且你不能将表单包装在标签中(因为喜欢哦,你明白了)。

    HTML5中的新语义元素

    如果我在OS X的字典中检查“语义”一词的定义,它定义为:

    “关注意义的语言学和逻辑学的分支”。

    出于我们的目的,语义是赋予我们标记意义的过程。为什么这很重要?很高兴你问。

    大多数bob客户端苹果版遵循相当标准的结构惯例 典型区域包括页眉,页脚,侧栏,导航栏等。作为网络作者,我们经常将我们使用的div命名为更清楚地指定这些区域(例如,class =“Header”)。但是,就代码本身而言,查看它的任何用户代理(Web浏览器,屏幕阅读器,搜索引擎爬虫等)都无法确定每个div元素的用途是什么。辅助技术的用户也会发现难以将一个div与另一个div区分开来。HTML5旨在通过新的语义元素解决该问题。

    有关HTML5元素的完整列表,请自己(非常)舒适并将浏览器指向http://www.w3.org/TR/html5/semantics.html #semantics。

    我们不会涵盖这里的每一个新元素,只是那些我觉得在日常响应式网页设计中最有用或最有趣的元素。让我们深入研究。

    元素

    很长一段时间,HTML5没有用于划分页面主要内容的元素。在网页的主体内,这将是包含主要内容块的元素。

    首先,有人认为,不在其他新语义HTML5元素中的内容将通过否定而成为主要内容。值得庆幸的是,规范发生了变化,我们现在有一种更具声明性的方式来对主要内容进行分组; 恰当命名的标签。

    无论是包装页面的主要内容还是基于Web的应用程序的主要部分,主要元素都是您应该将其全部分组。这是规范中特别有用的一行:

    “文档的主要内容区域包含该文档特有的内容,不包括在一组文档中重复的内容,例如bob客户端苹果版导航链接,版权信息,bob客户端苹果版徽标和横幅和搜索表单(除非文档或应用程序主要功能是搜索表单的功能。)“

    还值得注意的是,每个页面上不应该有多个main(毕竟,你不能有两个主要的内容),它不应该像其他一些语义HTML5元素一样用作后代例如文章,旁边,页眉,页脚,导航或标题。然而,他们可以生活在一个主要元素中。

    阅读主要元素的官方话题:http ://www.w3.org/ TR / html5 / grouping-content.html#the-main-element

    元素

    元素用于定义文档或应用程序的通用部分。例如,您可以选择围绕内容创建部分; 一个部分用于联系信息,另一个部分用于新闻提要,等等。重要的是要了解它不是用于造型目的。如果你只需要将一个元素包装成样式,你就应该像以前一样继续使用div。

    在处理基于Web的应用程序时,我倾向于使用section作为可视组件的包装元素。它提供了一种查看标记中组件开头和结尾的简单方法。

    您也可以自己确定是否应该使用基于您正在切片的内容是否具有自然标题的部分(例如h1)。如果没有,那么选择div可能会更好。

    要了解W3C HTML5规范对的说明,请访问以下URL:

    HTTP://www.w3.org/TR/html5/secti ...

    元素

    元素用于将主要导航链接包装到同一页面内的其他页面或部件。它并非严格用于页脚(尽管可以)等,其中链接到其他页面的组是常见的。

    如果您通常使用无序列表(

    )和一堆列表标签(li)标记导航元素,则可能更适合使用导航和一些嵌套标签。

    要了解W3C HTML5规范对的说明,请转到以下URL:

    HTTP://www.w3.org/TR/html5/secti ...

    元素

    元素与一起很容易导致混淆。在沉入之前,我当然必须阅读并重新阅读每个规格。这是我对规范的重复。元素用于包装自包含的内容。在构建页面时,询问您打算在标签中使用的内容是否可以作为一个整体块并粘贴到另一个站点上并且仍然完全合理?考虑它的另一种方法是,您考虑包装在中的内容是否实际上构成了RSS提要中的单独文章?应该用元素包装的内容的明显示例是博客文章或新闻报道。请注意,如果嵌套元素,

    要查看W3C的HTML5规范说约<文章>访问HTTP://www.w3.org/TR/html5/secti ...。

    元素

    元素用于与其周围内容相切的内容。实际上,我经常将它用于侧边栏(当它包含合适的内容时)。它也被认为适用于拉引号,广告和导航元素组。基本上任何与主要内容没有直接关系的东西都可以在一旁好转。如果它是一个电子商务bob客户端苹果版,我会考虑像“购买此产品的客户也购买”这样的区域作为的主要候选者。

    有关W3C HTML5规范关于的更多信息,请访问http://www.w3.org/TR/html5/sections。 html#the-aside-element。

    和元素

    规范涉及图元素:

    “...因此可用于注释插图,图表,照片,代码清单等。”

    以下是我们如何使用它来修改第一个博客的部分标记:

    令人难以置信的烤饼,维基百科图片

    您可以看到元素用于包装这个小的自包含块。在里面,用于为父元素提供标题。

    当图像或代码需要一些小标题时(这不适合内容的主要文本),它是完美的。

    图元素的规范可以在http://www.w3.org/TR/html5/grouping-content 找到。html #the-figure-element。

    figcaption的规格在http:// www。 w3.org/TR/html5/grouping-content.html#the-figcaption-element。

    和元素

    您有多少次想在页面上创建一个简单的打开和关闭“小部件”?单击摘要文本时,会打开一个包含其他信息的面板。HTML5通过详细信息和摘要元素来促进此模式。考虑这个标记(你可以从这个博客的代码中打开example3.html来自己玩):

    <细节>

    我在一天内吃了15个烤饼

    当然我没有。如果我这样做,它可能会杀了我。还有什么路要走。嗯,烤饼!

    在Chrome中打开此内容,没有添加样式,默认情况下仅显示摘要文本:

    单击摘要文本上的任意位置可打开面板。再次单击它会将其关闭。如果您希望默认情况下打开面板,可以将open属性添加到details元素:

    <详情打开>

    我在一天内吃了15个烤饼

    当然我没有。如果我这样做,它可能会杀了我。还有什么路要走。嗯,烤饼!

    支持浏览器通常会添加一些默认样式以指示可以打开面板。在Chrome(以及Safari)中,这是一个黑暗的披露三角形。要禁用此功能,您需要使用特定于WebKit的专有伪选择器:

    摘要:: - webkit-details-marker {

    display:none;

    }

    您当然可以使用相同的选择器来区分不同的标记。

    目前,没有办法动画开放和关闭。当另一个细节面板打开时,也没有(非JavaScript)方式切换其他细节面板关闭(在同一级别)。我不确定这些愿望是否会(或应该)得到解决。您应该将它更多地视为一种方式来促进您使用显示器所做的事情:无; 在JavaScript的帮助下切换。

    元素

    实际上,元素可用于站点标题的“标头”区域。它还可以用作其他内容的介绍,例如元素中的部分。您可以根据需要在同一页面上多次使用它(例如,您可以在页面上的每个中包含)。

    这就是W3C HTML5规范关于的说法:

    HTTP://www.w3.org/TR/html5/secti ...

    元素

    元素应该用于包含有关它所在部分的信息。例如,它可能包含指向其他文档或版权信息的链接。与一样,如果需要,它可以在页面中多次使用。

    例如,它可以用于博客的页脚,也可以用于博文文章中的页脚部分。但是,该规范解释了博客文章作者的联系信息应该由

    元素包装。

    看看W3C HTML5规范对的描述:

    HTTP://www.w3.org/TR/html5/secti ...

    元素

    元素将明确用于标记其最近的或祖先的联系信息。要混淆事项,请记住,它不能用于邮政地址等(除非它们确实是相关内容的联系地址)。相反,邮政地址和其他任意联系信息应包含在好的“

    标签中。

    我不是

    元素的粉丝,因为根据我的经验,在自己的元素中标记物理地址会更有用,但那是个人抱怨。希望它对你更有意义。

    有关W3C HTML5规范关于

    的更多信息,请查看:

    HTTP://www.w3.org/TR/html5/secti ...

    关于h1-h6元素的说明

    直到最近我还没有意识到的是,不鼓励使用h1-h6标签来标记标题和子标题。我在谈论这种事情:

    烤饼:

    最美味的零食

    以下是HTML5规范的引用:

    h1-h6元素不得用于标记副标题,副标题,替代标题和标语,除非打算作为新章节或小节的标题。

    这肯定是规范中不那么模糊的句子之一!哎呀!

    那么,我们应该如何创作这种可能性呢?规范实际上有一个整体

    部分,(http://www.w3.org/TR/html5/commo ...)致力于此。就个人而言,我更喜欢旧的元素,但遗憾的是该船已经航行(在过时的HTML功能部分中有更多信息)。因此,为了遵循规范的建议,我们之前的示例可以重写为:

    烤饼:

    最美味的零食

    HTML5文本级语义

    除了我们所看到的结构和分组元素之外,HTML5还修改了一些曾经被称为内联元素的标记。HTML5规范现在将这些标记称为文本级语义(http://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics)。我们来看看几个

    常见的例子。

    元素

    从历史上看,元素意味着“使这个大胆”(http://www.w3.org/TR/html4/present / graphics.html#edef-B)。这是在风格选择是标记的一部分的那一天。但是,您现在可以正式使用它作为CSS中的样式挂钩,因为HTML5规范现在声明是:

    虽然现在没有特定的含义,因为它的文本级别,它并不打算用于包围大型标记组,使用div作为它。您还应该知道,因为它在历史上用于粗体文本,所以如果您希望标记内的内容不显示为粗体,则通常必须重置CSS中的字体粗细。

    元素

    好的,举起手来,我经常使用作为造型钩。我需要修改我的方式,就像在HTML5中一样:

    em元素表示其内容的重点强调。

    因此,除非您确实希望强调所附内容,否则请考虑使用标记或相关的标记。

    元素

    HTML5规范将描述为:

    “...以一种交替的声音或情绪,或以其他方式偏离正常散文的文本范围,以指示不同文本质量的方式。”

    可以这么说,它不仅仅用于使某些东西变成斜体。例如,我们可以使用它来标记此文本行中的奇数名称:

    然而,关于hgroup元素的讨论现在已经令人沮丧,因为它现在已经不再适用于 Raphus cucullatus 。

    HTML5中还有许多其他文本级语义标记。要完整运行,请查看以下URL中的规范的相关部分:

    http://www.w3.org/TR/html5/text-level-semantics。

    HTML文本#层次语义

    过时的HTML功能

    除了脚本链接中的语言属性之外,还有一些HTML可能会被用来使用,现在在HTML5中被认为是“过时的”。重要的是要注意HTML5中存在两个过时的功能阵营 - 符合和不符合。符合要求的功能仍然有效,但会在验证器中生成警告。实际上,如果可以的话,请避开它​​们,但如果您使用它们,它们不会让天空掉下来。不符合要求的功能可能仍会在某些浏览器中呈现,但如果您使用它们,您会被认为非常非常顽皮,并且您可能在周末不会得到一些享受!

    在过时和不合格的功能方面,有很多筏。我会承认很多我从未使用过的(有些我从未见过!)。您可能会遇到类似的反应。但是,如果您感到好奇,可以在http://www.w3.org/TR/html5/obsolete 找到过时和不符合要求的完整列表。HTML。值得注意的过时和不合格的功能是打击,中心,字体,

    首字母缩略词,框架和框架集。

    HTML5的早期草稿中也有一些功能现已被删除。hgroup就是这样一个例子。该标签最初被提议用于包装标题组; 标题的h1和子标题的h2可能已包含在hgroup元素中。然而,关于hgroup元素的讨论现在是令人沮丧的,因为它现在已经走了Raphus cucullatus(继续,谷歌它,你知道你想要)。

    使用HTML5元素

    现在是时候练习使用我们刚才看到的一些元素了。让我们重温博客1,响应式网页设计要点中的示例。如果我们比较下面原来的标记标记博客1,响应的要点 网页设计,(记住,你可以从下载所有的例子HTTP:// RWD 教育bob客户端苹果版,或者从GitHub库),你可以看到以下是我们所看到的新元素的用法。

    <文章>

    烤饼:最美味的零食

    偶尔会受到诽谤和误解; 斯科恩是典型的英国经典。 令人难以置信的烤饼,维基百科图片

    食谱和服务建议如下。

    成分

    方法 <页脚>专为博客的, 'Resonsive网页设计与HTML5和CSS3' 通过<地址> 奔文思

    将常识应用于元素选择

    我删除了很大一部分内容,所以我们可以专注于结构。希望你会同意很容易辨别出不同的标记部分。但是,在这一点上,我还想提供一些务实的建议; 如果你不总是为每一个给定的情况选择正确的元素,那么它不是世界末日。例如,在前面的例子中我是否使用了或

    并没有什么实际意义。如果我们在实际使用时使用,我当然不认为这是对人类的犯罪; W3C的人们不会追捕你,也不会因为做出错误的选择而惹恼你。只需应用一点常识。也就是说,如果你可以使用像和这样的元素

    WCAG和WAI-ARIA提供更易于访问的Web应用程序

    即使从2011年到2012年撰写本博客的第一版,W3C也已经取得了很大进展,使作者更容易编写更易于访问的网页。

    WCAG

    WCAG的存在是为了提供:

    “网络内容可访问性的单一共享标准,可满足国际上个人,组织和政府的需求。”

    当谈到更多步行网页(而不是单页网页应用程序等)时,专注于WCAG指南是有意义的。它们提供了许多(主要是常识)指南,以确保如何确保您的Web内容可访问。每项建议都被评为一致性级别:A,AA或AAA。有关这些一致性级别的更多信息,请参阅http://www.w3.org/TR/ UNDERSTANDING-WCAG20 / conformance.html#uc-levels-head。

    您可能会发现您已经遵守了许多指导原则,例如为图像提供替代文本。但是,您可以在http://www.w3.org/WAI/WCAG20/glance/ Overview.html上简要了解指南,然后构建自己的自定义快速参考检查列表。

    HTTP://www.w3.org/WAI/WCAG20/qui ...。

    我鼓励大家花一两个小时向下看清单。许多指南很容易实现,并为用户提供真正的好处。

    WAI-ARIA

    WAI-ARIA的目标主要是解决使网页上的动态内容易于访问的问题。它提供了一种描述自定义窗口小部件(Web应用程序中的动态部分)的角色,状态和属性的方法,以便辅助技术用户可以识别和使用它们。

    例如,如果屏幕上的小部件显示不断更新的股票价格,盲人用户访问该页面的方式如何?WAI-ARIA试图解决这些问题。

    不要将角色用于语义元素

    以前建议在页眉和页脚中添加“标志性”角色,如下所示:

    带有ARIA地标横幅角色的标头

    但是,现在认为这是对要求的过剩。如果查看前面列出的任何元素的规范,则会有一个专用的允许 ARIA角色属性部分。以下是section 元素的相关说明作为示例:

    “允许ARIA角色属性值:

    region role(默认 - 不设置),alert,alertdialog,application,contentinfo,dialog,document,log,main,marquee,presentation,search or status。“

    关键部分是'角色(默认 - 不设置)'。这意味着明确地向元素添加ARIA角色是没有意义的,因为元素本身暗示了这一点。规范中的注释现在清楚地说明了这一点:

    “在大多数情况下,设置ARIA角色和/或aria- *属性与默认的隐式ARIA语义匹配是不必要的,不推荐使用,因为浏览器已经设置了这些属性。”

    如果你只记得一件事

    您可以采取的最简单的方法来帮助辅助技术,尽可能使用正确的元素。头元素比div class =“Header”更有用。同样,如果页面上有一个按钮,请使用元素(而不是样式的span或其他元素看起来像一个按钮)。我接受按钮元素并不总是允许精确的样式(它不喜欢被设置为显示:table-cell或display:flex例如)并且在那些情况下至少选择下一个最好的东西; 通常是标签。

    进一步采取ARIA

    ARIA不仅限于具有里程碑意义的角色。更进一步,可在http://www.w3.org/TR/wai-aria/roles上找到完整的角色列表以及对其使用适用性的简洁描述。

    使用非可视桌面访问(NVDA)免费测试您的设计

    如果您在Windows平台上开发并且想要在屏幕阅读器上测试ARIA增强型设计,则可以使用NVDA免费测试。

    谷歌现在还为Chrome浏览器提供免费的“辅助功能开发者工具”(可用于跨平台); 非常值得一试。

    最后,OS X还包括用于测试网页的VoiceOver实用程序。

    希望WAI-ARIA和WCAG的简要介绍为您提供足够的信息,以便更多地考虑如何使用支持辅助技术。也许为您的下一个HTML5项目添加辅助技术支持将比您想象的更容易。

    在HTML5中嵌入媒体

    对于许多人来说,当Apple拒绝在其iOS设备中添加对Flash的支持时,HTML5首先进入他们的词汇表。Flash已经获得市场支配地位(有些人认为市场束缚)是通过网络浏览器提供视频的首选插件。然而,苹果决定依靠HTML5来处理富媒体渲染,而不是使用Adobe的专有技术。尽管HTML5在这个领域取得了很大进展,但Apple公众对HTML5的支持使其成为一个重要的支柱,并帮助其媒体工具在更广泛的社区中获得更大的吸引力。

    如您所想,Internet Explorer 8及更低版本不支持HTML5视频和音频。大多数其他现代浏览器(Firefox 3.5 +,Chrome 4 +,Safari 4,Opera 10.5 +,Internet Explorer 9 +,iOS 3.2 +,Opera Mobile 11 +,Android 2.3+)处理得很好。

    以HTML5方式添加视频和音频

    HTML5中的视频和音频很简单。HTML5媒体的唯一真正困难是列出媒体的替代源格式(因为不同的浏览器支持不同的文件格式)。如今,MP4在桌面和移动平台上无处不在,通过HTML5将媒体包含在您的网页中变得轻而易举。这是一个如何链接到页面中的视频文件的“简单可能”示例:

    HTML5允许单个 标记(或 用于音频)完成所有繁重的工作。也可以在开始和结束标记之间插入文本,以便在出现问题时通知用户。您通常还需要添加其他属性,例如高度和宽度。我们将这些添加到:

    什么,你的意思是你不理解HTML5?

    现在,如果我们将前面的代码片段添加到我们的页面中并在Safari中查看它,它将会出现,但是没有用于播放的控件。要获取默认播放控件,我们需要添加controls属性。我们还可以添加自动播放属性(不推荐 - 众所周知,每个人都讨厌自动播放的视频)。以下代码片段对此进行了演示:

    什么,

    上面的代码段的结果显示在以下屏幕截图中:

    其他属性包括用于控制预加载媒体的预加载(早期HTML5采用者应注意预加载替换自动缓冲),循环以重复视频,以及海报以定义视频的海报帧。如果视频播放可能有延迟(或缓冲可能需要一些时间),这非常有用。要使用属性,只需将其添加到标记即可。这是一个包含所有这些属性的示例:

    什么,你的意思是你不懂HTML5?

    旧版浏览器的后备功能

    标签使我们能够根据需要提供回退。例如,除了提供视频的MP4版本之外,如果我们想确保适合Internet Explorer 8及更低版本的回退,我们可以添加Flash回退。此外,如果用户在浏览器中没有任何合适的播放技术,我们可以提供文件本身的下载链接。这是一个例子:

    这个代码示例和示例视频文件(我出现在英国肥皂加冕街,当我有头发和希望与DeNiro一起凝视时)以MP4格式出现在博客代码的example2.html中。

    音频和视频标签几乎完全相同

    标签使用相同的原则(具有相同的属性(宽度,高度和海报除外))。两者之间的主要区别在于没有可见内容的播放区域。

    响应式HTML5视频和iFrame

    我们已经看到,与以往一样,支持旧版浏览器会导致代码膨胀。什么开始的标签是一行或两行最终是10行或更多行(和一个额外的Flash文件)只是为了使旧版本的Internet Explorer快乐!就我自己而言,我通常乐于放弃Flash后备,以寻求更小的代码占用空间,但每个用例都不同。

    现在,我们可爱的HTML5视频实现的唯一问题是它没有响应。这是正确的,一个响应式网页设计的例子,HTML5和CSS3博客没有“回应”。

    值得庆幸的是,对于HTML5嵌入式视频,修复很容易。只需删除标记中的任何高度和宽度属性(例如,删除width =“640”height =“480”)并在CSS中添加以下内容:

    视频{max-width:100%; 身高:自动; }

    然而,虽然这适用于我们可能在本地托管的文件,但它并不能解决嵌入在iFrame中的视频问题(鞠躬YouTube,Vimeo等)。 

    扫二维码与福州嘉艺网络项目经理沟通

    我们在微信上24小时期待你的声音

    解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

    上一篇:什么是bob客户端苹果版前端开发,bob客户端苹果版程序后端全站bob客户端苹果版建设 下一篇:什么是福州网页设计