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

标题: 雷盟-前端预科(16)-20221122 [打印本页]

作者: 奔黄昏而去 时间: 2022-11-23 00:31
标题: 雷盟-前端预科(16)-20221122
HTML5和CSS3 HTML5

html5优点：语义更加明确，便于浏览器解析；缺点：大部分标签只有Google和safari支持

新增的input类型（type属性值）

email 内容必须是email类型

url 输入内容必须是完整的地址/域名

date 生成日期控件

time 生成时间控件

month 选择月份

week 选择哪年的第几周

number 输入内容只能是数字

search 可以输入有清除符号的内容

color 生成颜色选择表单元素

新增表单属性

placeholder=“提示文本”，用placeholder时不用value

multiple=”multiple“多选文件进行提交

required=”required“限制此项为必填项

autofocus=“autofocus”让光标自动聚焦到当前表单元素

autocomplete=“on/off”，输入的内容是否被记录，此项必须和name连用才能生效

新增多媒体标签

1.video视频标签

autoplay=autoplay，视频自动播放，必须和muted连用

controls=controls，增加视频播放控件

loop=loop,循环播放

preload=auto/none，视频是否预加载，有autoplay时忽略preload

src=视频地址

poster=加载画面图片地址

muted=muted，静音播放

width=视频宽度

height=视频高度

2.audio音频标签

controls=controls，显示音频播放控件

loop=loop，循环播放

src=音频地址

CSS3怪异盒子模型

border-box大小为盒子width+height，使用box-sizing时padding和border不要超过盒子的宽高

属性选择器

input[value]{样式} 选择具有value属性的input标签

input[type=“search”]{样式} 选择具有type属性的值等于search的input标签

input[type^="t"]{样式} 选择具有type属性的值以t开头的input标签

input[type$="ch"]{样式} 选择具有type属性的值以ch结尾的input标签

input[type*="e"]{样式} 选择具有type属性的值包含e的input标签

结构伪类选择器

1.nth-child（n）

对父元素里所有子元素进行排序，先找第n个孩子，再找和子元素相匹配的选项

first-child父元素中第一个子元素

last-child父元素中最后一个子元素

nth-child（n）选择父元素第n个子元素

n可以是数字、关键字、公式

2.nth-of-type（n）

对父元素里指定的子元素进行排序，先匹配子元素，再找是第几个子元素

first-of-type父元素中指定的第一个子元素

last-of-type父元素中指定的最后一个子元素

nth-of-type（n）父元素中指定子元素的第n个

n可以是数字、关键字、公式

伪元素选择器

before和after都可以创建一个元素，这个元素属于行内元素

新创建的元素在html中找不到

伪元素选择器和元素选择器一样权重都是1

css3过渡

transition

要变化的属性，宽高等，如果全都要变填all

所用时间，单位是秒

变化运动曲线ease，是可省略的属性

linar匀速

eaes逐渐变慢

ease-in加速

ease-out减速

ease-in-out先加速后减速

开始的延迟时间，单位是秒，是可省略的属性

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