一 盒子模型,在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属性是用来定义文件的路径的
<audio cont
推荐了解热门学科
传智播客是一家致力于培养高素质软件开发人才的科技公司,“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来,教学研发团队一直致力于打造精品课程资源,不断在产、学、研3个层面创新自己的执教理念与教学方针,并集中“黑马程序员”的优势力量,针对性地出版了计算机系列教材50多册,制作教学视频数+套,发表各类技术文章数百篇。
传智播客从未停止思考
传智播客副总裁毕向东在2019IT培训行业变革大会提到,“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员,具备多领域、多行业项目经验的人才成为企业用人的首选。”
中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示,“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验,从而多出了更多的项目经验。“为此,传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家,集中研发面向中高级程序员的课程,用以满足企业用人需求,尽快补全IT行业所需的人才缺口。
何为中高级程序员课程?
传智播客进行了定义。中高级程序员课程,是在当前主流的初级程序员课程的基础上,增加多领域多行业的含金量项目,从技术的广度和深度上进行拓展。“我们希望用5年的时间,打造上百个高含金量的项目,覆盖主流的32个行业。”传智播客课程研发总监于洋表示。
黑马程序员热门视频教程