黑马程序员技术交流社区

标题: 成都校区笔记 [打印本页]

---

作者: chenau    时间: 2019-4-9 20:23
标题: 成都校区笔记
知识小结
1.        h5新增语义化标签：
<header> <nav><article><section><footer>
2.        新增多媒体标签：
音频：<audio>  （音频常用于游戏页面、宣传页面，加背景音乐，某些浏览器不支持自动播放格式）
语法格式：<audio src=”文件地址” controls=”controls”  autoplay=”autoplay” loop=”loop”></audio>
           <audio controls=”controls”>
            <source src=”sonw.mp3” type=”audio/mpeg”>
<source src=”sonw.ogg” type=”audio/ogg”>
         </audio>

视频<video>
语法格式：<video src=”文件地址” muted=”muted” poster=”poster” controls=”controls”  autoplay=”autoplay” loop=”loop”></video>
（谷歌浏览器不能自动播放视频，添加muted可以）
           <video controls=”controls” width=”200”>
            <source src=”sonw.mp4” type=”video/mp4”>
<source src=”sonw.ogg” type=”video/ogg”>
         </vedio>
3.        新增Input表单
<input type=”email”>       
<input type=”number”>
<input type=”tell”>
<input type=”search”>
<input type=”url”>
<input type=”date”>
新增表单属性：
Required=”required”内容必填
Placeholder=”提示文本” 占位符
Autofocus=”autofocus”自动获得焦点
Autocomplete=”on/off”自动记录输入的内容（需要同时在表单添加name属性）
Multiple=”multiple” 可以选择多个文件

4.        Css3选择器
属性选择器：
E[att]选择有att属性的E元素
E[att=”val”]
E[att^=”val”]选择以val开头的标签
E[att$=”val”]选择以val结束的标签
E[att*=”val”]选择有val内容的标签
结构伪类选择器：
（不考虑类型，指定父元素）
E:first-child匹配父元素中的第一个子元素
E:nth-child()  n可以是数字，关键词（odd/even），公式(2n,2n+1,5n,n+5,-n+5)（从0开始）
(指定同一类型的子集)
E:first-of-type匹配指定类型E的第一个元素
E:nth-of-type()

伪元素选择器：(属于行内元素，设置大小时需转化成块级元素，权重为1)
E::before
E::after {
    content:””;（content不能省略，可以设置为空）

5.2D转换
转换（transform）可以实现元素的位移、旋转、倾斜、缩放(对块级标签有效果，行内标签没有效果)
Transform: translate(x,y);（x,y可以是具体的像素值，还可以是百分比（是自身宽度或高度的百分比））
Transform: translateX();  Transform: translateY();(可以只移动X或Y轴)
Transform: rotate;
Transform: skew;
Transform: scale;

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2