HTML5+CSS3及flex布局学习笔记

HTML5 它与HTML4又有哪些区别?

HTML5常用的语义化和结构元素

结构元素

布局1布局2

其他元素

<!--100行代码演示本节内容-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            width: 1200px;
            margin: 0 auto;
        }
        header img {
            display:inline-block;/* 行内块级元素 */
            width: 200px;
            vertical-align: middle;/* 文档格式内容: 居中 */
        }
        header nav {
            display: inline-block;
            margin-left: 100px;
        }
        article {
            float: left;
            width: 780px;
            border: 1px solid #000;
        }
        aside {
            float: right;
            width: 400px;
            border: 1px solid #000;
        }
        main {
            overflow: hidden;/* 消除浮动 */
        }
        footer {
            text-align: center;
        }
        embed {
            display: inline-block;
            vertical-align: middle;
            width: 200px;
        }
    </style>
</head>

<body>
    <header>
        <img src="./img/小滴logo.png" alt="logo">
        <nav>
            <a href="">html5</a>
            <a href="">css3</a>
            <a href="">js</a>
        </nav>
    </header>
    <main>
        <article>
            <h1>html5+css3</h1>
            <p>html5+css3讲解</p>
            <section>
                <h4>html5</h4>
                <p>html5是html的最新版本......</p>
            </section>
            <section>
                <h4>css3</h4>
                <p>css3新特性......</p>
            </section>
        </article>
        <aside>
            <h1>html5结构元素</h1>
            <p>header、footer、section....</p>
            <nav>
                <ul>
                    <li><a href="">html5</a></li>
                </ul>
                <ul>
                    <li><a href="">css3</a></li>
                </ul>
                <ul>
                    <li><a href="">js</a></li>
                </ul>
            </nav>
        </aside>
    </main>
    <footer>
        <p>Copyright ©2019 小滴课堂</p>
    </footer>
    <!-- 演示ruby和rb,rt  progress  mark  embed -->
    <ruby>
        小<rp>(</rp><rt>xiao</rt><rp>)</rp>
        滴<rp>(</rp><rt>di</rt><rp>)</rp>
    </ruby>
    <!-- 当浏览器支持ruby标签时, 会以加注拼音的方式展示此内容,
         当不支持ruby时, 显示:  小 (xiao) 滴 (di)  -->
    <progress max="100" value="50"></progress>
    <p><mark>html5</mark>是html的最新版本</p>
    <embed src="./img/小滴logo.png" type=""><!-- 可嵌入  图片  gif  音视频  插件等 -->
</body>

</html>

HTML5图形绘画标签canvas

HTML5矢量图形SVG

HTML5媒体播放常用标签

<!-- 友好提示处理 -->
    <audio controls>
        <source src="hourse.ogg" type="audio/ogg">
        <source src="./assets/2.mp3" type="audio/mpeg">
        您的浏览器不支持audio元素
    </audio>

HTML5新增input类型

<!-- 示例 -->
<input type="range">
<!-- 部分属性需在提交时才触发验证  url  email -->
<form action="">
        <input type="url" name="url">
        <input type="submit" value="提交">
</form>

HTML5常用的表单属性

部分正则表达式—我使用过的

HTML5必备知识点之Web本地存储

CSS3新增选择器

<style>
        h1~p {
            color: red;
        }
</style>
<!-- 将两个p元素文本设为红色 -->
<body>
    <div>
        <h1>hh</h1>
        <p>ssss</p>
        <p>ssss</p>
    </div>
</body>

<style>
        div[class^="test"] {
            background-color: blue;
        }
</style>
<!-- 更改.test111的背景色 -->
<body>
    <div class="test1111">
        <h1>hh</h1>
        <p>ssss</p>
        <p>ssss</p>
    </div>
</body>

    <style>
        input:optional {
            border: 1px solid yellow;
        }
        input:required {
            border: 1px solid blue;
        }
    </style>
<body>
    <form action="">
        <input type="text">用户名
        <input type="text" readonly>密码
    </form>
</body>

CSS3新增的用户界面属性

<!--示例-->
<style>
        #resize {
            resize: both;
        }
        #resize2 {
            border: 1px solid red;
            resize: both;
            overflow: auto;/* div使用resize需设置border和overflow */
        }
</style>
<body>
    <textarea id="resize" cols="30" rows="10"></textarea>
    <div id="resize2">1111</div>
</body>

<style>
        .box {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            margin: 100px;
            border: 1px solid #000;
            padding: 10px;
            outline: 2px solid red;
            outline-offset: 10px;
        }
    </style>
<body>
    <div class="box"></div>
</body>

CSS3常用样式属性之边框与盒阴影

图形切割法之九空格

<style>
        .borderImg {
            width: 300px;
            height: 200px;
            border: 15px solid transparent;/* 要设置阴影大小且颜色为透明才能看到图片边框 */
            /* 这里用到的图片尺寸是81*81 为了将每个小菱形切开,切割大小设为27 */
            border-image: url(./img/border.png)  27 27 27 27 round;
        }
        
</style>
<body>
    <div class="borderImg">css3图片边框borderImg</div>
</body>
原图 repeat stretch round
border 图片边框2 图片边框3 图片边框1

CSS3背景新特性及精灵图片的使用

CSS3渐变背景

deg

​ 3. 重复的线性渐变: repeating-linear-gradient()

​ background: repeating-linear-gradient(45deg, yellow,red 10%,blue 20%)

​ repeating-linear

CSS3文本效果及特殊字体引入

CSS3的多列布局

设备兼容必备知识之多媒体查询

CSS3之2D转换动画效果

​ transform属性下的函数

3D转换动画效果

CSS3之过渡实用技巧

css过渡是元素从一种样式逐渐改变为另一种的效果.

语法:

transition: property duration timing-function delay;
值 描述
transition-property 指定css属性的name.(比如,width,height) 即指明了为哪些属性生成过渡效果
transition-duration transition效果需要指定多少秒或毫秒完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时间(即延时)

案例

.test{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -webkit-transition:width 2s;
}
test:hover{
    width:200px;
}

CSS3之动画特效技能

值 描述
none 默认值, 动画在执行前后不会应用动画中的任何样式到目标元素
forwards 在动画结束后(由animation-iteration-count决定), 动画结束时的样式将应用到目标元素
backwards 动画将应用在animation-delay定义期间启动动画的第一次迭代的关键帧中定义的属性值. 这些都是from关键帧中的值 (当animation-direction 为”normal”或”alternate”时) 或to关键帧中的值 (当animation-direction为”reverse”或”alternate-reverse”时).
both 动画同时遵循forwards和backwards的规则. 也就是说, 动画会在两个方向上扩展动画属性.

前端核心知识点之flex弹性布局

flex布局容器六大属性之flex-direction

flex-row-reverse

flex-columnflex-column-reverse

flex布局容器六大属性之flex-wrap和flex-flow

<!--示例代码-->
<style>
        .flexTest {
            display: flex;
            width: 300px;
            flex-wrap: nowrap;
        }
    /*因为指定了父容器宽度, 当所有子容器的宽度超出父容器宽度时, 子容器宽度会被改变以适配父容器(即设置的子容器宽度可能会失效),如下表*/
        .item {
            width: 100px;
            height: 100px;
            margin: 10px;
            background: #c3c3c3;
        }
    </style>
<body>
    <div class="flexTest">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</body>

flex布局容器六大属性之justify-content—做水平居中

flex布局容器六大属性之align-items—做垂直居中

flex布局容器六大属性之align-content

flex布局项目六大属性之order和flex-grow

flex布局项目六大属性之flex-shrink

flex布局项目六大属性之flex-basis和flex

  .item{
      flex-basis:<length> | auto;
  }

flex布局项目六大属性之align-self

伪类

/* 运用伪类添加一个 ￥ */
/* 相当于在.strong的前面添加了一个div */
.guessItem .price .strong::before {
    /* 添加的内容 */
    content: '\A5';
    /* 为添加的内容设置样式 */
    font-size: 14px;
    color: #ff0000;
    margin-right: 3px;
}
/* 同样的, 除了before还有after */

HTML5和CSS3常用知识总结