HTML和CSS学习笔记第12章——HTML5标记

返回主目录

为页面创建导航

1. 在html中创建链接的无序列表

<nav>
	<ul>
		<li><a href="index.html">HOME</a></li>
		<li class="selected"><a href="blog.html">BLOG</a></li>
		<li><a href="">INVENTIONS</a></li>
		<li><a href="">RECIPES</a></li>
		<li><a href="">LOCATIONS</a></li>
	</ul>
</nav>

2. 为导航创建适合的css

nav {
    background-color: #efe5d0;
	margin: 10px 10px 0px 10px;
}
nav ul {//子孙选择符，只影响nav之中的ul
	margin: 0px;
	list-style-type: none;//删除了列表项的项目符号
	padding: 5px 0px 5px 0px;
}
nav ul li {
	display: inline;//使列表项不再有回车，流入一行
	padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {//覆盖掉<a>的规则
	color: #954b4b;
	border-bottom: none;
	font-weight: bold;
}
nav ul li.selected {
	background-color: #c8b99c;
}

加入<video>

<video controls 
		autoplay 
		width="512" height="288" 
		src="video/tweetsip.mp4"
		poster="images/poster.png"
		id="video">
</video>

添加controls属性使“播放、暂停、音量”等控件可见。
autoplay属性使视频自动播放。但这一特性被chrome和safari相继禁止。
poster属性则指定一个个预览图。

preload属性：大多数情况，浏览器会自己决定是否加载视频，加载多少视频。可以有以下的值：
none：在用户真正“播放”视频之前不下载视频。
metadata：下载视频元数据，但不下载视频内容。
auto：让浏览器决定。

loop属性：添加则视频结束播放后会自动重新播放。

有可能会出现代码正确但就是没能看到任何视频的情况，这有可能是视频格式的问题。因此可以使用多个source元素分别提供浏览器支持的格式。浏览器从上往下查找，直到找到一种它能播放的格式。

<video controls autoplay width="512" height="288">
	<source src="video/tweetsip.mp4">
	<source src="video/tweetsip.webm">
	<source src="video/tweetsip.ogv">
	<p>Sorry, your browser doesn't support the video element.</p>//如果都不支持就会显示。
</video>