H5的知识点梳理

原创 15567555570 随笔 HTML5 1696阅读 2016-10-09 19:33:16 举报

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="b.css" media="screen and (min-width:501px) and (max-width700px)">
</head>
<style>
.div{
width: 200px;
height: 200px;
background-color: black;

}

</style>

<body>

  1. h5新标签
    语义标签:
    <article>定义文章</article>
    <aside>定义文字的侧边栏</aside>

    <figure>定义一组媒体对象以及文字内容</figure>
    <figcaption>定义figur的标题</figcaption>

    布局页面用的语言标签;
    <nav>定义导航</nav>
    <header>头部</header>
    <section>定义文档中的区段</section>
    <footer>尾部</footer>

    input其他的类型:
    1.text: 文本输入框
    2.password 密码
    3.button 按钮
    4.radio 单选框
    5.checkbox 复选框
    6.sumbit 提交
    7.reset 重置
    8.file 文件上传
    9.email 输入邮箱地址 检测@
    10.url URL地址,
    11.number 只能输入数字,还有e
    12.range 范围, 默认0-100

    required 必须填写。
    placeholder 站位符

    功能标签:
    <video src="" autoplay cntrols loop preload> 定义视频</video>
    <audio src="">定义音频</audio>
    <mark>标记</mark>
    <iframe src="" frameborder="0">内嵌网页框架</iframe>
    <canvas>定义图形提供画布</canvas>

    2.流式布局
    即百分比布局。(宽度,高度,边距,rem,定位值)
    尺寸百分比 =目标元素的宽度或者高度 除以 父级的宽高
    定位值的百分比 = 目标元素的定位值 除以 父级的宽高
    margin和padding 除以 父级的宽度

    em, rem
    em:针对父级来设置自身。
    rem:针对html。

    3.媒体查询
    可以根据不同屏幕尺寸,动态的修改网页布局以及样式。是响应式网站不可缺少的一部分
    only可以省略,多个条件用ande相连。
    @media only screen and (min-width:500px)and (max-width:700px){}

    link:
    <link rel="stylesheet" href="b.css" media="screen and (min-width:501px) and (max-width700px)">

    响应式网站:有两种办法完成响应式网站,流式布局和媒体查询。通常情况下,相辅相成。共同完成响应式网站。

    4.前缀
    腾讯:国内唯一有自己内核的公司,X5。(X5d浏览器的内核是基于早起的webkit内核开发出来的,而后自己优化)QQ浏览器,微信。
    -webkit-:谷歌前缀,谷歌内核(360 猎豹 safari)
    -ms-:微软 ie 斯巴达
    -o-:欧朋 (已经摒弃自己的内核,转战谷歌阵营)
    -moz—火狐

    5.css3选择器
    属性选择器:
    a[href]:所有a标签中,带有href属性名的标签。
    a[href="#"]:所有a标签中,href属性值为#的
    a[href~="##"]:所有a标签中,href属性值包含多个词汇,其中有## ,多个词汇用空格相连
    a[href|="##"]:所有a标签中href属性值包含多个单词。 单词用-相连。而第一个单词为##。
    a[href^="##"]:href属性值以##开头
    a[href$="##"]:href属性值以##结尾
    a[href*="##"]:href属性值只要包含##就可以

    同级元素选择器:
    .div1~span:同级元素选择器,选择的是.div1下面的span标签
    .div1+span: 选择的是相邻的元素,.div1相邻的span标签。span必须在下面,而且必须相邻。

    子元素选择器:
    li:nth-child(n){}
    n 从0开始取值

    先找li父级,然后再找父级中子级的(必须是li才能选中)第几个元素
    li:nth-last-child(){}
    找到方式变为从后向前找

    li:first-child{}
    选择li父级中的第一个子级元素,若是li则选中

    li:last-child{}
    最后一个子级元素

    li:first-of-type{}
    选中的是第一个li标签(从所有的li标签中进行选择)

    li:last-of-type{}
    选中的是最后一个li标标签

    li:nth-of-type(){}
    从所有的li标签中进行计算,选中指定标签。

    li:nth-last-of-type(){}
    从所有的li标签中进行计算,。反向选取

    .div>span 子级元素选择器
    .div span 后代元素选择器

    6.transition 过度效果
    让一个元素从一个状态过度到另外一种状态
    transition: prop time;(属性值加时间)
    transition: all 2s;
    transition: width 1s,height 2s, background-color 3s;

    拆开写:
    transition-porperty:设置属性值
    transition-duration:设置过渡时间

    transition-timing-function:过度方式
    transition-delay:延迟
    <!-- ease 先慢 后快 再慢
    ease-in 先慢后快
    ease-out 先快后慢
    linear 匀速
    cubic-bezier(0.54, 0.32, 0.25, 1) 贝塞尔曲线
    -->

    7.2d变换
    所有的变换都是一个属性值:transform 运动
    transform: translate(X,Y)平移,两组值。
    translateX(X),translateY(Y)

            rotate(X,Y)旋转。 deg角度。
            rotateX(X), rotateY(Y)
    
            scale(X, Y)缩放。比例没有单位
            scaleX(X), scaleY(Y)
    
            skew(X,Y) 倾斜。deg 角度。
            skewX(X),skewY(Y)

    transform: translateX(1000px) rotateY(360deg);
    transform-origin: 2d变换的基准点,默认是center center

    8.3d变换
    父级要开启3D模式
    transform-style: perserve-3d;
    透视点:
    perspective: 1000px;
    translateZ(500px);
    rotateZ(180deg);
    变换多组数据时,需要考虑先后顺序,(到底是先旋转还是先平移)

    perspective-origin:透视点的基准原点
    backface—visiable:背面是否可见。 hidden就不可见。

    9.渐变
    线性渐变,径向渐变
    线性渐变:-webkit-linear-gradient(位置,颜色加上百分比)
    多个值用逗号隔开。
    径向渐变:-webkit-radial-gradient(点的位置,颜色百分比,用逗号隔开)

    10.倒影
    <!-- above, below,left, right -->
    -webkit-box-reflect(方向,距离,渐变);
    渐变在倒影应用中,对颜色并不敏感,

    文字阴影: text-shadow: 5px 5px 5px color,
    5px 5px 5px color, 5px 5px 5px color,

    11.动画 keyframes
    @-webkit-keyframes move{
    from{
    transform:translate(0,0);
    }
    to{
    transform: translate(100px, 100px) rotate(360deg);
    }
    }
    给某某元素加动画:
    指定某一动画
    animation-name:"move";
    运动次数
    animation-iteration-count: infinite;
    运动时间间隔
    animation-duration: 2s;
    运动效果
    animation-timing-function: ease;
    运动轨迹
    animation-direction: alternate; 往返运动
    运动状态
    animation-play-state: running; paused
    停留位置
    animation-fill-mode: forwards/backwards/both.
    延迟运动
    animation-delay: 2s;

    复合写法
    animation: "move" 1s 2s infinite ease alternate forwards;

    12.resize:
    属性值,能否重新改变大小。
    resize: both; horizontal 水平的; vertical 垂直的;

    div(BFC) overflow:scroll; 可以改变大小。
    无论怎么改变,不能小于初始设置的值。

    13.word-wrap: break-word; 较长单词碰到边界直接换行

    14.外廓
    外廓不占文本流。不属于盒子的一部分
    outline:1px solid red;
    outline-offset:偏移

    15.服务器端字体
    @font-face {
    font-family:"屌丝体";
    src:"wawa.otf"
    }
    p{
    font-family:"屌丝体";
    }

  2. 分栏布局:
    应用场景: 文章布局,有图片,有文字。
    column-count: 3;
    列与列之间的间距。列间距。
    column-gap: 50px;
    列与列之间的线,分割线
    column-rule:1px solid red;

    17.弹性布局
    要把父级做成弹性盒子
    display: -webkit-box;

    子级元素,占父级元素空闲部分的几份
    -webkit-box-flex: 1;

    排列方式
    horizontal 水平的
    -webkit-box-orient: vertical;垂直的

    排列方向
    -webkit-box-direction: reverse; 相反的

    18.border-image

    19.mask 蒙版
    <div></div>
    </body>
    </html>

评论 ( 2 )
最新评论
18323947911 2016-10-10 09:45:59 2F

提交是submit,看看单词

零点灬零点 2016-10-10 08:46:14 1F

css3 怎么给一个元素多个关键帧动画呢