# html5 **Repository Path**: SunChenW/html5 ## Basic Information - **Project Name**: html5 - **Description**: 大神在修炼 -- HTML5 - **Primary Language**: HTML - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 12 - **Forks**: 25 - **Created**: 2019-07-30 - **Last Updated**: 2025-03-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [HTML5](#html5) - [新元素兼容问题](#%E6%96%B0%E5%85%83%E7%B4%A0%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98) - [表单部分](#%E8%A1%A8%E5%8D%95%E9%83%A8%E5%88%86) - [新的type类型](#%E6%96%B0%E7%9A%84type%E7%B1%BB%E5%9E%8B) - [新的表单属性](#%E6%96%B0%E7%9A%84%E8%A1%A8%E5%8D%95%E5%B1%9E%E6%80%A7) - [新增的表单元素](#%E6%96%B0%E5%A2%9E%E7%9A%84%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0) - [新增的表单事件](#%E6%96%B0%E5%A2%9E%E7%9A%84%E8%A1%A8%E5%8D%95%E4%BA%8B%E4%BB%B6) - [进度条/度量器](#%E8%BF%9B%E5%BA%A6%E6%9D%A1%E5%BA%A6%E9%87%8F%E5%99%A8) - [媒体元素](#%E5%AA%92%E4%BD%93%E5%85%83%E7%B4%A0) - [新增DOM操作](#%E6%96%B0%E5%A2%9Edom%E6%93%8D%E4%BD%9C) - [DOM获取](#dom%E8%8E%B7%E5%8F%96) - [样式操作](#%E6%A0%B7%E5%BC%8F%E6%93%8D%E4%BD%9C) - [自定义属性](#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7) - [新增接口](#%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3) - [网络接口](#%E7%BD%91%E7%BB%9C%E6%8E%A5%E5%8F%A3) - [全屏接口](#%E5%85%A8%E5%B1%8F%E6%8E%A5%E5%8F%A3) - [拖拽接口](#%E6%8B%96%E6%8B%BD%E6%8E%A5%E5%8F%A3) - [定位接口](#%E5%AE%9A%E4%BD%8D%E6%8E%A5%E5%8F%A3) - [第三方地图接口](#%E7%AC%AC%E4%B8%89%E6%96%B9%E5%9C%B0%E5%9B%BE%E6%8E%A5%E5%8F%A3) - [本地存储](#%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8) - [应用缓存](#%E5%BA%94%E7%94%A8%E7%BC%93%E5%AD%98) - [多媒体接口](#%E5%A4%9A%E5%AA%92%E4%BD%93%E6%8E%A5%E5%8F%A3) - [CSS3](#css3) - [基本情况](#%E5%9F%BA%E6%9C%AC%E6%83%85%E5%86%B5) - [新增选择器](#%E6%96%B0%E5%A2%9E%E9%80%89%E6%8B%A9%E5%99%A8) - [属性选择器](#%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8) - [伪类选择器](#%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8) - [颜色值问题](#%E9%A2%9C%E8%89%B2%E5%80%BC%E9%97%AE%E9%A2%98) - [文字阴影/标签阴影](#%E6%96%87%E5%AD%97%E9%98%B4%E5%BD%B1%E6%A0%87%E7%AD%BE%E9%98%B4%E5%BD%B1) - [盒子模型](#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B) - [圆角属性](#%E5%9C%86%E8%A7%92%E5%B1%9E%E6%80%A7) - [渐变色](#%E6%B8%90%E5%8F%98%E8%89%B2) - [背景相关](#%E8%83%8C%E6%99%AF%E7%9B%B8%E5%85%B3) - [过渡及动画](#%E8%BF%87%E6%B8%A1%E5%8F%8A%E5%8A%A8%E7%94%BB) - [2d转换](#2d%E8%BD%AC%E6%8D%A2) - [3d转换](#3d%E8%BD%AC%E6%8D%A2) - [元素居中](#%E5%85%83%E7%B4%A0%E5%B1%85%E4%B8%AD) - [2d+居中/时钟案例](#2d%E5%B1%85%E4%B8%AD%E6%97%B6%E9%92%9F%E6%A1%88%E4%BE%8B) - [字体问题](#%E5%AD%97%E4%BD%93%E9%97%AE%E9%A2%98) - [多列布局](#%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80) - [弹性布局](#%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80) - [一个全屏插件](#%E4%B8%80%E4%B8%AA%E5%85%A8%E5%B1%8F%E6%8F%92%E4%BB%B6) # HTML5 ## 新元素兼容问题 - IE10 以上正常兼容 - IE9部分兼容 - IE8及以下不兼容,需要引入插件让ie8能够正常显示html新元素。`` ## 表单部分 ### 新的type类型 | 类型 | 说明 | | -------------- | ------------------------------------------ | | tel | (在移动端拉起数字键盘) | | email | 验证邮箱输入 | | url | 验证网址输入 | | number | **限制**输入数字 (max、min、step、value) | | search | 提供删除输入功能 | | range | 范围(max、min、value) | | color | 颜色拾取 | | ~~time~~ | pc端支持性不好 | | ~~date~~ | pc端支持性不好 | | ~~datetime~~ | pc端支持性不好 | | ~~date-local~~ | pc端支持性不好 | | ~~month~~ | pc端支持性不好 | | ~~week~~ | pc端支持性不好 | ### 新的表单属性 | 属性 | 说明 | | ------------ | ------------------------------------------------ | | placeholder | 提示输入 | | required | 验证必须输入 | | autocomplete | 在提交之后记录 | | autofocus | 自动获取焦点 | | pattern | 输入正则`pattern="^(\+86)?1\d{10}$"` | | multiple | 设置可以多选(文件、下拉菜单、邮箱【逗号分隔】) | | form | 设置为form的id值,设置控件的归属 | | list | input中使用,值为datalist的id值 | ### 新增的表单元素 - ~~datalist(兼容不好)~~ ```html
专业: ``` - keygen - output ### 新增的表单事件 > oninput onkeyup oninvalid - `oninvalid` ```html 。。。 。。。 ``` ```javascript ... methods:{ //新增的事件类型oninput、onkeyup、oninvalid uservalid:function(e){ //设置默认的提示信息 e.target.setCustomValidity("请输入合法的11位手机号") } } .... ``` ## 进度条/度量器 ```html ``` ```html ``` ## 媒体元素 ```html ``` ## 新增DOM操作 ### DOM获取 ```javascript document.querySelect() ``` ### 样式操作 ```javascript var div = document.getElementsByClassName("red")[0] console.log(div.classList) div.classList.add("blue") div.classList.remove("green") div.classList.toggle("green") ``` ### 自定义属性 ```html 规范: 通过data- 开头 data- 后至少有一个字符 建议: 使用小写 不要使用特殊符号 不要说好用纯数字

sunchen

``` ```javascript var p = document.getElementsByTagName("p")[0] console.log(p.dataset.mp) p.dataset.mp="sc" ``` ## 新增接口 ### 网络接口 ```javascript //新增事件:网络连接、网络断开 window.addEventListener("online",function(){ console.log("网络连接") }) window.addEventListener("offline",function(){ console.log("网络断开") }) ``` ### 全屏接口 - 基本介绍 ```javascript /*全屏操作的属性和方法 * 1、requestFullScreen() 开启全屏显示 * 不同的浏览器需要设置不同的前缀 * webkit、moz、ms、o * 2、cancelFullScreen() 关闭全屏 * 也需要设置前缀,并且只能由document调用 * 3、fullScreenElement 判断是全屏状态 * 同样需要前缀,也是只能由document调用 */ ``` - 开启全屏 ```javascript //开启全屏 btn.onclick = function(){ if(div.requestFullscreen){ div.requestFullscreen() }else if(div.mozRequestFullScreen){ div.mozRequestFullScreen() }else if(div.webkitRequestFullScreen){ div.webkitRequestFullScreen() }else if(div.msRequestFullScreen){ div.msRequestFullScreen() }else{ alert("你的浏览器版本过低") } } ``` - 关闭全屏 ```javascript //关闭全屏 btn2.onclick = function(){ if(document.cancelFullScreen){ document.cancelFullScreen() }else if(document.mozCancelFullScreen){ document.mozCancelFullScreen() }else if(document.webkitCancelFullScreen){ document.webkitCancelFullScreen() }else if(document.msCancelFullScreen){ document.msCancelFullScreen() }else{ alert("你的浏览器版本过低") } } ``` - 判断是否全屏 ```javascript //判断是否全屏 btn3.onclick = function(){ if(document.fullscreenElement || document.msFullscreenElement || document.webkitFullscreenElement){ alert("全屏中") }else{ alert("不是全屏") } } ``` ### 拖拽接口 [点名系统]: 1993sc.com - 基本介绍 ```javascript /* * 1、元素要想被拖拽,需要添加draggable="true"属性,img和a不用添加,默认就是允许拖拽。 * 2、拖拽事件分为两大类:拖拽元素、目标元素 * 拖拽元素: * ondrag:整个拖拽过程都会调用 * ondragstart:拖拽开始时调用 * ondragleave:鼠标离开拖拽元素 * ondragend:拖拽结束时调用 * 目标元素: * ondragenter:鼠标进入目标元素 * ondragover:鼠标停留在目标元素时调用 * ondrop:在目标元素上松开鼠标时调用 * ondragleave:鼠标离开目标元素时调用 *3、ondrop 默认情况浏览器阻止触发,需要在ondragover中阻止浏览器默认行为 */ ``` - 使用托管事件,封装可复用的代码 ```html
脱不脱1
脱不脱2
``` ```javascript //拖拽元素事件定义:使用事件托管,将事件挂载到document,这是只是测试,要根据实际情况托管事件 var start = null; document.ondragstart = function(e){ //开始拖拽时获取拖拽元素 start = e.target; e.target.style.opacity="0.5" } document.ondragend = function(e){ //结束拖拽时,释放拖拽元素 start = null; e.target.style.opacity="1" } //目标元素定义事件:使用事件托管,将事件挂载到document,这是只是测试,要根据实际情况托管事件 document.ondragover = function(e){ //这里很重要 //允许元素被拖拽到目标元素 //允许触发ondrop事件 e.preventDefault() return false; } document.ondrop = function(e){ //鼠标松开时,将拖拽元素添加到目标元素 e.target.appendChild(start) } ``` ### 定位接口 `navigator`原生接口使用不便:一般都是调用第三方地图的接口 > - pc端无法使用 - 主函数 ```javascript function getLocation() { /*能力测试*/ if (navigator.geolocation) { /*1.获取地理信息成功之后的回调 * 2.获取地理信息失败之后的回调 * 3.调整获取当前地进信息的方式*/ //navigator.geolocation.getCurrentPosition(success,error,option); /*option:可以设置获取数据的方式 * enableHighAccuracy:true/false:是否使用高精度 * timeout:设置超时时间,单位ms * maximumAge:可以设置浏览器重新获取地理信息的时间间隔,单位是ms*/ navigator.geolocation.getCurrentPosition(showPosition,showError,{ /*enableHighAccuracy:true, timeout:3000*/ }); } else{ x.innerHTML="Geolocation is not supported by this browser."; } } ``` - 定位成功回调 ```javascript /*成功获取定位之后的回调*/ /*如果获取地理信息成功,会将获取到的地理信息传递给成功之后的回调*/ // position.coords.latitude 纬度 // position.coords.longitude 经度 // position.coords.accuracy 精度 // position.coords.altitude 海拔高度 function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "
Longitude: " + position.coords.longitude; } ``` - 定位失败回调 ```javascript /*获取定位失败之后的回调*/ function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } ``` #### 第三方地图接口 > 演示百度地图API调用 `百度地图`----`地图开放平台`----`开发文档`----`Javascript API`---`选择任意类型复制代码测试` ### 本地存储 > - h5中本地存储提供了两种方案: > - sessionStorage:临时存储,网页关闭存储数据自动删除 (5M) > - localStorage:永久存储,需要手动删除,才会删除。(20M) > 两种方案,拥有一样的操作方式 > > ```javascript > //存储一组数据(key:value) > sessionStorage.setItem("username","sc"); > //获取指定属性名中值 > sessionStorage.getItem("username"); > //删除指定属性名的值 > sessionStorage.removeItem("username"); > //清楚所有存储数据 > sessionStorage.clear(); > ``` ### 应用缓存 > - 首先:浏览器自带缓存功能,但是只能选择是否缓存(全部),或者是不缓存,无法指定文件缓存。 > - h5提供了更加方便的设置缓存的方式 > - 并不觉得使用方便---sc h5缓存机制的使用: - 在html中添加属性,值为缓存配置清单文件 ```html ``` - 缓存配置清单的编写 ```appcache CACHE MANIFEST #配置文件中,使用"#"添加注释 #CACHE MANIFEST 一定是在第一句,声明这是一个缓存配置文件 #配置需要缓存的文件清单列表 CACHE: images/l1.jpg images/l2.jpg # 使用* 代表缓存所有文件 #配置那些文件不需要缓存,每一次都要从服务器获取 NETWORK: images/l3.jpg #如果文件无法获取,指定替代文件 FALLBACK: images/l44.jpg images/l4.jpg # /:代表所有文件 # / images/l4.jpg ``` ### 多媒体接口 [HTML 音频/视频 DOM 参考手册]: https://www.runoob.com/tags/ref-av-dom.html - 常用方法: - load() 加载 - play() 播放 - pause() 暂停 - 常用属性: - currentTime 视频播放的当前进度 - duration:视频的总时间 - paused:视频的播放状态 - 常用事件: - oncanplay :在可以播放时触发 - ontimeupdate: 在播放进度更新时触发 - onended:视频方法完毕时触发 # CSS3 ## 基本情况 - 兼容性逐渐提升 - 使用中需要根据需求选择性使用 - 经常要添加兼容性前缀。 ## 新增选择器 > css3新增了大量的选择器用法,为了适应各种情况下进行元素原则。 > > 个人认为这些东西实用性一般,没有必要太过在意。 ### 属性选择器 ```css /*选择拥有class属性的div标签*/ div[class]{} /*选择class类名为header的div标签*/ div[class=header]{} /*选择class类名以header开头的div标签*/ div[class^=header]{} /*选择class类名以header结尾的div标签*/ div[class$=header]{} /*选择class类名包含header的div标签*/ div[class*=header]{} ``` ### 伪类选择器 > 结构伪类 - 兄弟伪类 ```css /*选择与div相邻的兄弟span标签*/ div + span {} /*选择div的兄弟span标签*/ div ~ span {} ``` - 相对于父元素的兄弟伪类:只有当兄弟元素都一样时,才能使用 ```css /*选择div标签父标签的第一个子元素(还需是div)*/ div:first-child{} /*选择div父标签的最后一个子标签(还需是div)*/ div:last-child{} /*选择div父标签的第5个子标签(还需是div)*/ div:nth-child(5){} /*even、odd、n、2n、...*/ ``` - 相对于父标签的兄弟伪类 ```css /*选择div的父标签中所有div中的第一个*/ div:first-of-type{} /*选择div的父标签中所有div中的最后一个*/ div:last-of-type{} /*选择div的父标签中所有div中的第5个*/ div:nth-of-type(5){} ``` - 再来两个 ```css /*选择内容为空的div*/ div:empty{} /*选择被正在锚点调转成功后的div*/ div:target{} ``` > 伪元素伪类 - 两个最重要的,高手常用 ```css /*在div中的最前边创建一个标签(伪标签)*/ div:before{ content:"" } /*在div中的最后边创建一个标签(伪标签)*/ div:after{ content:"" } ``` - 其他 ```css /*div中的第一个文字/字母*/ div:first-letter{} /*div中的第一行文字*/ div:first-line{} /*div中被选中的文字:只能更改颜色*/ div::selection{} ``` ## 颜色值问题 - 好理解的 ```css div{ color: red; /*单词*/ color: #008B8B;/*16进制 :红绿蓝*/ color: rgb(100,200,150);/*红,绿,蓝*/ color: rgba(100,200,150,0.7);/*红,绿,蓝,透明度*/ } ``` - 不太好理解的 ```css /*hls颜色模式 0~360 0红-橙-黄-绿-青-蓝-紫-红360*/ div{ /*颜色值,饱和度,明度,透明度*/ color: hsl(300,100%,100%,0.6); } ``` - 你越反抗,我越强壮~_~越难越不用 ## 文字阴影/标签阴影 ```css div{ /*水平偏移,垂直偏移,羽化程度,颜色值*/ text-shadow: 10px 20px 0px red; /*水平偏移,垂直偏移,羽化程度,增大值,颜色值*/ box-shadow: 20px 40px 0px 0px blue; /*可以设置多个阴影,使用逗号隔开。inset :添加内部阴影*/ box-shadow: 20px 40px 0px 0px blue,inset 5px 5px 0px 0px deeppink; } ``` ## 盒子模型 - 标签的盒子模型由4层,盒子的总大小= == content + padding + border - 正常情况下设置的宽高(widht/height)只是content的大小 - 给标签设置`box-sizing: border-box;`之后,设置的宽高(widht、height)就直接是标签的总大小。`padding`和`border`向里挤压。 ## 圆角属性 ```css div{ border-radius: 5px; } ``` ## 渐变色 - 线性渐变 ```css div{ background: linear-gradient(to right,red,blue); background: linear-gradient(to right,red 20%,blue 60%); } ``` - 径向渐变 ```css div{ width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(red,blue); background: radial-gradient(red 50%,blue 90%); /*设置中心点坐标*/ background: radial-gradient(at left top,red 50%,blue 90%); /*设置中心点坐标:参考点为左上角*/ background: radial-gradient(at 150px 0px,red 50%,blue 90%); } ``` - 重复渐变:在以上基础上循环 ```css /*重复渐变*/ background: repeating-linear-gradient(to right,red 0%,blue 10%); background: repeating-radial-gradient(red 0%,blue 10%); ``` ## 背景相关 ```css div{ height: 300px; width: 300px; padding: 10px; background-color: palevioletred; background-image: url("images/l2.jpg"); background-repeat: no-repeat; background-position: 0 0; background-origin: content-box; background-attachment: fixed; background-size: contain; } ``` ## 过渡及动画 - 过渡 ```css div{ transition: all 2s ease; } ``` - 动画 ```css @keyframes ani{ from{ width: 100px; } to{ height: 200px; } } div{ animation: ani 2s ease infinite reverse both; } ``` ## 2d转换 ```css div{ transform: translate() scale() rotate() skew(); } ``` ## 3d转换 ```css body{ /*设置井深*/ perspective: 400px; /*设置显示模式为3d:否则立体效果无法显示*/ transform-style: preserve-3d; } div:hover{ /*设置旋转中心点*/ transform-origin: 0 0; transform: translate3d() rotate3d() scale3d() skew(); } ``` ## 元素居中 - 给需要居中显示的子元素设置属性 ```css div{ /*设置宽度:必须*/ width: 500px; /*定位:必须,根据情况选择定位方式*/ position: relative; /*必须:右移父元素的50%*/ left: 50%; /*必须:左移自己的50%*/ transform: translateX(-50%); } ``` ## 2d+居中/时钟案例 ```html /*外圈*/
/*外圈柱柱*/ /*白色遮罩*/
/*指针们*/ /*中心点*/
``` ## 字体问题 - 使用特殊字体:下载---引入 https://www.iconfont.cn - 字体图标:下载---引入 https://www.iconfont.cn / https://icomoon.io/ ## 多列布局 ```css div{ /*分成三列*/ column-count: 3; /*在列中间加一条分隔线*/ column-rule: 3px solid red; /*设置列间距宽度*/ column-gap: 50px; /*设置每一列内容的宽度*/ /*column-width: 500px;*/ } div h3{ /*设置跨列 1 all*/ column-span: all; } ``` ## 弹性布局 ```css .father{ /*设置符标签开启弹性布局*/ display: flex; /*设置子标签(主轴)对齐方式 左对齐(默认)*/ justify-content: flex-start; /*设置子标签是否换行 不换行(默认)*/ flex-wrap: nowrap; /*设置主轴反向 横轴(默认)*/ flex-direction: row; /*设置(侧轴)对齐方式 填充(默认)*/ align-items: stretch; } .son{ /*设置子标签占父标签的比例*/ flex: 1; /*设置有空余空间时,子标签的增大比 默认0 不增大*/ flex-grow: 0; /*设置空间不足时,子标签的压缩比 默认1 设置为0 则不压缩*/ flex-shrink: 1; } ``` ## 一个全屏插件 参考fullpage