html新增

多媒体标签

 <audio src="小手拍拍.mp3" autoplay controls muted></audio>
     <!-- autoplay  自动播放(音频无效) -->
     <!-- muted 静音 -->
     <!-- controls  播放控件 -->
 ​
     <video src="小手拍拍.mp4" controls autoplay muted></video>
     <!-- autoplay  配合静音 实现自动播放 -->
 ​
     <!-- 多浏览器支持  -->

input新增

 <!-- novalidate 关闭表单验证 -->
     <form action="">
       <div>邮件类型:<input required type="email" multiple /></div>
       <div>url: <input tabindex="2" type="url" /></div>
       <div>
         数字: <input tabindex="1" type="number" step="1" min="10" max="15" />
       </div>
       <div>颜色: <input tabindex="3" type="color" /></div>
 ​
       <div>范围: <input type="range" value="40" min="20" max="100" /></div>
       <div>日期: <input type="date" /></div>
       <div>月份: <input type="month" /></div>
       <div>周: <input type="week" /></div>
       <div>搜索: <input type="search" /></div>
       <div>
         <input type="submit" value="提交" />
       </div>
     </form>
 ​
     <!-- **required**  必填 -->

引入字体

 @font-face {
         /* 给引入的字体包 起名字 */
         font-family:"bf";
         src: url(华康少女字体.ttf);
       }
     p{
         font-family:'bf'
     }

css

选择器

">"子代选择器 ,+ 下一个选择器 ~下面的选择器

属性选择器

 p[title]{
             color: green;
         }
         p[class]{
             color: red;
         }
 ​
         /* 匹配 含有 title 属性 ,并且属性值 为 'hello' 的p 标签 */
             p[title="hello"]{
                 background-color: red;
             }
             /* 匹配 含有 class 属性 ,并且属性值 以 'w' 的p 标签 */
             p[class^="w"]{
                 background-color: blue;
             }
 ​
             /* 同理  *=   $=   */
             /* 匹配 含有 class 属性 ,并且属性值 含有 't' 这段字符 的p 标签  */
             p[class*="t"]{
                 background-color: green;
             }
             /* 匹配 含有 class 属性 ,并且属性值 以 'o' 这段字符结尾 的p 标签 */
             p[class$="o"]{
                 background-color: orange;
             }

结构伪类

/* 从 .item 的父元素当中  找 它的  第一个 子元素 (并且要符合 :前边 选择器的规则 ) */
         .item:first-child{
             color: red;
         }
 ​
         /* 同理  */
         .item:last-child{
             color: green;
         }
 ​
         /* nth-child(n)  第 n 个  孩子 */ 
         /* 括号里边 不能是 0   */
         /* 从 .item 的父元素当中  找 它的  第2个 子元素 (并且要符合 :前边 选择器的规则 ) */
         .item:nth-child(2){
             color: blue;
         }
         /* 也支持简单的表达式  */
         /* 2n 偶数  */
         /* 2n+1 或者 2n-1  代表 奇数  */
         /* 3n  3的倍数 */
         /* 4n  4的倍数 */
         .item:nth-child(2n){
             background-color: orange;
         }
 ​
 ​
         /* 使用时 最好子元素是同样的元素 */

文本伪类

 <!-- E::first-letter文本的第一个字母或字 -->
         p::first-letter{
             font-size: 32px;
             color: red;
         }
         <!-- E::first-line 文本第一行 -->
         p::first-line{
             background-color: pink;
         }
          <!-- E::selection 被选中的文本 -->
         p::selection{
             background-color: orange;
             color: red;
         }

---

以上为上课整理的笔记