Closed zilongxuan001 closed 6 years ago
zilongxuan001
commented
6 years ago IE8及更早版本、Safari 3及更早版本等较老的浏览器不支持这些新元素。
智能手机的移动浏览器支持HTML5新元素。
··· https://caniuse.com/#search=new%20elements ···
来源：《Head First HTML 与 CSS》(中文第二版)P553
zilongxuan001
commented
6 years ago （1）画显示页面草图。画出浏览器要显示什么样的页面。 （2）画HTML文档草图。画出框架图，标出需要哪些元素。 （3）编写HTML代码 （4）编写CSS代码
来源：《Head First HTML 与 CSS》(中文第二版)P559-563
zilongxuan001
commented
6 years ago 通用程度比较 <div> > <section> > <article>
<div>仍用于建立结构，将不相关的内容组织在一起。
eg，只是要增加一个元素以便为页面指定样式，使用
<div>通常将元素组织在一起来制定样式，或者有些内容不是适合放在HTML5中哪些与结构相关的新元素中，就可以使用
<div>创建结构。
<section>将几个相关的内容组合一起。
eg 增加一个元素来标记一些内容，指示这是由相关内容构成的一个结构明确的区块，使用
<section>
<article>包含独立的内容，如一个新闻报道、一个博客帖子或一个简短的报告。
用于博客等网页，表示文章、讨论区等内容。
eg，有些内容可以独立于页面上的其他内容进行重用和分发，使用
<article>
来源：《Head First HTML 与 CSS》(中文第二版)P564，562
zilongxuan001
commented
6 years ago time元素的属性？值的几种表示方法？
<time date="2018/06/14'>06-14-2018</time>date 表示日期
来源：《Head First HTML 与 CSS》(中文第二版)P565
zilongxuan001
commented
6 years ago <header>和<footer>除了 主页眉，<header> 、<footer>还可以放在哪里？
每个<section>和<article>下都有一个<header>、<footer>吗？
<header>和<footer>可以放在<section>和<article>甚至<aside>里面。
每个<section>和<article>下可以都有一个<header>。
即使只有一个标题，也可以使用<header>。
来源：《Head First HTML 与 CSS》(中文第二版)P567，P562
zilongxuan001
commented
6 years ago 如何用无序列表做导航栏？
如何删除列表中的项目符号？
如何让列表项<li>元素的内容放到一行?
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>在CSS中，设置
list-style-type: none;<li>元素内容设置到一行内在CSS中设置
display: inline;
来源：《Head First HTML 与 CSS》(中文第二版)P573-575，574
zilongxuan001
commented
6 years ago <video>的样式
autoplay属性是做什么用的？
control属性是做什么用的？
什么是布尔属性？
poster属性是做什么用的？
loop属性是做什么用的？
Web视频的src属性做什么用？
preload属性做什么用？
Web视频的width和height属性做什么用？
为什么有的浏览器看不到Web视频？
Web视频格式有哪几种？（P586）如何处理?（P589）
如何处理Web视频不同的格式？
如何插入Flash?
video的样式<video controls autoplay width="512" height="288" src="video/tweetsip.mp4"></video>autoplay属于布尔属性，可以有，也可以没有。
autoplay属性告诉浏览器，一旦有了足够的数据就开始播放视频。
autoplay属性可以让视频自动播放。如果无autoplay属性，则只能点击后才能播放视频。
control属于布尔属性，可以有，也可以没有。
control属性提供视频内置的控件，控制播放、暂停和调节音量等。如果无control属性，浏览器没有这些控件。不同浏览器，
<control>提供的控件不同。在《Head First HTML5 Programming》中就实现了自己定制控件。
布尔属性，就是没有值的属性，如果属性存在，则有这个属性，如果属性不存在，则无这个属性。
autoplay属性和control属性都是布尔属性。
poster属性就是为视频增加个海报。因为如果视频不播放时，是黑屏状态。增加海报（就是张图片）可以显得比较好看。
浏览器会把视频的第一帧设为“海报”图像，而视频的第一帧往往为黑屏图像。如果没有autoplay，则可以看见这个图像。
poster-"images/apple.png"
loop属性也是布尔属性，有loop属性，视频在播放结束之后就会自动重新开始播放视频。
src属性放置视频的地址。
src="video/apple.mp4"preload属性，控制是否提前下载内容。
preload属性用来细粒度地控制视频如何加载，以实现优化。
通常，浏览器会根据是否设置autoplay以及用户带宽来选择加载多少视频。
preload: none;覆盖浏览器的设置，在用户真正“播放”视频之前不加载视频
preload: metadata;下载视频元数据，但不下载视频内容
preload: auto;让浏览器做决定
Web视频的width和height属性，控制视频显示区的长度和宽度
一般视频长宽比是4:3，或者16:9，如果设置的长度和宽度的比值不是4:3，或者16:9，则相应的会在视频左右两边（pillar-boxed）或上下（letter-boxed）出现黑边。
这是因为浏览器支持不通的视频格式。
HTML5规范允许采用任何视频格式，具体支持哪些格式由浏览器实现来决定。
主流浏览器主要使用3种不同视频格式，每种格式包括一个容器类型，以及一个视频编码和音频编码
包含H.264视频编码 AAC音频编码
支持的浏览器：Safari和IE9+，以及一些Chrome的版本
文件扩展名： .mp4
包含 Theora视频编码 Vorbis音频编码
支持的浏览器：Firefox、 Chrome和Opera
文件扩展名 .ogv
包含 Vp8视频编码 Vorbis音频编码
支持的浏览器： Firefox、 Chrome和Opera
文件扩展名是.webm
备注
容器 ：container，用来包装视频、音频和元数据信息的文件格式。通常的容器格式有 MP4、WebM、 Ogg 和Flash Video。
编解码器：codec，用来对一种特定视频或音频编码完成编码和解码的软件。流行的Web编解码器有 H.264、VP8、Theora、ACC和Vorbis。
使用<source>元素处理不同的视频格式
更具体的指定视频格式
想了解更多视频格式的type类型，可以登录https://wiki.whatwg.org/wiki/Video_type_parameters查看。
尽量使用<video>，因为在移动端比如手机上，没法看Flash，用video更方便。
也可以把Flash作为备用选择，使用<object>元素插入Flash。
来源：《Head First HTML 与 CSS》(中文第二版)P581，582，583，584，585，586
Web视频格式相关网站 https://en.wikipedia.org/wiki/HTML5_viedo
HTML5新标记
都有哪些HTML5新标记？都有哪些功能？
这些新标记的意义在于哪里？
HTML5新标记
<section>表示区段，几个相关的内容。
<article>表示独立的文章。
<aside>放侧边栏。
<nav>做导航栏。
<header>头部，不仅可以放到页眉，也可以在
<article>的里面。<footer>尾部，不仅可以放到页尾，也可以放在
<article>里面<time><mark>用法
显示
<video>用于为页面增加视频。
<audio><progress><meter>用法
显示
<canvas><figure>新标记的意义
新标记可增加语义意义，让编程人员和程序更容易识别代码的意义。
来源：《Head First HTML 与 CSS》(中文第二版)P547，572，595