html5css3上机练习题 html5 css3教程

一.HTML5

新增语义化标签

<header>头部</header>
			<nav>导航</nav>
			<article>内容
			<aside>侧边栏</aside>
			</article>
			<section>块级</section>
			<footer>底部</footer>

新增音频audio

<audio >
</audio>

属性

autoplay加载完毕马上播放属性（chrome不支持）
contro添加l控制台属性
loop重复循环播放属性
src添加源
source单标签，添加多个备用文件，提高兼容性,里面的type填格式

<audio controls="controls">
			<!-- source是一个单标签 -->
			<source src="../assets/伍佰%20-%20爱你越来越多.ogg" type="audio/ogg"> 
			<source src="../assets/伍佰%20-%20爱你越来越多.mp3" type="audio/mpeg" >
		</audio>

新增视频video

<video >
</video>

属性

autoplay加载完毕马上播放属性（chrome不支持,谷歌浏览器必须静音才能自动播放）
contro添加l控制台属性
loop重复循环播放属性
src添加源
muted静音播放
poster加载等待时的图片

<video controls="controls" autoplay="autoplay" muted="muted" poster="../assets/a.jpg"  width="800" height="">
			<source src="../assets/小米广告.mp4" type="video/mp4"></source>
		</video>

新增表单元素

可自动进行简单验证

<form action="" >
			
			邮箱：<input type="email" value=""/>
			网址：<input type="url" />
			日期：<input type="date" />
			日期：<input type="time" />
			手机号：<input type="tel" />
			搜索：<input type="search" />
			颜色：<input type="color" />
			<input type="submit" name="" id="" value="提交" />
		</form>

新增表单属性

required不能为空属性
placeholder提示文本
autofocus自动聚焦
autocomplete on/off决定是否记录用户搜索内容
multiple选择多个文件

<form action="" >
 		<input type="text" autocomplete="on" required="required" autofocus="autofocus" placeholder="亲输入" />
 		<input type="submit" value="提交"/><br>
 		上传头像<input type="file" multiple="multiple"/>
 	</form>

二.CSS3

选择器

属性选择器
伪类选择器
伪元素选择器

属性选择器

用元素[ 属性名或值]{
}

选择属性名

css部分

button[disabled]
			{
				/* cursor决定光标样式 */
				cursor: default;
			}

html部分

<!--   disabled="disabled"禁用按钮  -->
		<button type="button" disabled>按钮</button>

选择属性值

css部分

input[type='search']
				{
					color: red;
				}

html部分

<input type="search"  value="文本"/>

选择属性部分过滤

三个符号
^选择开头
$选择结尾
*任意位置

css部分
/* 选择开头为abc */
				div[class^="abc"]{
					color: aqua;
				}
				/* 选择结尾为4 */
				div[class$="4"]{
					color: blue;
				}
				/* 选择位置不限 */
				div[class*="abc"]{
					color: blue;
				}

html部分

<div class="abc1">我是</div>
		<div class="abc2">我是</div>
		<div class="abc3">我是</div>
		<div class="dabc4">我是</div>

伪类选择器

元素或属性后跟 : 单冒号
eg：
选择第一个元素和最后一个
css部分

ul	li:first-child{
				color: #FF0000;
				}
				/* 选择最后一个 */
		ul	li:last-child{
					color: #0000FF;
					}

html部分

<ul>
			<li>你好</li>
			<li>你好</li>
			<li>你好</li>
			<li>你好</li>
			<li>你好</li>
			<li>你好</li>
			<li>你好</li>
		</ul>

选择任意元素
css部分（html同上）

/* 匹配第三个 */
			ul	li:nth-child(3){
						color: #00FFFF;
				}
				/* 选择奇数  2n+1等价于odd*/
			ul	li:nth-child(2n+1){
					color: #00FFFF;
				}
				/* 选择偶数2n等价于even */
				ul li:nth-child(2n){
					color: #FF0000;
				}

指定元素类型
指定某个父元素下面的子元素们进行选择

css部分

div span:last-of-type{
				color: #0000FF;
			}
			div span:nth-of-type(2n){
				color: #FF0000;
			}

html部分

<div id="">
			<p>我是p</p>
			<span id="">我是span1</span>
			<span id="">我是span2</span>
			<span id="">我是span3</span>
			<span id="">我是span4</span>
		</div>

伪元素选择器

伪元素选择器有before 和after
before将内容插到前面 after将元素插到后面
before和after创建的是行内元素
创建的权重为1
必须有content

css部分

div{
				border:solid 1px #0000FF ;
				width: 200px;
				height: 200px;
				}
				div::before{
					content: "我";
				}
				div::after{
					content: "程序员";
					
				}

html部分

<div id="">
			是
		</div>

动画2D转换（transform）

2D转换分为移动（ translate），旋转（rotate），缩放（scale）

2D转换移动用法

transform: translate（x,y）移动盒子，不影响其他元素

两个参数可以是x，y坐标轴，也可以是百分比%（百分对比自身宽高移动）

采用如下坐标轴

css部分

div:first-child{
				background-color: #0000FF;
				width: 200px;
				height: 200px;
				transform: translate(10px,20px);
			}
			div:nth-child(2){
				background-color: #FF0000;
				width: 200px;
				height: 200px;
				/* %对比自身移动 */
				transform: translate(50%,50%);
			}

html部分

<div>	
		</div>
		<div>
		</div>

动画

基本使用

定义动画

使用
@keyframes 空格 自定义动画名字{

}

@keyframes move{
					0%{
						transform: translateX(0px);
					}
					100%{transform: translateX(100px);}
				}

挂载动画

补充中…
补充中…
补充中…