HTML 第十二章总结
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 中:
- 写一系列的链接
- 然后 wrap those anchors in an unordered list
- 在目前的网页的opening tag 加一个 id
在 CSS 中
- ul{list-style-type:none;}这一个 property 用来 remove the bullets from the list items
- ul li{display:inline;}改变 dispay 这一 property 使得 display of each list item from"block" to "inline".
- 设置目前的所在网页的 link 的样式,比如:改变其背景的颜色。
关于<video>
<video>
的一些property
<video>
与<img>
有很多相同之处:
- width 和 height:可以更改视频的 width 和 height ,然后视频会进行相应的缩放,但是会保持比例。
- 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 第十二章总结的更多相关文章
- PRML读书会第十二章 Continuous Latent Variables(PCA,Principal Component Analysis,PPCA,核PCA,Autoencoder,非线性流形)
主讲人 戴玮 (新浪微博: @戴玮_CASIA) Wilbur_中博(1954123) 20:00:49 我今天讲PRML的第十二章,连续隐变量.既然有连续隐变量,一定也有离散隐变量,那么离散隐变量是 ...
- <构建之法>第十一章、十二章有感
十一章:软件设计与实现 工作时要懂得平衡进度和质量.我一直有一个困扰:像我们团队这次做 男神女神配 社区交友网,我负责主页的设计及内容模块,有个队友负责网站的注册和登录模块,有个队友负责搜索模块,有个 ...
- sql 入门经典(第五版) Ryan Stephens 学习笔记 (第六,七,八,九,十章,十一章,十二章)
第六章: 管理数据库事务 事务 是 由第五章 数据操作语言完成的 DML ,是对数据库锁做的一个操作或者修改. 所有事务都有开始和结束 事务可以被保存和撤销 如果事务在中途失败,事务中的任何部分都不 ...
- 《Linux命令行与shell脚本编程大全》 第二十二章 学习笔记
第二十二章:使用其他shell 什么是dash shell Debian的dash shell是ash shell的直系后代,ash shell是Unix系统上原来地Bourne shell的简化版本 ...
- 《Android群英传》读书笔记 (5) 第十一章 搭建云端服务器 + 第十二章 Android 5.X新特性详解 + 第十三章 Android实例提高
第十一章 搭建云端服务器 该章主要介绍了移动后端服务的概念以及Bmob的使用,比较简单,所以略过不总结. 第十三章 Android实例提高 该章主要介绍了拼图游戏和2048的小项目实例,主要是代码,所 ...
- [CSAPP笔记][第十二章并发编程]
第十二章 并发编程 如果逻辑控制流在时间上是重叠,那么它们就是并发的(concurrent).这种常见的现象称为并发(concurrency). 硬件异常处理程序,进程和Unix信号处理程序都是大家熟 ...
- perl5 第十二章 Perl5中的引用/指针
第十二章 Perl5中的引用/指针 by flamephoenix 一.引用简介二.使用引用三.使用反斜线(\)操作符四.引用和数组五.多维数组六.子程序的引用 子程序模板七.数组与子程序八.文件句 ...
- 第十二章——SQLServer统计信息(4)——在过滤索引上的统计信息
原文:第十二章--SQLServer统计信息(4)--在过滤索引上的统计信息 前言: 从2008开始,引入了一个增强非聚集索引的新功能--过滤索引(filter index),可以使用带有where条 ...
- 第十二章——SQLServer统计信息(3)——发现过期统计信息并处理
原文:第十二章--SQLServer统计信息(3)--发现过期统计信息并处理 前言: 统计信息是关于谓词中的数据分布的主要信息源,如果不知道具体的数据分布,优化器不能获得预估的数据集,从而不能统计需要 ...
- 第十二章——SQLServer统计信息(1)——创建和更新统计信息
原文:第十二章--SQLServer统计信息(1)--创建和更新统计信息 简介: 查询的统计信息: 目前为止,已经介绍了选择索引.维护索引.如果有合适的索引并实时更新统计信息,那么优化器会选择有用的索 ...
随机推荐
- php 输出缓存,每秒打印一个数字
<?php set_time_limit(0); //以上三行不加上nginx下不执行,一次性显示出来 header('Content-Type: text/event-stream'); // ...
- 原生js封装的获取某一天是当年的第几周方法
function getWeek(str){ //str格式为yyy-mm-dd //周日归到了本周 var d=new Date(str); var day=d.getDay(); var orig ...
- Bootstrap3基础 clearfix pull-left/right 辅助类样式 快速左右浮动
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- RPMB原理介绍【转】
本文转载自:https://blog.csdn.net/shenjin_s/article/details/79868375 RPMB介绍:RPMB(Replay Protected Memory B ...
- Docker 编排工具Rancher 1.6.18
使用docker获取rancher [root@localhost /]# docker pull rancher/server:stable [root@localhost /]# docker i ...
- (转)tomcat架构&session共享
(二期)16.tomcat的整体架构与session共享方案 [课程16]tomcat...共享.xmind47.6KB [课程16]tomcat...流程.xmind0.6MB [课程16]tomc ...
- [quartz] - Cron表达式举例
Quartz是一个任务调度框架.比如你遇到这样的问题 想每月25号,信用卡自动还款 想每年2月14日自己给当年暗恋女神发一封匿名贺卡 想每隔1小时,备份一下自己的SpringCloud学习笔记到云盘 ...
- 【Entity framework】Code First Approach
开篇之前感谢 china_fucan的文章给我的帮助,下面的评论也解决了很多问题同样给予感谢. code first 项目中的ORM框架如果采用的是EF,那么可能会采用code first的方式去使用 ...
- JUnit 4 Vs TestNG比较
JUnit 4和TestNG都是Java中非常受欢迎的单元测试框架.两种框架在功能上看起来非常相似. 哪一个更好? 在Java项目中应该使用哪个单元测试框架? 下面表中概括了JUnit 4和TestN ...
- C# linq 最大、最小对象的扩展
public static class LinqExtension { public static T MaxBy<T, TR>(this IEnumerable<T> en, ...