黑马程序员技术交流社区

标题: 学习笔记 [打印本页]

作者: kwucbcqpojnjs 时间: 2019-4-11 13:35
标题: 学习笔记
html5d01
1、新增语义化标签
header、nav、aside、section、footer......
2、音频标签
<audio src="mi.mp4" controls="controls" autoplay="autoplay" loop="loop"></audio>
src：音频地址
controls：显示控件
autoplay：自动播放
loop：循环播放
3、视频标签
<video src="media/video.mp4" loop="loop" poster="media/pig.jpg" controls="controls" muted="muted"></video>
< video  controls="controls"  width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</ video >

src：视频地址
controls：显示控件
autoplay：自动播放
loop：循环播放
poster：加载等待的静态图片
muted：静音播放
width：设置播放器宽度
height：设置播放器高度
4、新增input表单标签
1）限制输入内容时的格式
2）提交表单时，会校验内容并提示
   type="email"

限制用户输入必须为Email类型


type="date"

限制用户输入必须为日期类型

   type="time"

限制用户输入必须为时间类型

   type="number"

限制用户输入必须为数字类型

   type="tel"限制用户输入必须为

手机号码

   type="search"限制用户输入必须为

搜索框

5、新增表单属性
   placeholder：提示信息

   autofocus：自动获得焦点，一般页面中放1个

   autocomplete：自动完成
，记录用户输入过的数据，一般会关闭
   multiple:可以多选文件提交

css3
1、属性选择器
根据属性名
根据属性值
1. E[att] 选择具有att属性的E元素。
2. E[att="val"] 选择具有att属性且属性值等于val的E元素。
3. E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
4. E[att$="val"] 选择具有att属性且属性值为包含val的字符串的E元素
5. E[att*="val"] 选择具有att属性属性值为包含val的字符串的E元素。

类选择器、属性选择器、伪类选择器权重都为10.
2、结构伪类选择器
  <style>
ul li:first-child{
   background-color: red;
}
  </style>

  <ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
  </ul>
  匹配父元素的第一个子元素
:first-child
  匹配父元素的最后一个子元素
:last-child
:nth-child(n)
   n可以是数字、单词、公式（从0开始）
      如：匹配到父元素的第2个子元素：ul li:nth-child(2){}

         匹配到父元素的序号为奇数的子元素
  ul li:nth-child(odd){} odd是关键字奇数的意思
         匹配到父元素的序号为偶数的子元素
  ul li:nth-child(even){} even

         公式：2n偶数 2n+1奇数 5n 5 10 15...  n+5从第五个开始包括第五个 -n+5前五个包括第五个
   不考虑元素的类型
   指定父元素

      "of-type" 选择指定类型的元素。

:first-of-type
:last-of-type
:nth-of-type()
3、伪元素选择器
::before 在元素内部的前面插入内容
::after  在元素内部的后面插入内容
content不能省略，可以设置为空，创建的元素属于行内元素
      伪元素选择器和标签选择器权重都为1
4、2D转换
1）移动 transform:translate(x,y)
x,y可以是具体的像素值，还可以是百分比（是自身宽度或高度的百分比）
      div{
         transform: translate(50px,50px);
      }
      可以单独设置x,y
      transform:translateX() translateY()
      translate类似定位，不会影响到其他元素的位置，对行内标签没有效果。

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

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