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

标题: 王文博-20221022-H5C3-01 [打印本页]
作者: 博5237    时间: 2022-10-23 15:53
标题: 王文博-20221022-H5C3-01
一、今日学习内容
H5C3
html5部分
        html5的新特性
                主要增加了一些新的标签，新的表单和新的表单属性等，这些特性都有兼容性问题，基本上IE9+以上的浏览器才能支持，如果不考虑兼容性的话，可以大量使用新标签
        常用的H5标签
                    <!-- 头部标签 -->：<header></header>
                <!-- 导航栏标签 -->：<nav></nav>
                <!-- 内容标签 -->：<article></article>
                <!-- 侧边栏标签 -->：<aside></aside>
                <!-- 尾部标签 -->：<footer></footer>
        HTML5标签的优缺点
                优点：便于搜索引擎来解析
                缺点：会有兼容问题
        HTML5新增的input的type属性的属性值
                属性值                说明
                email                限制用户输入必须为Email类型       
                URL                限制用户输入必须为URL类型
                date                限制用户输入必须为date类型
                time                限制用户输入必须为time类型
                month                限制用户输入必须为month类型
                week                限制用户输入必须为week类型
                number                限制用户输入必须为number类型
                search                搜索框
                color                生成颜色选择表单
                tel                手机号码
                注意：属性值为Tel是，声明的input标签为电话输入，因为世界上电话号码都不尽相同，所以不能做出明确的显示，需要JS和正则表达式来进行限制       
        HTML5新增属性
                属性                属性值                说明
                required                required                表单拥有该属性表示不能为空，必填项       
                placeholder        提示文本                 填写表单的提示信息，如果有默认 value 值的话则不会显示提示信息
                autofocus                autofocus                自动聚焦，页面首次加载时聚焦到该表单元素
                autocomplete        on/off                当用户提交搜索内容时，浏览器记录用户提交过的内容，默认是ON，如果要关闭的话将值设为off，同时要添加name属性，而且要提交成功
                multiple                multiple                可以进行多选文件
        HTML5新增的多媒体标签
                <Audio>标签，音频标签
                        当前常用的三种浏览器
                浏览器                MP3                Wav                Ogg
                IE                Y                N                N
                Chrome                Y                Y                Y
                firfox                Y                Y                Y
                safari                Y                Y                N       
                opera                Y                Y                Y

                常用的属性和属性值
                        controls：controls；向用户展示播放控件
                        autoplay：autoplay；自动播放
                        loop：loop；当音频结束时重新播放
                        src：需要播放的音频URL地址
                例：<audio src="" controls="controls" loop="loop" autoplay="autoplay"></audio>       

                <video>标签，视频标签
                        当前常用的三种浏览器
                浏览器                MP3                Wav                Ogg
                IE                Y                N                N
                Chrome                Y                Y                Y
                firfox                Y                Y                Y
                safari                Y                N                N       
                opera                Y                Y                Y


                        常用属性和属性值
                属性                属性值                说明
                autoplay                autoplay                视频自动播放（谷歌要添加muted属性才能生效）
                controls                controls                向用户展示播放控件
                width                像素值                设置播放器的宽度
                height                像素值                设置播放器的高度
                loop                loop                循环播放视频
                preload                auto/none        预加载视频，auto：预加载，none：不进行加载操作，如果有auto属性，那么该属性会被忽略
                src                URL                视频URL地址
                poster                图片地址                加载视频时等待的画面
                muted                muted                静音播放
                例：video多格式轮询
                        <video controls="controls" width="1000px">
                                <sourc src="" type="video/MP4">
                        </video>
CSS3新增属性
        CSS怪异盒模型
                css3中可以通过box-sizing来指定盒模型，他有两个值，分别是content-box、border-box。
                box-sizing：content-box；盒子大小是width+padding+border（默认值）
                box-sizing：border-box；盒子的大小为width
                        注意点：
                                使用box-sizing：border-box；时，padding+border都不要超过盒子本身的宽度

        CSS3新增选择器
                属性选择器
                        概念：可以根据元素的特性来选择，这样就不用借助类或者id选择器
                        总结表格
                选择符                说明
                E:first-child        匹配父元素中的第一个子元素E
                E:last-child        匹配父元素中最后一个子元素E
                E:nth-child(n)        匹配父元素中的第N个子元素E
                E:first-of-type        匹配指定类型E的第一个元素
                E:last-of-type        匹配指定类型E的最后一个元素
                E:nth-of-type        匹配指定类型E的第N个元素
                结构伪类选择器
                        概念：主要是根据文档的结构来选择元素，通常根据父元素来进行选择里面子元素的情况
                nth-child(0)：
                        n是数字的情况（代表从0开始不断递增）
                        n是关键字的情况
                        n是公式的情况
                nth-child和nth-of-type的区别
                        nth-child对父元素里面所有的子元素进行排序（序号是固定的），先找到第N个孩子，然后再看是否和相应元素匹配
                        nth-of-type对父元素里面的所有指定的元素进行排序选择，先去进行相应元素的匹配，再排序区选择第n各元素

                伪元素选择器





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