HTML5+CSS3(五)-全面详解（学习总结---从入门到深化）
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
目录
容器元素div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<style>
.container{
width: 1400px;
margin: 0 auto;
}
.header{
height:80px;
background-color:#abcdef;
}
.nav{
margin-top:10px;
height:80px;
background-color:#abcdef;
}
.main{
height: 600px;
margin-top:10px;
}
.main .left{
float: left;
width: 900px;
height: 600px;
background-color:#abcdef;
}
.main .right{
float: right;
width: 480px;
height: 600px;
background-color:#abcdef;
}
.footer{
height: 80px;
margin-top:10px;
background-color:#abcdef;
}
</style>
</head>
<body>
<div class="container">
<div class="header">网站头部</div>
<div class="nav">网站导航</div>
<div class="main">
<div class="left">网站主要内容</div>
<div class="right">网站右侧模块</div>
</div>
<div class="footer">网站底部</div>
</div>
</body>
</html>学习效果反馈
1.关于 <div> 标签描述错误的是
<div> 主要用来在页面中显示图片
HTML5新增布局标签
HTML5 是 HTML 最新的修订版本2014年10月由万维网联盟 W3C 完
成标准制定
在 HTML5 出现之前我们一般采用 DIV+CSS 布局我们的页面。但是这样
的布局方式不仅使我们的文档结构不够清晰而且不利于搜索引擎
爬虫对我们页面的爬取。为了解决上述缺点 HTML5 新增了很多新的
语义化标签div+css实现
H5新标签实现
H5新标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<style>
header {
height: 150px;
background-color: #abcdef;
}
div {
margin-top: 10px;
height: 300px;
}
section {
height: 300px;
background-color: #abcdef;
width: 70%;
float: left;
}
article {
background-color: #F33;
width: 500px;
text-align: center;
margin: 0px auto;
}
aside {
height: 300px;
background-color: #abcdef;
width: 28%;
float: right;
}
footer {
height: 100px;
background-color: #abcdef;
clear: both;
margin-top: 10px;
}
</style>
</head>
<body>
<header>定义一个页面或是区域的头部</header>
<div>
<section>定义一个区域</section>
<aside>定义页面内容的侧边框部分</aside>
</div>
<footer>定义一个页面或是区域的底部</footer>
</body>
</html>学习效果反馈
1.下列哪个不属于HTML5的新增标签:
<div></div>
视频和音频
HTML5未出来之前在线的音频和视频都是借助Flash或者第三方 工具实现的现在HTML5也支持了这方面的功能。在一个支持 HTML5的浏览器中不需要安装任何插件就能播放音频和视频。
视频
Video标签定义视频比如电影片段或其他视频流
<video src="movie.mp4" controls>
您的浏览器不支持 video 标签。
</video>
音频
Audio 标签定义声音比如音乐或其他音频流
<audio src="someaudio.mp3">
您的浏览器不支持 audio 标签。
</audio>
source
<source> 标签为媒介元素比如 <video> 和 <audio> 定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒
体类型或者编解码器的支持进行选择<audio controls>
<source src="horse.ogg" >
<source src="horse.mp3" >
Your browser does not support the audio element.
</audio>
学习效果反馈
1.下列哪个属性可以实现视频与音频网页加载自动播放: autoplay
HTML5新增标签
figure
用于对元素进行组合。多用于图片与图片描述组合
<figure>
<img src="img.gif" alt="figure标签" title="figure标签" />
<figcaption>figure的标题</figcaption>
</figure>details
<details> 用于描述文档或文档的某个部分的细节类似于下拉列表<details>
<summary>指定的标题用户点击标题时展示下面的所有内容内容可以是任何形式的内容</summary>
<div>
<p>内容描述</p>
</div>
</details>
<!-- 当增设open属性时描述内容默认展示 -->
<details open>
<summary>指定的标题用户点击标题时展示下面的所有内容内容可以是任何形式的内容</summary>
<div>
<p>内容描述</p>
</div>
</details>mark
主要用来在视觉上向用户呈现那些需要突出的文字。 <mark> 标签的
一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词<p>你是<mark>大长腿</mark>吗？</p>meter
定义度量衡。仅用于已知最大和最小值的度量
<meter min="0" max="100" value="81" low="20" high="80"></meter>
progress
运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的
函数的进程<progress max="100" value="20"></progress>
datalist
定义可选数据的列表。与 input 元素配合使用就可以制作出输入值的下拉列表。
datalist 及其选项不会被显示出来它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>canvas
定义图形比如图表和其他图像
学习效果反馈
1.下列 details 标签描述中正确的是哪一个
用于描述文档或文档的某个部分的细节类似于下拉列表