HTML,CSS

学习主题：html和css
学习目标：
1 掌握html5新增标签的使用
2 掌握css入门
3 掌握css选择器
4 掌握css常用属性
5 掌握css定位
6 掌握css盒子模型

1.HTML5的介绍

(1)HTML的整个发展的历史版本是什么?
html1–>html2–>html3–>html4–>html4.01–>XHTL–>html5

(2)HTML5相比HTML4而言他的优点是什么?
1、去除了HTML4中不常用的标签
2、HTML5新增了一些语义标签
3、功能强大

2.HTML5中的增强表单标签

(1)请问常用的H5的增强表单标签有哪些，请列举?

在这里插入	<form>
			<!--邮件-->
			<p>
				邮件：<input type="email" />
			</p>
			<!--搜索框-->
			<p>
				搜索：<input type="search" />
			</p>
			<!--日期-->
			<p>
				日期：<input type="date" />
			</p>
			<!--数字-->
			<p>
				数字:<input type="number" />
			</p>
			<!--星期-->
			<p>
				星期：<input type="week" />
			</p>
			<!--滑动器-->
			<p>
				滑动器：<input type="range" />
			</p>
			<!--地址-->
			<p>
				地址：<input type="url" />
			</p>
			<p>
				<input type="submit" name="提交" />
				<input type="reset" name="清除" />
			</p>
		</form>代码片

(2)请问 H5中增强表单属性有哪些，请列举?
1、placeholder（文本框中的默认提示）
2、autofocus:自动的获得焦点
3、max:最大值
4、min:最小值
5、minlength:最小长度
6、maxlength:最大长度

3.HTML5中新增结构标签

(1)H5中新增的结构标签的作用是什么?
H5新增的结构标签可以使之前的HTML文档结构定义变得清晰

4.HTML5中音频视频标签

(1)如何书写一个相对完整的音频标签?

<!--音频标签  controls自动播放 -->
		<audio src="img/1.mp3" controls="controls">
			该网页不支持媒体标签
		</audio>
		
		<!--音频播放的其他格式    使用ogg必须在img中含有ogg文件  -->
		<audio>
			<source src="img/1.mp3"></source>
			<source src="img/1.ogg"></source>
			该网页不支持媒体标签
		</audio>

(2)如何书写一个相对完整的视频标签?

	<video src="img/movie.mp4" controls="controls" width="400px" height="400px"></video>
	
	<!--视频的其他播放格式 -->
	<!--<video>
		<source src="img/movie.mp4"></source>
		<source src="img/movie.ogg"></source>
		<source src="img/movie.webm"></source>
	</video>-->

(3)视频标签是如何使用的?

	<video src="img/movie.mp4" controls="controls" width="400px" height="400px"></video>
	
	<!--视频的其他播放格式 -->
	<!--<video>
		<source src="img/movie.mp4"></source>
		<source src="img/movie.ogg"></source>
		<source src="img/movie.webm"></source>
	</video>-->

	<embed src="img/1.mp3"></embed>
	<embed src="img/movie.mp4"></embed>

5.HTML5中绘图和其他标签

(1)details 标签的作用?
相当于下拉框选择（select）标签的作用

(2)刻度标签的是如何使用的?

<!--
    	刻度标签：
    		max:规定的最大值
    		min:规定的最小值
    		value:当前的值
    		low:自己定义的最小值
    		high:自己定义的最大值
    -->
    <meter max="100" min="0" value="30" low="20" high="80"></meter>

6.CSS的入门

(1)简述CSS的作用?
1、HTML虽然可以在一定程度上修饰页面，但是页面的整体还是不够美观。
2、HTML进行网页的书写重复的代码比较多，后期的维护性不好。

(2)CSS使用的载体是什么?
CSS是层叠样式表，又称级联样式表，其载体是HTML

7.引入CSS样式

(1)简述你对就近原则的理解?
在样式中的标签属性一致时，离p标签文字最近的样式执行

(2)请问 CSS的几种引入方式的使用场合分别是什么?
1、行内样式：标签内使用
2、嵌套样式：页面引用
3、外部连接样式：外部引用

8.CSS选择器1

(1)请说出三种常用选择器的使用场景?

/*通用选择器*/
			*{
				color: pink;
			}
			/*元素选择器*/
			div{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
			/*ID选择器     id名称必须唯一
			 	id命名：字母、数字、下划线、中划线，数字不能开头
			 * */
			#div1{
				background-color: paleturquoise;
			}
			/*类选择器*/
			.div_2{
				background-color: palegreen;
			}

(2)常用选择器的优先级是什么？

选择器优先级：ID > 类选择器 > 元素选择器 > 通用选择器

9.CSS选择器2

(1)请说出子选择器和后代选择器的区别
子选择器只会选择直系子标签，而后代选择器只要包含都选择

(2)请说出子选择器和后代选择器的区别
子选择器只会选择直系子标签，而后代选择器只要包含都选择

10.CSS常用属性1

(1)罗列出本节课的常用属性

    字体：      font-size: 10px;
				font-weight: 10px;
	text:       /*文本居中*/
				text-align: center;
				/*去除下划线*/
				text-decoration: none;
				/*展现下划线*/
				text-decoration: underline;
	行高：    /*行高     行高的高度和div外面的高度一致时，内容就会垂直居中*/
				line-height: 40px;

11.CSS常用属性2

(1)罗列出本节课的常用属性
背景：
设置背景图片:
background-image: url(“https://img11.360buyimg.com/da/jfs/t16363/164/2298198848/33213/870500f1/5aa68632Nd7790d0c.png”);

	    /*设置图片不重复*/
		background-repeat: no-repeat;
	    /*图片位置   X  Y*/
		background-position: center;
			
		/*调整图片大小      宽        高*/
	    	/*	background-size: 350px 500px;*/
	    	
	/*图片背景颜色  红色：rgb(255,0,0)  rgba(255,0,0,.5)(包含透明度)*/
			/*background-color: rgba(255,0,0,.5);*/
			background-color: #e93854;	
		}

12.CSS常用属性3

(1)罗列出本节课的常用属性

		/*列表中单元格形式去掉*/
			list-style: none;

			/*左浮*/
			float: left;

			/*内边距*/
			padding: 10px;


            /*透明度*/
			background-color: rgba(250,0,0);
			/*整体透明度*/
			opacity: 0.4;
			
			/*超出隐藏   hidden 隐藏    auto 滑动隐藏  */
			overflow: hidden;

		/*块内元素中不能指定宽高，除非转换成行内元素*/
		.ks{
			width: 100px;
			height: 100px;
			border: 1px solid red;
			/*块内元素转行内元素：block    行内转块内：inline*/
			display:block;
		}

13.CSS中的定位

(1)position 的取值有几个，各自的特性是什么？
1、绝对定位（absolute）定位离开之后之前的位置被释放，基于外层父级的标签移动
2、相对定位（reletive）定位离开之后之前的位置不释放，基于原来的位置移动
3、固定定位（fixed）始终基于浏览器的左上角位置移动，适合做广告
4、默认定位（static）初始位置的定位

14.盒子模型

(1)margin 的作用和可用的值请简述？

/*外边距      垂直方向的外边距会取较大值*/
				margin-bottom: 30px;
		/*外边距       水平方向的外边距会合并值*/
				margin-right: 30px;

(2)padding 和 margin 的特点和特性是什么？

		/*内边距*/
			/*真实div和border之间的距离*/
			/*padding: 50px;*/

			/*上下距离         左右距离*/
			/*padding: 50px 60px;*/

			/*上       右       下         左*/
			 padding: 20px 30px 40px 50px;
							
			/*外边距      垂直方向的外边距会取较大值*/
		     	margin-bottom: 30px;
			/*外边距       水平方向的外边距会合并值*/
			    margin-right: 30px;