html5+css3

初始化

        * { 
            font-family: Arial; 
            font-size: 14px; 
            margin: 0; 
            padding: 0; 
            border: none; 
        }
        a { text-decoration: none; }
        ul { list-style: none; }
        //这里表示这是页面大小为视口大小
        html,body {
            width: 100%;
            height: 100%;
        }

height：cacle（100vh-xxpx)；表示获取窗口的大小减去xxpx大小，那么就能得到高度。

trasnsition:0.2s linear；表示这个盒子有一个过渡

HTML5

状态标签： 当然能设置宽高

        电池电量 <meter max="100" min="0" value="90" low="20" high="80" optimum="90"></meter>      high和low一个区间是一种颜色（正常值），高于high和低于low是其他颜色，optimum="90"表示最佳值，所以high到max是一个正常值了

         进度<progress max="100" value="50%"></progress> min默认为0

    <span>电池电量</span>
    <meter max="100" min="0" value="80" low="10" high="20" optimum="90"></meter>
    <span>进度条</span>
    <progress max="100" value="50"></progress>

列表标签：

        datalist和details--点一下会有提示（可选项）一样

<!-- list="mydata" 相当于是绑定 -->
    <form action="#">
        <input type="text" list="mydata">
        <button>搜索</button>
    </form>
    <datalist id="mydata">
        <!-- option就是可选项,这些可选项会出现到搜索输入框中 -->
        <option value="周杰伦">周杰伦</option>
        <option value="周冬雨">周冬雨</option>
        <option value="马冬梅">马冬梅</option>
        <option value="温兆伦">温兆伦</option>
    </datalist>
    <hr>
    <details>
        <summary>分析如何写论文</summary>
        <p>你可以这样这样写……</p>
    </details>

文本标签：

        <ruby> <span>魑</span><rt>chi</rt></ruby>  ruby表示给文本加拼音

        <mark>你好</mark>  mark表示给文字作重

表单控件属性：

        required表示该标签必须填值才能执行下面的操作；autofocus表示打开就在该标签上出现焦点；autocomplete=“on”表示输入的历史记录（要在浏览器上开启才能成功）；pattern表示正则表达式的书写。

表单type属性值：

        type="email"表示输入框必须是邮箱， type="url"表示输入的必须是url地址， type="number"表示输入的必须是数值， type="search"表示输入的是搜索（多了一个删除）， type="range"表示范围（滑动-如亮度）， type="color"表示选择一种颜色， type="date"表示选择一个日期，type="time"表示选择一个时间，novalidate加在form表单上表示不再进行语义检查。

视频标签

        <video src="" width="600" controls></video>一般只调一个，controls表示能控制播放等信息，muted表示禁音，autoplay表示自动播放（只有禁音的时候才能自动播放），loop表示循环播放，poster=“”表示视频的封面“”里面的路径

音频标签

        <audio  src=""></audio>很多属性和video是很相似的 

CSS3

私有前缀--表示有一些特性浏览器不一定想支持，加上这个前缀相当于是试用→-webkit-

长度单位：vw表示视口宽度的百分比，vh表示视口高度的百分比

盒子属性：

        box-sizing：border-box表示width等属性表示的就是整个盒子的大小，padding和border等都          算上了。

        box-shadow：xxx

        opacity：xxx表示给盒子添加透明度

背景属性

        background-origin：默认图片的原点是从盒子的padding的左上角开始的，通过使用content-box则表示从盒子的内容区域为起始点。

         background-clip：border-box默认就是边框以外的背景图不显示，padding-box表示边框上的背景图也不显示，content-box表示超过内容的背景就不显示了，-webkit-background-clip：text表示图片只在文字上显示，但是文字要改为color：transparent透明色。

        background-size：用于调整背景的大小，contain表示盒子的大小包含这个图片，按等比例缩放，如果盒子不合适图片的话，那么图片就会重复。cover表示高适应宽截断，这个是最好的。

        多背景图就是说在background设置多个url，然后对每个url使用不同是background-position。

文本属性

        text-shadow：0px,0px,15px,black表示就是文本阴影，前面两个参数表示水平垂直，后面一个表示模糊的距离，最好一个表示阴影的颜色。

        white-space：pre表示按原文显示，pre-wrap表示按原文显示但是内容过多就换行，nowrap表示强制不换行。white-space和text-overflow是配合使用的

        text-overflow：ellipsis表示超出文本的内容就用“……”表示，但是要配合使用overflow：hidden和white-space：nowrap一起使用。

 渐变

        线性渐变：默认从上到下background-image：linear-gradient（red，green，……），第一个位置使用to right表示方向是从左到右。

        径向渐变：background-image：radial-gradient（）一些参数和上面的线性渐变一样的。

        重复渐变：必须建立在上面两个渐变的基础上，repeating-linear-gradient。

字体

        web字体：@font-face{font-family：“”,src:url()};font-family用于起名字，url用于引入文件地址

        字体图标：方案二的在线使用和方案二的本地使用在案例中比较多。

2D

        位移：transform：translateY（50px）表示向下移动50个像素，但是不会脱离文档流，对行内元素无效。

        缩放：transform：scaleX（1.5）表示往x方向两边放大1.5倍，小于1表示缩小，对行内元素无效。

        旋转：

伸缩盒模型

这些属性都是写到父类上，并且都是设置主轴的：

        display：flex。父类给伸缩，伸缩容器里面的所有子元素就是伸缩项目，此时子元素变成了块级元素同时进行水平布局

        flex-direction：表示修改布局的主轴侧轴的方向

        flex-wrap：wrap表示当同一行的内容过多的时候使用这个属性就能换行否则不会换行

        justify-content：center或者space-between表示主轴的对齐方式，默认是从主轴的起始位置

这些属性都是写到父类上，并且都是设置侧轴是：

        align-items：center表示侧轴单行对齐方式，默认是拉伸到整个父容器，前提是子元素没宽高

        align-content:center表示侧轴多行对其方式，最高的元素为本行的高度，不给高度默认会拉伸

设置水平垂直居中

        display：flex， justify-content：center，align-items：center就能实现水平垂直居中

        display：flex，margin：auto就能实现水平垂直居中

属性写到子类上

        flex-basis:300px；表示能修改主轴上宽或者高改为300px，这样原来设置的宽高就失效了。

        flex-grow：1；表示盒子的宽会把空余的空间加上，数字表示的是控制比例

        flex-shrink：1；表示当父盒子宽度变窄的时候，子元素会压缩自己的宽度

        flex：1；表示上面三个属性的缩写，其中grow=1 shrink=1 basis=auto

        order：x；表示子元素盒子的顺序为多少，数值越小越靠前，默认为0

响应式