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

标题: 裴虎伟-前端(10)_20221122 [打印本页]

作者: faith 时间: 2022-11-22 20:05
标题: 裴虎伟-前端(10)_20221122
一、今日所学内容
1、HTML5的新特性：增加了一些新的标签，新的表单环绕新的表单属性等
（1）优点：语义更加明确；便于浏览器进行解析
（2）缺点：大部分的标签只有Chrome和Safari支持
2、HTML5新增的input类型
email：限制用户输入的内容必须是Email类型必须要带@符号才可以
url：校验输入的内容必须以http或者https开头，而且是完整的url地址
date：生成一个日期控件，可以进行日期的选择
time：生成一个时间控件，可以进行时间的选择
month;可以直接进行月份的选择
week:可以直接进行周数的选择
number:限制用户输入的内容必须是数字
search:可以将用户输入的文字进行情况操作
color:生成一个颜色选择表单元素
3、HTML5新增的表单属性
placeholder：给表单元素添加提示文本，和value同时使用时则不会进行提示文本的展示
multiple：可以让用户多选文件进行提交
required;校验当前表单元素是必填项
autofocus:让光标自动聚焦到当前的表单元素内
autocomplete:autocomplete="" 的属性值为“on”时，会记录用户输入过的内容；不写或者属性值为“off”时，不会记录; 注意：使用时必须要加上name

4、HTML5新增的多媒体标签
（1）<video>标签：H5可以在不使用插件的情况下，可以使用原生的标签来支持视频格式文件的播放
（2）相关属性
autoplay
属性值：autoplay
视频就绪自动播放（需要和muted属性来进行连用，自动播放时视频必须是默认静音的）
controls
属性值：controls
给video标签增加视频播放控件
width
属性值：像素值
控制播放器的宽度
height
属性值：像素值
控制播放器的高度
loop
属性值：loop
视频播放完成后是否要循环播放，属性值为loop为循环播放
preload
属性值
auto ：预加载视频
none：不预加载视频
规定是否预加载视频（如果有autoplay时，就忽略该属性）
src
属性值：url
视频的url地址
poster
属性值：imgUrl
加载等待的画面图片（视频播放前等待的图片）
muted
属性值：muted
静音播放
（3）<audio>标签
controls
属性值：controls
让音频显示相应的控件
loop
属性值：loop
当音频结束的时候重新开始播放
src
属性值：音频的url地址

5、CSS3的怪异盒子模型
（1）css3可以通过box-sizing来指定合作模型
content-box：盒子大小是width+height+padding+border（默认值）
border-box：大小就是指定width和height
6、CSS3新增的选择器
结构伪类选择器：结构为类选择器主要是根据文档结构来选择元素的，常用于根据父级来进行子级的选择
（1）选择符nth-child
A:first-child；选择父元素中的第一个子元素A
A:last-child；选择父元素中的最后一个子元素A
A:nth-child(n)；匹配父元素中的第n个子元素A
（2）选择符nth-of-type
A:first-of-type 指定A元素的第一个
A:last-of-type 指定A元素的最后一个
A:nth-of-type 指定A元素的第n个
（3）nth-child和nth-of-type的区别
nth-child对父元素里面所有子元素进行排序（序号是固定的），先找第n个孩子，然后看是否和p元素匹配；
nth-of-type 先对父元素里面指定的子元素进行排列，先去匹配p元素，然后再找第几个子元素；

伪元素选择器：伪元素选择器可以帮助我们利用CSS创建新的标签元素，而不需要HTML标签，从而简化HTML的结构
7、 CSS3过渡：过渡是CSS3中在不使用flash动画或者JS的情况下，将元素从一种状态变化为另一种状态的实现
（1）属性名：transition
（2）属性值：
a.想要变化的CSS属性
宽度、高度、内外边距都可以，如果想要所以的属性进行变化，就写一个all即可
b.花费时间
单位是秒（必须要写单位），比如 0.5s
c.运动曲线
默认值：ease（可省略）
d.何时开始
单位是秒（必须要写单位），可以设置延迟触发时间，默认0s（可省略）

二、今日问题
无
三、解决方案
无

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