html5-7 html5语义标签和视频
html5-7 html5语义标签和视频
一、总结
一句话总结：设计网站的时候要兼顾早期浏览器的话，最新技术要缓着用，自己可以先尝试。
1、html5所有标签共有属性有哪四种？
1.id
2.class
3.style
4.title
2、html5所有标签公有属性中的title是什么意思？
移到标签上面显示的内容
3、flash视频播放标签是什么？
embed
<embed src="http://www.tudou.com/a/qJtXzLi3iaY/&bid=05&iid=132798855&resourceId=0_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="1200" height="500"></embed>
4、常用的语义化标签有哪6个（可以从上往下数）？
1.article
2.footer
3.header
4.nav
5.section
5、html5页面布局是怎么样的？
外层container 里面是header（nav）、section（article）、footor
二、html5语义标签和视频
1、相关知识
所有标签共有属性:
1.id
2.class
3.style
4.title
语义化标签:
1.article
2.footer
3.header
4.nav
5.section
所有浏览器都支持的视频方式:
<embed src="http://www.tudou.com/a/qJtXzLi3iaY/&bid=05&iid=132798855&resourceId=0_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="1200" height="500"></embed>
HTML5视频标签:
<video src="movie.ogg" controls="controls" autoplay loop width='1200px' height='500px'>
</video>
2、代码
网站布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.container{
width:1200px;
/*background: #ccc;*/
height:600px;
margin:0 auto;
} .header{
height:50px;
background: #272822;
} .section{
height:500px;
} .footer{
height:50px;
background: #272822;
} .img{
float:left;
margin-left:30px;
}
</style>
</head>
<body>
<!-- 主体 -->
<div class="container">
<!-- 头部 -->
<div class='header'> </div> <!-- 体部 -->
<div class="section">
<div class="img">
<img src="xs.png" alt="">
</div>
<div class="img">
<img src="xs.png" alt="">
</div>
<div class="img">
<img src="xs.png" alt="">
</div>
<div class="img">
<img src="xs.png" alt="">
</div> <div class="img">
<img src="xs.png" alt="">
</div>
<div class="img">
<img src="xs.png" alt="">
</div>
<div class="img">
<img src="xs.png" alt="">
</div>
<div class="img">
<img src="xs.png" alt="">
</div> </div> <!-- 尾部 -->
<div class="footer"> </div>
</div> </body>
</html>
html5语义化的一些标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
.container{
width:1200px;
/*background: #ccc;*/
height:600px;
margin:0 auto;
} header{
height:50px;
background: #272822;
} section{
height:500px;
} footer{
height:50px;
background: #272822;
} article{
float:left;
margin-left:30px;
}
</style>
</head>
<body>
<!-- 主体 -->
<div class="container">
<!-- 头部 -->
<header> </header> <!-- 体部 -->
<section>
<article>
<img src="xs.png" alt="">
</article>
<article>
<img src="xs.png" alt="">
</article>
<article>
<img src="xs.png" alt="">
</article>
<article>
<img src="xs.png" alt="">
</article>
</section> <!-- 尾部 -->
<footer> </footer>
</div> </body>
</html>
最新文章
- SQL 执行进展优化
- QQ空间直播秒开优化实践[读]
- iOS之UIAlertView的使用
- linux基础之Shell Script入门介绍
- Python学习入门基础教程(learning Python)--8.1 字典数据添加与删除
- Unit Tests Tool - <What is “Mock You”> The introduction to moq #Reprinted#
- ASP.NET之Cookie（坑爹的Response.Cookies.Remove）
- oracle查看用户所占用的表空间
- [编织消息框架][netty源码分析]7 Unsafe 实现类NioSocketChannelUnsafe职责与实现
- mysql 列类型以及属性特点
- storm学习笔记（一）
- Pyhton编程（五）之基本数据类型-列表、元组、字典
- Jenkins 随笔
- Vue Router滚动行为 scrollBehavior
- 帝国cms支持的变量及灵动标签变量汇总
- Mybatis-Plus3.0入门手册
- TextView中显示链接 定义颜色
- 【Android】java.lang.RuntimeException: java.lang.Throwable: A WebView method was called on thread 'JavaBridge'.
- Linux下的Nginx部署禅道
- iOS边练边学--UIScrollView和xib文件实现简单分页+定时器初使用