HTMl5和CSS3基础使用

HTML5

语义化标签

<header></header>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<footer></footer>

视频标签

<video src="" controls=""></video>
<!-- 属性
autoplay autoplay 是否自动播放
controls controls 是否显示控件
width 宽
height 高
loop loop 是否循环播放
preload auto | none 是否预加载视频
src url 视频地址
poster imgurl 加载等待的画面图片
muted muted 是否静音
-->

音频标签

<audio></audio>
<!--
autoplay autoplay 自动播放
controls controls 显示控件
loop loop 循环播放
src url 文件地址
谷歌浏览器禁止了自动播放
-->

input标签

<!-- 输入为Email类型 -->
<input type="email">
<!-- url -->
<input type="url">
<!-- 日期 -->
<input type="date">
<!-- 时间 -->
<input type="time">
<!-- 月 -->
<input type="month">
<!-- 周-->
<input type="week">
<!--数字 -->
<input type="number">
<!--电话号码 -->
<input type="tel">
<!-- 搜索框-->
<input type="search">
<!--颜色选择表单 -->
<input type="color">

表单属性

required required 表单内容不能为空
placeholder text 提示信息
autofocus autofocus  自动聚焦
autocomplete off/on 是否显示之前已经输入过的值
multiple mutiple 可以多选文件提交

CSS3

新增属性选择器

<style>
        input[value]{
            /* 具有value属性的标签 */
        }
        input[value="hello"]{
            /* 属性值为hello的标签 */
        }
        input[value^="hel"]{
            /* 属性值以hel开头的属性 */
        }
        input[value$="lo"]{
            /* 属性值以lo结尾的属性 */
        }
        input[value*="l"]{
            /* 属性值包含l的属性 */
        }
</style>

新增伪类选择器

    <style>
        input:first-child {
            /* 匹配父元素input中的第一个子元素 */
        }
        input:last-child {
            /* 匹配父元素input中的最后一个元素 */
        }
        input:nth-child(n) {
            /* 匹配父元素input的第n个子元素 */
        }
        input:first-of-type {
            /* 指定类型的第一个 */
        }
        input:last-of-type {
            /* 指定类型的最后一个 */
        }
        input:nth-of-type(n) {
            /* 指定类型的第n个 */
        }
    </style>

新增伪元素选择器

<style>
        input::before{

        }
        input::after{
            
        }
</style>

滤镜filter

<style>
        div {
            /* blur 模糊处理 数值越大越模糊 */
            /* filter: 函数() */
            filter: blur(5px);
        }
</style>

Calc函数

在声明CSS属性值时执行一些计算

div {
	/* 100% 表示父盒子的大小 */
	width: calc(100% - 80px);
}

过渡

div:hover {
	width: 100px;
	height: 200px;
}
div {
	/* transition: 要过渡的属性 花费时间 运动曲线 何时开始 */
	/* 运动曲线 默认ease 何时开始 默认0s 单位s 花费时间 s 属性 高度 宽度 颜色 内外边距 */
	transition: width 0.5s ease 1s , height 0.5s ease 1s;
 }

2D转换

    <style>
        div {
            /* x：在x轴上移动位置 y：在y轴上移动位置 */
            transform: translate(x, y);
            /* 等价于translate(x,y) */
            transform: translateX(x);
            transform: translateY(y);
            /* 旋转 deg 度数*/
            transform: rotate(45deg);
            /* 设置转换中心点 */
            transform-origin: x y;
            /* 缩放 scale */
            transform: scale(x,y);
            /* 复合写法 translate rotate scale */
        }
    </style>

动画

 <style>
        /* @keyframes 动画名称 0% 动画开始 100%动画结束
                0%{
                    width: 100px;
                }
                100%{
                    width: 200px;
                }
        */
        @keyframes move{
            0% {
                width: 100px;
            }
            100% {
                width: 200px;
            }
        }
        /* 调用动画 */
        div {
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
        /* 动画序列 */
        @keyframes move{
            /* 等价于0%-100% */
            from {
                transform: translate(0,0);
            }
            to{
                transform: translate(1000px,0);
            }
        }
        @keyframes move{
            0% {
                transform: translate(0,0);
            }
            25% {
                transform: translate(250,0);
            }
            50% {
                transform: translate(500,0);
            }
            75% {
                transform: translate(750,0);
            }
            100% {
                transform: translate(1000px,0);
            }
        }
        div{
            animation-name: move;
            animation-duration: 2s;
        }
        /*简写  */
        div{
            animation: name duration timing-function delay iteration-count direction fill-mode;
        }
    </style>

3D转换

   <style>
        div {
            transform: translate3d();
            transform: translateX() translateY() translateZ();
        }
        /* 透视 */
        /* 透视写到被观察元素的父盒子身上 */
        div {
            perspective: 100px;
        }
        /* 3D旋转 */
        div{
            transform: rotate3d();
            transform: rotateX() rotateY() rotateZ();
        }
    </style>