前端学习2—HTML5

最新推荐文章于 2024-05-14 11:19:40 发布

小梁的学习笔记.

最新推荐文章于 2024-05-14 11:19:40 发布

阅读量195

点赞数

文章标签：前端 html5 学习

本文链接：https://blog.csdn.net/LY_rain_/article/details/123174903

版权

canvas

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

SVG

SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形

<!DOCTYPE html>
<html>
<body>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
 
</body>
</html>

MathML

数学标记语言

拖放

<!DOCTYPE HTML>
<html>

<head>

<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>

<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>

<script>
//放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法
function allowDrop(ev)
{
    ev.preventDefault();
}

 
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
            //dataTransfer.setData() 方法设置被拖数据的数据类型和值
            //Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。
            //值是可拖动元素的 id ("drag1")。
}
 
function drop(ev)
{
    ev.preventDefault();
        //调用 preventDefault() 来避免浏览器对数据的默认处理
                     （drop 事件的默认行为是以链接形式打开）
    var data=ev.dataTransfer.getData("Text");
        //通过 dataTransfer.getData("Text") 方法获得被拖的数据。
              该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    ev.target.appendChild(document.getElementById(data));
}
</script>

</head>

<body>
 
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img loading="lazy" id="drag1" src="/images/logo.png" 
draggable="true"         // 为了使元素可拖动，把 draggable 属性设置为 true
ondragstart="drag(event)" // ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据
width="336" height="69">
 
</body>
</html>

Video

<video> 元素提供了播放、暂停和音量控件来控制视频。

使用DOM控制

Audio

音频

Input

color
date
datetime
datetime-local
email
month
number //多种属性来规定对数字类型的限定
range
search
tel
time
url
week

表单元素

<datalist>
<keygen>
<output>

表单属性

<input> autocomplete 属性

自动填充

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

<form> novalidate 属性

没有验证提交啥样的都行

autofocus 属性

在页面加载时，域自动地获得焦点

formaction 属性

<input> pattern 属性

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值

是用来全局 title 属性描述了模式.

<input> placeholder 属性

<input> required 属性：必须在提交之前填写输入域（不能为空）

语义元素

HTML5 <section> 元素：section 包含了一组内容及其标题

HTML5 <article> 元素：定义独立的内容

HTML5 <nav> 元素：定义导航链接的部分（不是所有的链接都需要包含在 <nav> 元素中!

HTML5 <aside> 元素：定义页面主区域内容之外的内容（比如侧边栏）。aside 标签的内容应与主区域的内容相关.

HTML5 <header> 元素：主要用于定义内容的介绍展示区域. 在页面中你可以使用多个<header> 元素.

HTML5 <footer> 元素

Web存储

web网页的数据只允许该网页访问使用。

数据以键/值对存在, web网页的数据只允许该网页访问使用。

localStorage 和 sessionStorage

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>HTML5本地存储之Web Storage篇</title>  
</head>  
<body>  
    <div style="border: 2px dashed #ccc;width:320px;text-align:center;">     
        <label for="sitename">网站名(key)：</label>  
        <input type="text" id="sitename" name="sitename" class="text"/>  
        <br/>  
        <label for="siteurl">网 址(value)：</label>  
        <input type="text" id="siteurl" name="siteurl"/>  
        <br/>  
        <input type="button" onclick="save()" value="新增记录"/>  
        <hr/>  
        <label for="search_phone">输入网站名：</label>  
        <input type="text" id="search_site" name="search_site"/>  
        <input type="button" onclick="find()" value="查找网站"/>  
        <p id="find_result"><br/></p>  
    </div>  
    <br/>  
    <div id="list">  
    </div>  
    <script>
	// 载入所有存储在localStorage的数据
	loadAll(); 	
		
    //保存数据  
    function save(){  
        var siteurl = document.getElementById("siteurl").value;  
        var sitename = document.getElementById("sitename").value;  
        localStorage.setItem(sitename, siteurl);
        alert("添加成功");
    }
    //查找数据  
    function find(){  
        var search_site = document.getElementById("search_site").value;  
        var siteurl = localStorage.getItem(search_site);  
        var find_result = document.getElementById("find_result");  
        find_result.innerHTML = search_site + "的网址是：" + siteurl;  
    }
    //将所有存储在localStorage中的对象提取出来，并展现到界面上
    function loadAll(){  
        var list = document.getElementById("list");  
        if(localStorage.length>0){  
            var result = "<table border='1'>";  
            result += "<tr><td>key</td><td>value</td></tr>";  
            for(var i=0;i<localStorage.length;i++){  
                var sitename = localStorage.key(i);  
                var siteurl = localStorage.getItem(sitename);  
                result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";  
            }  
            result += "</table>";  
            list.innerHTML = result;  
        }else{  
            list.innerHTML = "数据为空……";  
        }  
    }      
    </script>
</body>  
</html>

以上实例只是演示了简单的 localStorage 存储与查找，更多情况下我们存储的数据会更复杂。

接下来我们将使用 JSON.stringify 来存储对象数据，JSON.stringify 可以将对象转换为字符串。

//保存数据  
function save(){  
    var site = new Object;
    site.keyname = document.getElementById("keyname").value;
    site.sitename = document.getElementById("sitename").value;  
    site.siteurl = document.getElementById("siteurl").value;
    var str = JSON.stringify(site); // 将对象转换为字符串
    localStorage.setItem(site.keyname,str);  
    alert("保存成功");
}  
//查找数据  
function find(){  
    var search_site = document.getElementById("search_site").value;  
    var str = localStorage.getItem(search_site);  
    var find_result = document.getElementById("find_result");
    var site = JSON.parse(str);  
    find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;  
}

Web SQL数据库

规范中定义的三个核心方法：

openDatabase：打开数据库。这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：执行查询。这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。

查询

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

上面的语句执行后会在 'mydb' 数据库中创建一个名为 LOGS 的表。

插入

使用动态值来插入数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
});

实例中的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"

读取

应用程序缓存

Web Worker

运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能

创建Web Worker文件后，从HTML页面中调用

HTML5 服务器发送事件(Server-Sent Events) SSE

允许网页获得来自服务器的更新

Server-Sent 事件 - 单向消息传递：

Server-Sent 事件指的是网页自动获取来自服务器的更新。

接收Server-Sent事件通知：

var source=new EventSource("demo_sse.php");
    //创建一个新的 EventSource 对象，
      然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
source.onmessage=function(event)
{
    document.getElementById("result").innerHTML+=event.data + "<br>";
};

//每接收到一次更新，就会发生 onmessage 事件
  当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

HTML5 WebSocket

在单个 TCP 连接上进行全双工通讯的协议，只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输

小梁的学习笔记.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习2—HTML5

canvas<canvas> 标签只是图形容器，您必须使用脚本来绘制图形canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成SVGSVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形<!DOCTYPE html><html><body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"&...
复制链接

扫一扫