菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端基础-付盼盼-20230424 [打印本页]

作者: 下潜 时间: 2023-4-24 22:25
标题: 前端基础-付盼盼-20230424
一、学习内容

HTML5
HTML5新特性
      HTML5的新增特性主要是针对之前的不足，增加了一些新的标签、新的表单和新增的表单属性等。
H5常用的标签
新增input常用的type属性值
新增input属性
      required
         属性值 required 表单如果有该属性，表示该表单中内容不能为空，是必填项
      placeholder
         属性值提示文本表单的提示信息，如果有value属性，那么这个提示信息就不会显示
         修改提示文本的样式
      autofocus
         属性值 autofocus 当页面加载完成的时候，将焦点自动聚焦到当前的表单元素
      autocomplete
         属性值 on/off 当用户想显示之前输入过的内容时，可以使用该属性，但必须要求有name 属性，而且输入的内容必须提交过，才能生效。
      multiple
         属性值 multiple 当需要提交多个文件的时候，可以使用该属性。

新增多媒体标签
      video标签
         video标签是可以在不使用插件的情况下，支持视频播放，当然，它支持的格式是有限的。
         video标签支持的视频格式：尽量使用MP4格式
         常用属性
            autoplay
                  属性值 autoplay 视频准备就绪自动播放（谷歌浏览器需要添加muted属性来控制视频静音，只有静音视频才可以自动播放）
            controls
                  属性值 controls 添加播放控件
            width
                  属性值像素值  控制播放器的宽度
            height
                  属性值像素值控制播放器的高度
            loop
                  属性值 loop 视频结束之后可以循环播放
            src
                  属性值 url 视频的url地址
            poster
                  属性值 imgUrl  加载等待视频的图片画面
            muted
                  属性值 muted 设置静音播放
         支持多视频格式的写法
      audio标签
         当前audio标签支持三种音频格式：推荐使用MP3格式的音频
         引入音频的方式
         常用属性
            src
                  属性值音频的URL
            controls
                  属性值 controls  添加音频控件
            loop
                  属性值 loop  控制音频循环播放
CSS3
CSS3的新增选择器
      属性选择器
         概念
            属性选择器可以根据元素的特定的属性来选择元素，可以减少类选择器和id选择器的使用。属性选择器的权重是0,0,1,0
      结构伪类选择器
         概念
            结构伪类选择器主要是根据文档的结构来选择元素的，通常用于根据父级选择器来选择里面的子元素
            例 first-child 、last-child、nth-child()
            例 first-of-type、last-of-type、nth-of-type()
      伪元素选择器
         作用
            伪元素选择器可以帮助我们利用CSS创建新的标签元素，从而简化HTML的标签结构
         注意
            before和after都会创建一个元素，但是属于行内元素
            语法：element::after{}
            before和after必须要有content属性
            before是在父元素的内容前面来创建元素，after就是在父元素的内容后面来创建元素
            伪元素选择器和标签选择器一样，权重是1
CSS的过渡
      概念
         过渡（transition）是CSS3最具有颠覆性的一个特征之一，可以在不使用动画或者JS的情况下，给元素从一种状态转化为另一种状态的过程添加效果。
         一般情况下会和:hover来进行使用。
      语法
         transition: 要过渡的属性花费的时间运动曲线何时开始;
            要过渡的属性（必须属性）
                  宽度、高度、背景颜色、内外边距都可以，如果所有的属性都需要过渡，就写一个all即可。
            花费的时间（必须属性）
                  单位是秒必须要写单位，比如说.5s
            运动曲线（可以省略）
                  默认是ease
            何时开始（可以省略）
                  可以设置延迟触发的时间，默认是0  单位是秒（s）
CSS的2D转换
      属性 transform
         属性值
            translate(x,y)  对盒子的X和Y轴进行位移
            translateX(n) 对盒子进行x轴的位移
            translateY(n) 对盒子进行y轴的位移
         注意点：
            1、translate不会影响其他的元素位置
            2、translate中的百分比单位是相对于元素自身的宽高来进行设定的比如 transform:translate(50%,50%)；
            3、对行内标签没有效果

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)