【前端】之HTML5基础知识
HTML5 文件格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 我的HTML5代码 -->
</body>
</html>
HTML5 对浏览器的支持
HTML5支持Chrome、Firefox和IE9及以上的浏览器。
如果需要考虑IE8及以下的浏览器,可以加入html5shiv.js
的引用。方法如下:
<!--[if lt IE 9]>
<script type="text/javascript" src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->
HTML5 语义性标签
- <header>:头部
- <nav>:导航栏
- <section>:内容区域
- <aside>:侧边栏
- <article>:文章(详细内容区域)
- <footer>:底部
注:以上所有标签的作用和<div>标签的作用完全相同,但增强了语义性(可读性)。
HTML5 <input>标签
- type="email":邮箱(123456@qq.com)
- type="url":网址(http://www.baidu.com)
- type="number":数字,可以通过点击加减
- type="tel":电话号码
- type="search":搜索框,框的最后有一个叉,可以清空内容
- type="range":范围,可以拖动的条
- type="color":颜色选择器
- type="date":日期选择器
注:HTML5中的input标签,如果输入不合法,会自动弹出提示信息。 - input标签中新增的属性:
- placeholder属性:input标签中的提示信息,相当于Android中的hint属性
- autofocus属性:页面加载之后让表单自动获取焦点,不需要写值
- autocomplete属性:值on/off,on时可以自动显示以前输入的数据
- required属性:指示是否必填,不需要写值
- multiple属性:用于文件上传表单,可以选择多个文件,不需要写值
- novalidate属性:关闭H5表单默认的验证功能,只能加在标签上,不需要写值
- pattern属性:自定义正则验证
- 表单验证事件:
- oninput:当用户输入的时候触发的事件,示例代码如下:
document.getElementById("username").oninput = function() {
// 每当用户在表单中输入一个字符,就会触发一次这个事件
}
- oninvalid:当验证不通过时触发的事件,示例代码如下:
document.getElementById("email").oninvalid = function() {
this.setCustomValidity("您输入的邮箱不正确!");
}
HTML5 其他标签简介
- <datalist>标签:可以输入数据的下拉菜单,需要结合input>text使用,代码如下:
<!-- text表单右侧有一个下拉箭头,可以直接下拉;输入时可以模糊匹配 -->
<input type="text" list="cars" />
<datalist id="cars">
<option>宝马</option>
<option>宝骏</option>
<option>宝宝</option>
</datalist>
- <fieldset>标签:表单框,盛放多个表单的容器,代码如下:
<form action="">
<fieldset>
<legend>用户验证表单</legend> <!-- 标题 -->
<!-- 这里写其他标签代码 -->
</fieldset>
</form>
- <label>标签:点击该标签中的文本,可以触发该标签中的表单的焦点,代码如下:
<label>
姓名:<input type="text"/>
</label>
- <keygen>标签:加密标签,保证数据传输安全,可以选择不同强度的加密,代码如下:
<!-- 可以选择中等强度加密(1024)和高强度加密(2048) -->
加密:<keygen/>
- <meter>标签:度量器,类似温度计,根据在不同的值区间显示不同的颜色,代码如下:
<!-- 当在low和high之间时显示绿色,否则显示黄色 -->
<meter max="100" min="0" low="30" high="70" value="50"></meter>
- <progress>标签:进度条,代码如下:
<progress max="100" min="0" value="40"></progress>
- <audio>标签:音频播放标签,H5播放音频不依赖于任何插件,代码如下:
<!-- controls:显示控制条;autoplay:自动播放;loop:自动循环播放 -->
<audio controls autoplay loop>
<source src="music/fireworks.ogg" />
<source src="music/fireworks.mp3" />
<source src="music/fireworks.wav" />
抱歉,当前浏览器不支持播放此音频!
</audio>
<!-- 注:audio标签目前只支持.ogg、.mp3、.wav三种音频格式 -->
<!-- 不同浏览器支持的音频格式不同,因此需要在服务端保存三种格式的音频文件 -->
- <video>标签:视频播放标签,H5播放音频不依赖与任何插件,代码如下:
<video controls autoplay loop>
<source src="music/movie.ogg" />
<source src="music/movie.mp4" />
<source src="music/movie.webm" />
抱歉,当前浏览器不支持播放此视频!
</video>
<!-- 注:video标签目前只支持.ogg、.mp4、.webm三种音频格式 -->
- <figure>标签:多媒体标签(图片、音频、视频等),代码如下:
<figure>
<figcaption>多媒体标题</figcaption>
<!-- 这里可以写多媒体代码或其他代码 -->
</figure>
HTML5 DOM拓展
- 获取文档元素:H5新增了对元素的统一获取方法,代码如下:
var box01 = document.querySelector(".box1"); // 只会选择符合条件的第一个元素
var boxes = document.querySelectorAll("div"); // 获取所有符合条件的元素的数组
- 类名操作:H5新增了对元素类的添加、删除、切换、查找操作,代码如下:
document.querySelector("box").classList.add("box1"); // 添加
document.querySelector("box").classList.remove("box1"); // 删除
var flag = document.querySelector("box").classList.contains("box1"); // 查询
document.querySelector("box").classList.toggle("box1"); // 切换
- 自定义属性:H5支持自定义属性,但属性名必须以“data-”开头,代码如下:
<div id="mydiv" data-name="myname" data-my-content="mycontent"></div>
<script>
console.log(document.querySelector("#mydiv").dataset["name"]);
console.log(document.querySelector("#mydiv").dataset["myContent"]);
</script>
HTML5 元素拖拽
- 拖拽元素:要想让一个元素可以拖拽,需要设置元素的
draggable
属性为true
- 目标元素:页面中的所有元素都一个作为拖拽的目标元素
- 拖拽事件:
- ondragstart:应用于拖拽元素,当拖拽开始时被回调
- ondrag:应用于拖拽元素,整个拖拽过程都会不断回调这个方法
- ondragleave:应用与拖拽元素,当鼠标离开拖拽元素时被回调
- ondragend:应用于拖拽元素,当拖拽结束时被回调
- ondragenter:应用于目标元素,当拖拽元素进入目标元素区域时被回调
- ondragover:应用于目标元素,当拖拽元素停留在目标元素上时会不断回调这个方法
- ondrop:应用于目标元素,当在目标元素上松开鼠标时被回调
- ondragleave:应用于目标元素,当鼠标离开目标元素区域时被回调
- 当拖拽元素悬浮在目标元素上方时,可以设置鼠标样式,代码如下:
target.ondragover = function(event) {
event.preventDefault();
};
HTML5 全屏
- HTML5允许用户自定义网页上的任意元素全屏显示,代码如下:
// 请求全屏代码:
if (elem.requestFullscreen) { // 可以默认请求全屏,screen小写
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { // 可以火狐请求全屏,Screen大写
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) { // 可以webkit请求全屏,Screen大写
elem.webkitRequestFullScreen();
}
// 取消全屏代码:
if (elem.cancelFullscreen) {
elem.cancelFullscreen();
} else if (elem.mozCancelFullScreen) {
elem.mozCancelFullScreen();
} else if (elem.webkitCancelFullScreen) {
elem.webkitCancelFullScreen();
}
HTML5 WEB存储
- 传统的WEB存储方式:使用
document.cookie
存储。- 缺陷一:存储大小只有4K左右,太小
- 缺陷二:需要使用截取字符串的方式解析,麻烦
- HTML5提出的WEB存储方案:
Storage存储
,这种方式存储,可能存储在浏览器内存里面(window.sessionStorage),也有可能存储在计算机硬盘里面(window.localStorage)。使用这种方式存储数据的特性有:- 设置、读取方便
- 容量较大:sessionStorage约5M,localStorage约20M
- 只能存储字符串,如果是对象,可以先转化成字符串(JSON.stringify),然后存储
- 浏览器存储:window.sessionStorage
- 生命周期到管理浏览器窗口为止
- 在同一个窗口下,数据可以共享
- 本地存储:window.localStorage
- 永久存储,除非手动删除
- 可以多窗口共享
- 使用方法(方法相同,这里以sessionStorage为例):
window.sessionStorage.setItem("username", "zhangsan"); // 存储数据
var value = window.sessionStorage.getItem("username"); // 获取数据
window.sessionStorage.setItem("username", "lisi"); // 修改数据
window.sessionStorage.removeItem("username"); // 删除数据
window.sessionStorage.clear(); // 清空数据
- 查看存储位置方法:浏览器->F12打开开发者工具->Resource->local/session storage
HTML5 检测网络状态
// 当用户网络连接后回调的事件:
window.addEventListener("online", function() {
alert("网络已连接!");
});
// 当用户断开网络连接后回调的事件:
window.addEventListener("offline", function() {
alert("网络已断开!");
});
HTML5 应用缓存
- HTML5支持应用缓存,需要创建一个
cache manifest
(缓存清单)文件 - HTML5应用缓存的优势:
- 可配置需要缓存的资源
- 网络无连接时,应用仍可用
- 本地读取缓存资源,提升访问速度,增强用户体验
- 减少请求,缓解服务器负担
- 操作流程:
- 创建缓存清单文件:创建一个文件,以
.appcache
为后缀名,如my.appcache
- 在HTML页面中添加如下代码:
<html manifest="my.appcache">
- appcache文件结构如下所示:
CACHE MANIFEST
# .appcache文件以“#”开启注释
# 可以缓存网络文件,也可以缓存本地文件,本地文件用相对路径
CACHE: # 指定需要缓存的静态资源:
http://...........jpg
NETWORK: # 指定要在线能访问的资源:
http://...........jpg
FALLBACK: # 当页面无法访问时,跳转到的页面:
404.html
- 创建缓存清单文件:创建一个文件,以
HTML5 地理定位
- HTML5新增了获取用户地理信息的API
- 简单代码如下:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
} else {
alert("你的浏览器不支持地理定位!");
}
function onSuccess (position) {
var latitude = position.coords.latitude; // 获取维度
var langitude = position.coords.longitude; // 获取经度
}
function onError (error) {
alert(error);
}
【前端】之HTML5基础知识的更多相关文章
- HTML5基础知识及相关笔记
HTML5基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构 头部(head) 头部是网页的 ...
- 前端 | HTML5基础知识
1 HTML定义 HTML(英文Hyper Text Markup Language的缩写)中文译为"超文本标签语言",主要是通过HTML标签对网页中的文本.图片.声音等内容进行描 ...
- web前端篇:html基础知识
目录 1.web前端: 2.HTML概述 2.1HTML介绍 2.2HTML在计算机中如何表现 3.HTML基础语法 4.练习题: 1.web前端: 什么是web? web 就是网页,是一种基于B/S ...
- html5基础知识
html5+css3 html5定义很多简便东西和宽松语法: 文档头: <!doctype html> 文档编码: <meta cha ...
- 初学者入门web前端:C#基础知识:函数
入行前端对函数的掌握程度有可能直接影响以后工作的效率,使用函数可以高效的编写编码,节省时间,所以我整理了C#中最基础的函数知识点,虽然我在学习中 遇到很多问题,但是只要能够解决这些问题,都是好的. 一 ...
- html5基础知识学习
HTML5腾讯课堂--html5前端开发视频 https://ke.qq.com/course/89671 html5_video http://www.myexception.cn/jquery/2 ...
- HTML5 基础知识(1)——基本标签
## HTML**概念**:是最基础的网页开发语言(Hyper Text Markup Langage 超文本标记语言) > 1.超文本:超文本是用超链接的方式i,将各种不同空间的文字组织在一起 ...
- 前端学习——css基础知识,选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
- HTML5基础知识(一)---标签
在HTML5中,Web页面中重新调整了页面规划,这其中新引入了几个新标记. 我们将创建一个简单的Web页面,该页面包含一个Header区.一个Navigation区.一个Article区(包含三个部分 ...
随机推荐
- Java 高并发之魂
前置知识 了解Java基本语法 了解多线程基本知识 知识介绍 Synchronized简介:作用.地位.不控制并发的后果 两种用法:对象锁和类锁 多线程访问同步方法的7种情况:是否是static.Sy ...
- *args和**kwargs的作用
∗args的作用: *的作用有2个 打包参数(pack)和拆分参数(unpack) 函数接受实参时,按顺序分配给函数形参,如果遇到带∗的形参,那么就把还未分配出去的实参以元组形式打包(pack),分配 ...
- 爬虫之selenium爬取斗鱼主播图片
这是我GitHub上简单的selenium介绍与简单使用:https://github.com/bwyt/spider/tree/master/selenium%E5%9F%BA%E7%A1%80 & ...
- formdata,ajax提交数据
var data = document.getElementById("#dataForm"); var formData = new FormData(data); var ac ...
- Servlet——用户登录案例
案例:用户登录 * 用户登录案例需求: 1.编写login.html登录页面 username & password 两个输入框 2.使用Druid数据库连接池技术,操作mysql,day14 ...
- docker初解
1 什么是容器 容器就是在隔离的环境中运行的一个进程,如果进程停止,容器就会退出. 隔离的环境拥有自己的系统文件,ip地址,主机名等 容器是一种软件打包技术 程序:代码,命令进程:正在运行的程序容器的 ...
- Groovy单元测试框架spock基础功能Demo
spock是一款全能型的单元测试框架. 最近在做单元测试框架的调研和尝试,目前确定的方案框架包括是:spock,Junit,Mockito以及powermock.由于本身使用Groovy的原因,比较钟 ...
- 创建基于OData的Web API - Knowledge Builder API, Part IV: Write Controller
基于上一篇<创建基于OData的Web API - Knowledge Builder API, Part III:Write Model and Controller>,新创建的ODat ...
- T-SQL Part VIII: CROSS APPLY, OUTER APPLY
除了CROSS JOIN, INNER JOIN, OUTER JOIN之外,T-SQL还提供了CROSS APPLY和OUTER APPLY这两个较为另类的Set操作符. 首先来看CROSS APP ...
- ASP.NET Core 3.0 gRPC 身份认证和授权
一.开头聊骚 本文算是对于 ASP.NET Core 3.0 gRPC 研究性学习的最后一篇了,以后在实际使用中,可能会发一些经验之文.本文主要讲 ASP.NET Core 本身的认证授权和gRPC接 ...