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

标题: 李扬敏-20221022-H5C3 [打印本页]

作者: 王源的李可爱 时间: 2022-10-23 01:15
标题: 李扬敏-20221022-H5C3
一.今日所学内容
1.H5新特性：增加了新标签，表单，表单属性，有兼容性问题，IE9+以上浏览器可以使用，不考虑兼容性，可以大量使用
2.新增标签
头部标签：<head></head>
导航栏：<nav></nav>
内容：<article></article>
侧边栏：<aside></aside>
底部：<footer></footer>
优缺点
优点：便于搜索引擎解析
缺点：会有兼容性问题
3.新增input内的type属性值
email：邮箱
url：限制输入必须为url类型
date：日期（年月日）
time：时间
month：月份(年月)
week：第几周（哪一年的第几周）
number：数字
search：搜索框（输入文本右侧有清除按钮）
color：颜色选择表单
tel：手机号（无法做任何验证）
4.新增表单属性
required=“required”：必填
*placeholder=“placeholder”：表单提示信息，如果有value值，则不显示（修改placeholder的字体颜色：input::placeholder{color：red}）
autofocus="autofocus“：自动聚焦，页面首次加载聚焦到该表单元素
autocomplete=“on/off” name=“”：记录/不记录输入过得内容（两个属性都必须有，提交生效）
*multiple=“multiple”：多选文件
5.新增多媒体标签
<audio src=“” controls></audio>标签：音频
src=“地址”:路径（必须）
controls=“controls”：控件（必须有）
autoplay="atuoplay"：自动播放
loop="loop"：循环播放
video多格式轮询

支持音频的浏览器
<video src="">标签：视频
同上
width/height:视频宽高
preload=“auto/none”：预加载（有autoplay，该属性自动忽略）
poster=“”：加载视频时等待的画面图片
muted=“muted”：静音播放
多格式轮询
6.css怪异盒模型
box-sizing：来指定盒模型
content-box：盒子大小是width+padding+border(默认值)
border-box:不改变盒子大小
padding和border都不能超过盒子原来的宽高
7.新增选择器
属性选择器
可以根据元素特定属性选择元素
input[value]{}:改变value的样式
input[type=“text”]{}:改变具有type=“text”属性的样式
input[type^=“t”]{}:选择type中以p开头的input样式
input[type$=“h”]{}:选择type中以h结尾的input样式
input[type*=“e”]{}:选择type中包含e的input样式
结构伪类选择器
根据文档结构选择,
父级子集:first/last-child{}
父级子集:nth-child(n){};n表示所有
even：选择偶数；odd选择奇数
数字：表示选择第几个
n为公式时：2n+1（奇数）；2n（偶数）；n+2（从第2个开始）；-n+3（前三个）；n要放在前面
序号固定,对所有子元素排序,适合相同标签
父级子集:first-of-type{};
父级子集:nth-of-type(n){};
对子元素中指定的元素进行排序，适合有多个标签

8.伪类选择器

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