HTML5

最新推荐文章于 2022-08-18 16:17:45 发布

Mr.WangNGU

最新推荐文章于 2022-08-18 16:17:45 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/weixin_39920637/article/details/103874909

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

可输入的select （不兼容大多数浏览器）

embed 直接插入视频文件，本质是调用本机上已经安装的软件，有兼容性

简述

H5并不是新的语言，而是html语言的第五次重大修改版本
支持：所有的主流浏览器都支持h5（chrome，firefox,safari...） IE9及以上支持h5，但是ie8及以下不支持h5
改变了用户与文档的交互方式：多媒体：video audio canvas
增加了其他的新特性：语义特性，本地存储特性，网页多媒体，二维三维，特效（过渡，动画）
相对于h4 进步：抛弃了一些不合理不常用的标记和属性新增了一些标记和属性-表单，从代码角度而言，h5的网页结构代码更简洁

常用标签

标签名	作用
nav	导航
header	页眉
footer	页脚
main	主题内容
article	文章
aside	主题内容之外

-兼容

IE9中行级元素在设置宽度的时候是失效的，将其转化为块级元素。
IE8及以下完全不支持语义标签（不支持html5）

解决方案：(1)手动创建标签：默认的标签的类型都是行级元素

document.createElement('header');

(2)引入第三方插件

表单

input type

<input type="tel"> 并不是实现验证，本质目的是打开移动端数字键盘
<input type="number" value="60" max="100" min="0"> 只能输入数字（包含小数点），不能输入其他字符
<input type="search"> 有清空功能
<input type="range" value="60" max="100" min="0"> 范围
<input type="color">
<input type="time">
<input type="date">
<input type="datetime"> 大多数浏览器不能支持datetime
<input type="datetime-local">
<input type="month">
<input type="week">

<input type="text" placeholder="提示信息" autofocus autocomplete="on">
autofocus 自动获取焦点 
autocomplete 自动完成（历史记录选择） on打开 off关闭  1.必须成功提交过才有记录 2当前添加autocomplete 必须有name属性
required  必须
pattern="" 正则表达式

<input type="file" multiple>
multiple 可以多选文件 在email中可以输入多个邮箱地址 但输入时用逗号分割

<input type="text" name="username" form="myForm"> 
form指向id为myForm的form表单，一并提交

可输入的select （不兼容大多数浏览器）

    <!-- 不仅可以选择，还可以输入 -->
    <input type="text" list="subjects">
    <datalist id="subjects">
        <option value="前端" label="附属信息"></option>
        <option value="java" label="附属信息java"></option>
    </datalist>

表单新增事件

监听当前指定元素内容的改变：只要内容改变就触发
document.getElementById('name').oninput = function(){}

对比 onkeyup 每一个键的弹起触发一次 但鼠标复制内容不能触发

oninvalid 当验证不通过时触发
document.getElementById('tel').oninvalid = function(){
    设置默认的提示信息
    this.setCustomValidity('请输入合法的11位手机号')
}

进度条

    <!-- 进度条 -->
    <progress max="100" value="70"></progress>
    <!-- 度量器 -->
    <meter max="100" min="0" high="80" low="40" value="30"></meter>

示例-fieldset legend

    <!-- fieldset常用在表单中为相关元素分组 -->
    <form action="">
        <fieldset>
            <legend>学生档案</legend>
            <label for="username">姓名：</label>
            <input type="text" name="name" id="username">
        </fieldset>
    </form>

audio 音频

<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
注释：Internet Explorer 8 以及更早的版本不支持 <audio> 标签。

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

video 视频

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

embed 直接插入视频文件，本质是调用本机上已经安装的软件，有兼容性

<embed src="helloworld.swf" />

属性	值	描述
height	pixels	设置嵌入内容的高度。
src	url	嵌入内容的 URL。
type	type	定义嵌入内容的类型。
width	pixels	设置嵌入内容的宽度。

flash插件
安装flash 1.学习flash，增加使用成本 2.苹果设备不支持flash

html5获取dom元素操作元素类样式

    window.onload=function(){
        //getElementsByTagName获取的是数组
        //索引：不直观 以后的数据都是从后台动态获取 前台动态添加
        let cli = document.getElementsByTagName('li')[0];
        // .类 #id
        let javaLi = document.querySelector("li") // 返回匹配指定选择器的第一个元素
        let javaAllLi = document.querySelectorAll("li") // 返回所有的元素
    }

 document.querySelector("li").classList.add("mystyle");

方法	描述
add(class1, class2, ...)	在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加
contains(class)	返回布尔值，判断指定的类名是否存在。可能值： true - 元素包已经包含了该类名 false - 元素中不存在该类名
item(index)	返回元素中索引值对应的类名。索引值从 0 开始。如果索引值在区间范围外则返回 null
remove(class1, class2, ...)	移除元素中一个或多个类名。注意：移除不存在的类名，不会报错。
toggle(class, true\|false)	在元素中切换类名。第一个参数为要在元素中移除的类名，并返回 false。如果该类名不存在则会在元素中添加类名，并返回 true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：移除一个 class: element.classList.toggle("classToRemove", false); 添加一个 class: element.classList.toggle("classToAdd", true); 注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。

返回值：	一个 DOMTokenList, 包含元素的类名列表

自定义属性

    <!-- 定义 -->
    <!-- 规范
    1.data- 开头
    2.data-后必须至少有一个字符 多个单词使用-连接
    建议：1.名称中应该都使用小写
        2.不要有特殊字符
        3.不要副作用纯数字
 -->
 <p data-self-name="selfMyAttr">段落</p>

        let p = document.querySelector('p');
        // 获取自定义属性值 将data-后面单词使用camel命名法连接
        let value = p.dataset["selfName"];
        console.log(value);//selfMyAttr

网络监听接口

        // 1.online     网络联通触发事件
        // 1.onoffline  网络断开触发事件
        window.addEventListener('online',function(){
            alert('网络联通了')
        })
        window.addEventListener('onoffline',function(){
            alert('网络断开了')
        })

全屏接口的使用

浏览器全屏实现方式

1.利用h5的requestFullScreen
2.摁F11实现全屏效果


requestFullscreen全屏具体实现

进入全屏

1.判断该浏览器是否具有requestFullscreen方法
2.有，则直接执行ele.requestFullscreen()；没有则做浏览器兼容判断。
ele：要全屏的元素，可以是document.body也可以是某一个div

function full(ele) {
      if (ele.requestFullscreen) {
          ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
          ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullscreen) {
          ele.webkitRequestFullscreen();
      } else if (ele.msRequestFullscreen) {
          ele.msRequestFullscreen();
      }
}

2.exitFullScreen退出全屏

function exitFullscreen() {
    if(document.exitFullScreen) {
        document.exitFullScreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if(document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

3.获取当前全屏的节点

document.fullscreenElement()：获取当前全屏的元素。
假设id为div1的Element当前为全屏状态则 document.querySelector("#div1")===document.fullscreenElement

function getFullscreenElement() {
    return (        
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullScreenElement ||
        document.webkitFullscreenElement||null
    );
}

4.判断当前是否全屏

function isFullScreen() {
  return  !! (
      document.fullscreen || 
      document.mozFullScreen ||                         
      document.webkitIsFullScreen ||       
      document.webkitFullScreen || 
      document.msFullScreen 
   );
}

5.判断当前文档是否能切换到全屏

function isFullscreenEnabled() {
    return  (
        document.fullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.msFullscreenEnabled
    );
}

注意事项：
1.document下没有requestFullscreen
2.requestFullscreen方法只能由用户触发，比如：在onload事件中不能触发
3.页面跳转需先退出全屏
4.进入全屏的元素，将脱离其父元素，所以可能导致之前某些css的失效
解决方案：使用 :full-screen伪类 为元素添加全屏时的样式（使用时为了兼容注意添加-webkit、-moz或-ms前缀）
5.一个元素A全屏后，其子元素要再全屏，需先让元素A退出全屏

Mr.WangNGU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5

目录简述常用标签-兼容input type可输入的select （不兼容大多数浏览器）表单新增事件进度条示例-fieldset legendaudio 音频video 视频embed 直接插入视频文件，本质是调用本机上已经安装的软件，有兼容性html5获取dom元素操作元素类样式自定义属性网络监听接口全屏接口的使用简述...
复制链接

扫一扫