黑马程序员技术交流社区

标题: 技术总结 [打印本页]

作者: 王雪山 时间: 2019-7-19 18:52
标题: 技术总结
学习总结

一HTML和盒子的一些属性
在学习的盒子模型中，在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">
</style>
</head>
<body>
</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类型
邮箱：<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="提交" />
普通按钮：<input type=”bottom” value=”按钮”>
重置按钮：<input type=”reset” value=”重置”
                     </form>
</body>
</html>

四  音频标签

（实在网页中插入一段视频
*音乐标签用audio是一个双标签里面的属性有路径，控制，自动播放，循坏播放
1 audio是一个双标签，用来定义一个声音资源模块
2 controls=controls是控制，调用当前设备自带的播放控制(属性值等于属性值）
3 autoplay=autoplay是自动播放(属性值等于属性值）
4 loop=loop是循环播放(属性值等于属性值）

五视频标签
*视频标签用vedio是一个双标签里面的属性有路径，控制，自动播放，循坏播放
1 vedio是一个双标签，用来定义一个声音资源模块
2 controls=controls是控制，调用当前设备自带的播放控制(属性值等于属性值）
3 autoplay=autoplay是自动播放(属性值等于属性值）
4 loop=loop是循环播放(属性值等于属性值）

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2