我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

李扬敏-20221022-H5C3

[复制链接]
王源的李可爱 发表于 2022-10-23 01:15:51 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一.今日所学内容
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.伪类选择器

                               

回复

使用道具 举报

关注0

粉丝0

帖子58

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026