讲课011

调背景图片大小：background-size: 20px auto;   【横向20，纵向自适应】       【忘记了】

加浮动，拉动屏幕掉下来，就把外边框+最小宽度

搞东西，别想太复杂，用简单的搞一下（看能不能搞出来，再往复杂走）

搞边框形成的三角形：【标签名】{   width: 0;   height: 0;

           border: 【长度】 solid transparent;            【边框方向】:【长度】 solid 【颜色】;        }

不能加宽高的标签，转块元素或者加弹性盒子,

列子：div{            width: 0;            height: 0;            border: 30px solid transparent;

            border-left: 30px solid darkcyan;        }                        【向下的三角】

H5

双标签,写的不加后面的标签，浏览器会自己加 【越进化，东西越简单】

p，li，dt，dd，th，tr，thead，tfoot

可以完全省略的标签【浏览器会自己加】：                html,head,tbody...

感觉没啥用，少了丑，还要记，有问题还要找回去

这有点忒散了，用的时候是孰能生巧吗？        【是，想到啥用啥】

命名规范，跑路（跳槽）方便

命名规范名字【在body里面加，对应名字会有对应大小，都是块标签】：

头部:        <header></header>                                 尾部：        <footer></footer>

主体：        <section></section>                             主要显示的区域：        <main>   </main>

导航：        <nav></nav>                                        侧边栏区域：        <aside></aside>

独立的文章区域：        <article></article>

独立文档流区域：        <figure></figure>

独立的文档区域的标题：        <figcaption></figcaption>

音视频控件

音频：<audio src="【路径】" controls></audio>                        【controls:控件】

视频：<video src="【路径】"  controls></video>

添加loop:搞循环播放                                                加muted：静音效果

autoplay:自动播放更抽风似的，在音视频都没啥用

表单新属性(会用就行)

试色器：<input type="color">                               拨号盘（在移动端显示）：<input type="tel">

滑块： <input type="range" min="0" max="700px" step="10"/>

数值：<input type="number" min="10" max="400" step="20"/>

滑块、数值：可加（可不加）min、max、step、value（当前值）

搜索：<input type="serch">                                     日期：<input type="date">
月：<input type="month">                                        周：<input type="week">
时间：<input type="time">                                       本地时间“<input type="datetime-local">

实现输入数据提交：输入的框后面接一个提交按钮

邮箱：<input type="email"/>                                       +multiple，实现多邮箱输入【用英文,隔开】

格式必须是邮箱格式：@qq.com、@163.com                     【格式不对，会出现提示】

网页：<input type="url" >

格式是http://、 https://、【储存地址】，输入不完整会有提示。     

（储存地址列子：D:\第一阶段\day12\day12）      

邮箱和网页都可以空的时候跳过验证，用required解决为空跳过，（空时提交报错）

搞事玩：+autocomplete="on"                        【+到输入框里面开启输入记录，默认不开】

正则表达式（搞范围，让范围内的通过）【js里面细讲】：    用pattern限定

列子：<input type="text" pattern="[0-9（范围）]{5（几个值）}[a-p]{2}">

下拉菜单

下拉菜单 select         option与datalist        option区别:

<form action="">     <select name="" id="">

            <option value="华南">华南</option>                 <option value="华北">华北</option>

            <option value="东华">东华</option>                <option value="华中">华中</option>

        </select>        <input type="submit">          </form>

 <form action="">                <input type="text" list="di">        <input type="submit">

        <datalist id="di">

            <option value="北京">北京</option>                <option value="北平">北平</option>

            <option value="北方">北方</option>                 <option value="海洋">海洋</option>

            <option value="海上">海上</option>          </datalist>                </form>

 

 select    option：【能选的直接出】，    datalist  option像购物的输入框【写一个，引相同词的】

并且datalist  option要链接输入框，输入框+【list="（名字）di"】     datalist+id="（名字）di"

让用户更快输入：autofocus【自动获取焦点】           

 多个输入框写autofocus，前面有autofocus的有焦点

这一局服气我自己，会不会一点顺序都没有（那点不懂的点都不清楚）。

CSS3新增的选择器

下面属性值的单、双引号都可

（1）属性选择器

[【属性】]{      【样式】 }                                选带有【属性】的

[【属性】="【属性值】"]{      【样式】 }                   选带有【属性】+【属性值】的

【标签】[【属性】]{      【样式】 }                             选带【标签】+【属性】的

【标签】[【属性】="【属性值】"]{      【样式】 }            选带有【标签】【属性】+【属性值】的

属性：class、type这种，标签：p、span、div这种

（2）属性选择器扩展

《1》查找带有对应属性并且属性值以所定名字开头的的元素：

[【属性】^='【所定名字】']{      【样式】 }

《2》查找带有对应属性并且属性值以所定名字结尾的的元素：

[【属性】$='【所定名字】']{      【样式】 }

《3》查找带有对应属性并且属性值包含所定名字的的元素：

[【属性】*='【所定名字】']{      【样式】 }

列子：[class*=w]{         background-color: palegreen;          }

《4》查找带有对应属性并且属性值是指定所定名字（或者指定所定名字-....的名字）的的元素：

[【属性】|='【所定名字】']{      【样式】 }

列子：[class |='fwk']{          color: red;        }        搞了：class="fwk-123"和class="fwk"        (好玩)

清除表单里面的input所有格式：appearance: none;

:checked        搞选中单选框/复选框中后显示【伪类】