一 盒子模型，在css中盒子包括四个部分，内容物+边框+内边距+外边距
*一个盒子的属性包含：width height border padding margin
1 width和height是表示盒子里内容物的宽度和高度的
2 border是边框的意思，纸盒子的边框
3 padding和margin是内边距和外边距（外边距指的是盒子与盒子之间的距离）
*border属性里包含三个元素:粗细（用px表示） 线条（solid实线） 和颜色
一个盒子模型的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{width: 100px; height: 100px; border:1px solid red;
padding: 10px; margin: 10px;background: aqua;}
/*其中的border和padding和margin都可以通过四个方向控制
例如border(padding或margin)-top
border(padding或margin)-bottom
border(padding或margin)-left
border(padding或margin)-right
*/
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
二 结构标签，用html5来实现网页的布局，这些标签具有语义化
*header页面的头部
*nav是导航栏
*article文章页
*aside侧边栏
*footer是底部（页脚）
写法如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
header{border:1px solid red}
nav{border: 2px solid blue;}
aside{border:3px solid black; }
article{border:4px solid green;}
footer{border: 5px solid yellow;}
</style>
</head>
<body>
<header>头</header>
<nav>导航</nav>
<aside>侧边栏</aside>
<article>文章</article>
<footer>底部</footer>
</body>
</html>
三 新增加的表单标签
Html5中type新的属性值，包含email url number 等等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="xx.php" method="get">
邮箱：<input type="email" /><br />
网址：<input type="url" /><br />
数字: <input type="number" /><br/>
搜索：<input type="search" /><br />
具体日期：<input type="datetime-local" /><br />
日期：<input type="date" /><br />
时间：<input type="time" /><br />
月份：<input type="month" /><br />
星期： <input type="week" /><br />
滑块：<input type="range" /><br />
提交：<input type="submit" value="提交" />
</form>
</body>
</html>
四 音频标签（实在网页中插入一段视频
*音乐标签用audio是一个双标签里面的属性有路径，控制，自动播放，循坏播放
1 audio是一个双标签，用来定义一个声音资源模块
2 controls=controls是控制，调用当前设备自带的播放控制(属性值等于属性值）
3 autoplay=autoplay是自动播放(属性值等于属性值）
4 loop=loop是循环播放(属性值等于属性值）
语法如下
语法一：
5source语法规定的是一个单标签，它里面的src属性是用来定义文件的路径的 |
|
收藏
淘帖
踩
