HTML5 markup

前言

在这一章中,讲解了新的 HTML5 的一些 markup,并且对其中的<video>进行了很详细的讲解。

New HTML5 elements

列表如下:

  • <header> *<footer>
  • <article>
  • <nav>: contains content meant for navigation links in the page
  • <section>
  • <video>
  • <aside>:usually for callouts and sidebars

这样做的目的是为了让 you, 和 web developers 更加 easier to read.

关于<time>

是用来表示时间的,一般的形式为<time datatime="2012-12-8">2/18/2012</time>其中的第一个参数,datatime 的作用是 :The datatime attribute is required if the content of the element isn't written using the offical Internet date/time format,所谓的 offical internet date/time format 指的是:2012-02-18 18:00Z 这样类似的格式,可以只写年,或者只写年月,时间为24小时制,其中的Z表示这是一个 UTC(GMT) time.

Completing the navigation

这里,作者介绍了制作导航的步骤:

在 HTML 中:

  1. 写一系列的链接
  2. 然后 wrap those anchors in an unordered list
  3. 在目前的网页的opening tag 加一个 id

在 CSS 中

  1. ul{list-style-type:none;}这一个 property 用来 remove the bullets from the list items
  2. ul li{display:inline;}改变 dispay 这一 property 使得 display of each list item from"block" to "inline".
  3. 设置目前的所在网页的 link 的样式,比如:改变其背景的颜色。

关于<video>

<video>的一些property

<video><img>有很多相同之处:

  1. width 和 height:可以更改视频的 width 和 height ,然后视频会进行相应的缩放,但是会保持比例。
  2. src 用来表示视频的来源

<video>其他的 property:

  • controls:是一个 boolean 值,用来控制 visitor 是否能够控制视频的进度,音量
  • autoplay:是一个 boolean 值,用来控制视频是否自动播放。
  • poster:可以设置 src 进行显示,当没有 autoplay 的时候,用于作为视频的显示画面。
  • loop:是一个 boolean 值,loop automatically restarts the video after it finishes playing.
  • preload 是一个用于控制视频加载的参数,当它的值为 none 的时候,视频不进行加载直到 visitor 点击之后,当它的值为 metadata 的时候,只加载 metadata 但是不加载 video content。

视频格式的问题

由于存在众多的视频格式,而且每种浏览器所支持的视频格式有所不同,所以需要对视频格式进行一定的了解。
视频包含了两个部分: video 和 audio ,这两个部分用不同的方式进行 encode,然后包含 video 和 audio 的 encoding 的 file 叫做 container,比较常见的几种container 有:MP4,Ogg,WebM.
其中,用于 encode 和 decode 的 software 叫做 codec。
所以,为了保证所有的 visitor 视频内容都能够正常地显示,可在 <video>中添加一些 metadata,其中的<video>tag 用来 specifying mutiple video files代码如下:

<video controls  width="512" height="288"
poster="images/poster.png" id="video">
<source src = "video/tweetsip.mp4"
type='video/mp4; codec="avc1.420E01E,mp4a.40.2"'>
<source src = "video/tweetsip.webm" type='video/webm; codecs="vp8,vorbis"'>
<source src = "video/tweetsip.ogv" type='video/ogg; codec="theora,vorbis"'>
<p>Sorry,your browser doesn't support the video element</p>
</video>fr

HTML 第十二章总结的更多相关文章

  1. PRML读书会第十二章 Continuous Latent Variables(PCA,Principal Component Analysis,PPCA,核PCA,Autoencoder,非线性流形)

    主讲人 戴玮 (新浪微博: @戴玮_CASIA) Wilbur_中博(1954123) 20:00:49 我今天讲PRML的第十二章,连续隐变量.既然有连续隐变量,一定也有离散隐变量,那么离散隐变量是 ...

  2. <构建之法>第十一章、十二章有感

    十一章:软件设计与实现 工作时要懂得平衡进度和质量.我一直有一个困扰:像我们团队这次做 男神女神配 社区交友网,我负责主页的设计及内容模块,有个队友负责网站的注册和登录模块,有个队友负责搜索模块,有个 ...

  3. sql 入门经典(第五版) Ryan Stephens 学习笔记 (第六,七,八,九,十章,十一章,十二章)

    第六章: 管理数据库事务 事务 是 由第五章 数据操作语言完成的  DML ,是对数据库锁做的一个操作或者修改. 所有事务都有开始和结束 事务可以被保存和撤销 如果事务在中途失败,事务中的任何部分都不 ...

  4. 《Linux命令行与shell脚本编程大全》 第二十二章 学习笔记

    第二十二章:使用其他shell 什么是dash shell Debian的dash shell是ash shell的直系后代,ash shell是Unix系统上原来地Bourne shell的简化版本 ...

  5. 《Android群英传》读书笔记 (5) 第十一章 搭建云端服务器 + 第十二章 Android 5.X新特性详解 + 第十三章 Android实例提高

    第十一章 搭建云端服务器 该章主要介绍了移动后端服务的概念以及Bmob的使用,比较简单,所以略过不总结. 第十三章 Android实例提高 该章主要介绍了拼图游戏和2048的小项目实例,主要是代码,所 ...

  6. [CSAPP笔记][第十二章并发编程]

    第十二章 并发编程 如果逻辑控制流在时间上是重叠,那么它们就是并发的(concurrent).这种常见的现象称为并发(concurrency). 硬件异常处理程序,进程和Unix信号处理程序都是大家熟 ...

  7. perl5 第十二章 Perl5中的引用/指针

    第十二章 Perl5中的引用/指针 by flamephoenix 一.引用简介二.使用引用三.使用反斜线(\)操作符四.引用和数组五.多维数组六.子程序的引用  子程序模板七.数组与子程序八.文件句 ...

  8. 第十二章——SQLServer统计信息(4)——在过滤索引上的统计信息

    原文:第十二章--SQLServer统计信息(4)--在过滤索引上的统计信息 前言: 从2008开始,引入了一个增强非聚集索引的新功能--过滤索引(filter index),可以使用带有where条 ...

  9. 第十二章——SQLServer统计信息(3)——发现过期统计信息并处理

    原文:第十二章--SQLServer统计信息(3)--发现过期统计信息并处理 前言: 统计信息是关于谓词中的数据分布的主要信息源,如果不知道具体的数据分布,优化器不能获得预估的数据集,从而不能统计需要 ...

  10. 第十二章——SQLServer统计信息(1)——创建和更新统计信息

    原文:第十二章--SQLServer统计信息(1)--创建和更新统计信息 简介: 查询的统计信息: 目前为止,已经介绍了选择索引.维护索引.如果有合适的索引并实时更新统计信息,那么优化器会选择有用的索 ...

随机推荐

  1. php 输出缓存,每秒打印一个数字

    <?php set_time_limit(0); //以上三行不加上nginx下不执行,一次性显示出来 header('Content-Type: text/event-stream'); // ...

  2. 原生js封装的获取某一天是当年的第几周方法

    function getWeek(str){ //str格式为yyy-mm-dd //周日归到了本周 var d=new Date(str); var day=d.getDay(); var orig ...

  3. Bootstrap3基础 clearfix pull-left/right 辅助类样式 快速左右浮动

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  4. RPMB原理介绍【转】

    本文转载自:https://blog.csdn.net/shenjin_s/article/details/79868375 RPMB介绍:RPMB(Replay Protected Memory B ...

  5. Docker 编排工具Rancher 1.6.18

    使用docker获取rancher [root@localhost /]# docker pull rancher/server:stable [root@localhost /]# docker i ...

  6. (转)tomcat架构&session共享

    (二期)16.tomcat的整体架构与session共享方案 [课程16]tomcat...共享.xmind47.6KB [课程16]tomcat...流程.xmind0.6MB [课程16]tomc ...

  7. [quartz] - Cron表达式举例

    Quartz是一个任务调度框架.比如你遇到这样的问题 想每月25号,信用卡自动还款 想每年2月14日自己给当年暗恋女神发一封匿名贺卡 想每隔1小时,备份一下自己的SpringCloud学习笔记到云盘 ...

  8. 【Entity framework】Code First Approach

    开篇之前感谢 china_fucan的文章给我的帮助,下面的评论也解决了很多问题同样给予感谢. code first 项目中的ORM框架如果采用的是EF,那么可能会采用code first的方式去使用 ...

  9. JUnit 4 Vs TestNG比较

    JUnit 4和TestNG都是Java中非常受欢迎的单元测试框架.两种框架在功能上看起来非常相似. 哪一个更好? 在Java项目中应该使用哪个单元测试框架? 下面表中概括了JUnit 4和TestN ...

  10. C# linq 最大、最小对象的扩展

    public static class LinqExtension { public static T MaxBy<T, TR>(this IEnumerable<T> en, ...