RN2_Html学习(react native 学习)

最新推荐文章于 2022-05-26 22:03:37 发布

huhanghao

最新推荐文章于 2022-05-26 22:03:37 发布

阅读量2.3k

点赞数

分类专栏： react native学习之路文章标签： android

本文链接：https://blog.csdn.net/u011486491/article/details/54692235

版权

react native学习之路专栏收录该内容

26 篇文章 0 订阅

订阅专栏

Html5学习_RN2

在学习Html5之前，我们先学习下Html。

参考：http://www.runoob.com/html/html-tutorial.html

Html

Html预备知识：

简介：

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

网页结构：

Html版本：

Html申明：

通用申明：

Html标签：

头标签：

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>,<style>, <meta>, <link>, <script>, <noscript>, <base>.

title元素：

他定义了不同文档的标题，在HTML/XHTML 文档中是必须的。

目标：

1. 定义了浏览器工具栏的标题

2. 当网页添加到收藏夹时，显示在收藏夹中的标题

3. 显示在搜索引擎结果页面的标题

base元素：

描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。

Link元素：

定义了文档与外部资源之间的关系，标签通常用于链接到样式表。

Eg:

Style元素：

标签定义了HTML文档的样式文件引用地址。你也可以直接添加样式来渲染 HTML 文档。

Eg:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

除了定义引用地址之外还可以直接上属性：

<span style="background-color:#B4009E;color:#ffffff;">Boxes</span>

Meta元素：

描述了一些基本的元数据，提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

一般放置于<head>区域。

Eg:

为搜索引擎定义关键词:

为网页定义描述内容:

定义网页作者:

每30秒中刷新当前页面:

Script元素：

用于加载脚本文件，比如JavaScript。元素既可包含脚本语句，也可以通过"src"属性指向外部脚本文件。

标题：

HTML标题（Heading）是通过<h1> - <h6>标签来定义的.

Eg:

<h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3>

段落：

HTML段落是通过标签 <p>来定义的。

Eg：

<p>这是一个段落。</p> <p>这是另外一个段落。</p>

HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

链接：

HTML链接是通过标签 <a>来定义的.

Eg：

<a href="http://www.runoob.com">这是一个链接</a>

（注意： href属性中指定链接的地址。）

Target属性：

定义被链接的文档在何处显示。如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。

注意：

这里的链接除了能链接到url，还能在文本内进行连接。点击之后跳转到对应标记的地方。

Eg:

<p>

</p>

……..

<p>这边显示该章节的内容……</p>

图像：

HTML 图像是通过标签 <img> 来定义的.

Eg：

<imgsrc="w3cschool.png"width="104"height="142">

属性：

Src：源属性的值是图像的 URL 地址。

Alt：来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。

Height、width：用于设置图像的高度与宽度。（单位为像素）

实体：

<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签</body>。

Eg:

<body>
<p>这是第一个段落。</p>
</body>

表格：

由<table> 标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

Eg：

<tableborder="1">

<tr>

<td>Header 1</td>

<td>Header 2</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

列表：

无序列表：<ul> 标签，列项目使用粗体圆点（典型的小黑圆圈）进行标记。

有序列表：<ol>标签，列表项目使用数字进行标记

列表项目：<li>

区块：

块级元素： <div> ，没有特定的含义，浏览器会在其前后显示折行。

内联元素：<span>，可用作文本的容器

表单：

他是一个包含表单元素的区域。允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

输入标签

输入标签（<input>）

文本域（Text Fields）

<inputtype="text"> 标签来设定，在表单中键入字母、数字等内容。

<form>
First name: <input type="text"name="firstname"><br>
Last name: <input type="text"name="lastname">
</form>

密码字段

<inputtype="password"> 来定义。

Eg：

<form>
Password: <input type="password"name="pwd">
</form>

单选按钮（Radio Buttons）

<inputtype="radio"> 标签定义。

Eg：

<form>
<input type="radio"name="sex" value="male">Male<br>
<input type="radio"name="sex" value="female">Female
</form>

复选框（Checkboxes）

<inputtype="checkbox"> 定义了复选框。

Eg：

提交按钮(Submit Button)

<inputtype="submit"> 定义了提交按钮。

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

Eg：

<formname="input" action="html_form_action.php"method="get">
Username: <input type="text"name="user">
<input type="submit"value="Submit">
</form>

跳行：

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br>标签定义换行）。

水平线：

<hr> 标签在 HTML 页面中创建水平线。

Eg:

<p>这是一个段落。</p>

<hr>

嵌入网页：

<iframesrc="URL"></iframe>

Eg：

<iframesrc="demo_iframe.htm"width="200"height="200"></iframe>

Html标签：

1、标签告知浏览器这是一个 HTML 文档。

2、他是 HTML 文档中最外层的元素。

3、他是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。

格式化标签：

文本实话标签

属性	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字 My favorite color is ~~blue~~ red!
<del>	定义删除字 My favorite color is ~~blue~~ red!

Htlm通用属性

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

属性和属性值对大小写不敏感。推荐小写的属性/属性值。

使用于大多数的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

HTML5

HTML5 中的一些有趣的新特性：

1. 用于绘画的 canvas 元素

2. 用于媒介回放的 video和 audio 元素

3. 对本地离线存储的更好的支持

4. 新的特殊内容元素，比如article、footer、header、nav、section

5. 新的表单控件，比如calendar、date、time、email、url、search

新元素

Canvas元素：

<canvas>：标签定义图形，比如图表和其他图像。该标签基于 JavaScript的绘图 API

多媒体：

<audio>：定义音频内容

<video>：定义视频（video或者 movie）

<source>：定义多媒体资源 <video>和 <audio>

<track>：为诸如 <video>和 <audio>元素之类的媒介规定外部文本轨道。

表单元素：

<datalist>：定义选项列表。请与 input元素配合使用该元素，来定义 input可能的值。

<keygen>：规定用于表单的密钥对生成器字段。

<output>：定义不同类型的输出，比如脚本的输出。

语义和结构元素：

<article>：定义页面独立的内容区域。

<aside>：定义页面的侧边栏内容。

<bdi>：允许您设置一段文本，使其脱离其父元素的文本方向设置。

<command>：定义命令按钮，比如单选按钮、复选框或按钮

<details>：用于描述文档或文档某个部分的细节

<dialog>：定义对话框，比如提示框

<summary>：标签包含 details元素的标题

<figure>：规定独立的流内容（图像、图表、照片、代码等等）。

<figcaption>：定义 <figure>元素的标题

<footer>：定义 section或 document的页脚。

<header>：定义了文档的头部区域

<mark>：定义带有记号的文本。

<meter>：定义度量衡。仅用于已知最大和最小值的度量。

<nav>：定义导航链接的部分。

<progress>：定义任何类型的任务的进度。

<ruby>：定义 ruby注释（中文注音或字符）。

<rt>：定义字符（中文注音或字符）的解释或发音。

<rp>：在 ruby注释中使用，定义不支持 ruby元素的浏览器所显示的内容。

<section>：定义文档中的节（section、区段）。

<time>：定义日期或时间。

<wbr>：规定在文本中的何处适合添加换行符。

Canvas

定义图形，比如图表和其他图像，您必须使用脚本 (通常是JavaScript)来绘制图形，canvas元素本身是没有绘图能力的。

Eg:

<body>

<canvasid="myCanvas" width="200" height="100"style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas标签。</canvas>

varc=document.getElementById("myCanvas");

varctx=c.getContext("2d");

// Creategradient

vargrd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill withgradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

SVG

SVG 是一种使用 XML描述2D图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 和 SVG的区别

Canvas

SVG

l 依赖分辨率

l 不支持事件处理器

l 弱的文本渲染能力

l 能够以 .png 或 .jpg 格式保存结果图像

l 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

l 不依赖分辨率

l 支持事件处理器

l 最适合带有大型渲染区域的应用程序（比如谷歌地图）

l 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

l 不适合游戏应用

拖拉

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

实现步骤：

1、设置元素为可拖拽

为了使元素可拖动，把 draggable属性设置为 true：

<imgdraggable="true">

2、规定元素拖动时的伴随事件

ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

functiondrag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

例子中，数据类型是"Text"，值是可拖动元素的 id("drag1")。

3、拖动到何处

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

4、进行放置

当放置被拖数据时，会发生 drop 事件。

ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

l 调用preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）

l 通过dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在setData() 方法中设置为相同类型的任何数据。

l 被拖数据是被拖元素的 id("drag1")

l 把被拖元素追加到放置元素（目标元素）中

代码完整体

视频

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

同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video>标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个<source> 元素. <source> 元素可以链接不同的视频文件。

浏览器将使用第一个可识别的格式：

l MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

l WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

l Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

对应的格式：

Input类型：

l color

l date

l datetime

l datetime-local

l email

l month

l number

l range

l search

l tel

l time

l url

l week

Data:

允许你从一个日期选择器选择一个日期。

Eg:

生日: <inputtype="date" name="bday">

week

选择周: <input type="week"name="week_year">

Month:

类型允许你选择一个月份。

生日 (月和年): <inputtype="month" name="bdaymonth">

Time：

类型允许你选择一个时间。

选择时间: <input type="time"name="usr_time">

color

主要用于选取颜色：

Eg:

选择你喜欢的颜色: <input type="color"name="favcolor"><br>

datetime-local:

允许你选择一个日期（UTC时间）。

Eg:

生日 (日期和时间): <inputtype="datetime-local" name="bdaytime">

Email:

包含 e-mail地址的输入域。

Eg:

E-mail: <inputtype="email" name="email">

Number:

number类型用于应该包含数值的输入域。

Eg:

数量 ( 1 到 5 之间 ): <input type="number"name="quantity" min="1" max="5">

Range

range类型用于应该包含一定范围内数字值的输入域

<inputtype="range" name="points" min="1"max="10">

Search:

search类型用于搜索域，比如站点搜索或 Google搜索。

Search Google:<input type="search" name="googlesearch">

Tel:

定义输入电话号码字段。

<inputtype="tel" name="usrtel">

url：

url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

添加您的主页: <input type="url"name="homepage">

表单元素

新的表单元素:

l <datalist>

l <keygen>

l <output>

datalist

规定输入域的选项列表。该属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

Eg：

<inputlist="browsers">

<datalistid="browsers">

<optionvalue="Internet Explorer">

<optionvalue="Firefox">

<optionvalue="Chrome">

<optionvalue="Opera">

<optionvalue="Safari">

</datalist>

keygen

提供一种验证用户的可靠方法，用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

Eg:

<formaction="demo_keygen.asp"method="get">

用户名: <inputtype="text"name="usr_name">

加密: <keygenname="security">

<inputtype="submit">

</form>

output

用于不同类型的输出，比如计算或脚本输出.

<formoninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<inputtype="range"id="a"value="50">100 +

<inputtype="number"id="b"value="50">=

<outputname="x"for="a b"></output>

</form>

表单属性

HTML5 的 <form> 和<input>标签添加了几个新属性.

<form>新属性：

l autocomplete

l novalidate

<input>新属性：

l autocomplete

l autofocus

l form

l formaction

l formenctype

l formmethod

l formnovalidate

l formtarget

l height 与 width

l list

l min 与 max

l multiple

l pattern (regexp)

l placeholder

l required

l step

<form> / <input> autocomplete 属性

规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

注意: autocomplete 适用于<form> 标签，以及以下类型的 <input> 标签：text,search,url,telephone, email, password, datepickers, range 以及 color。

Eg：

<formaction="demo-form.php"autocomplete="on">

Firstname:<inputtype="text"name="fname"><br>

Lastname: <inputtype="text"name="lname"><br>

E-mail:<inputtype="email"name="email"autocomplete="off"><br>

<inputtype="submit">

</form>

<form> novalidate 属性

boolean 属性，规定在提交表单时不应该验证 form 或 input 域。

<formaction="demo-form.php"novalidate>

E-mail:<inputtype="email"name="user_email">

<inputtype="submit">

</form>

<input> autofocus 属性

是一个 boolean 属性.，规定在页面加载时，域自动地获得焦点。

Firstname:<input type="text" name="fname" autofocus>

<input> form 属性

规定输入域所属的一个或多个表单。

位于form表单外的input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):

<formaction="demo-form.php" id="form1">
First name: <input type="text"name="fname"><br>
<input type="submit" value="提交">
</form>
Last name: <input type="text" name="lname"form="form1">

<input> formaction 属性

描述表单提交的URL地址，会覆盖<form> 元素中的action属性。

<formaction="demo-form.php">
First name: <inputtype="text" name="fname"><br>
Last name: <inputtype="text" name="lname"><br>
<input type="submit"value="提交"><br>
<input type="submit" formaction="demo-admin.php"
value="提交">
</form>

<input> formenctype 属性

描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)，覆盖 form 元素的 enctype 属性。

该属性与type="submit"和type="image"配合使用。

<formaction="demo-post_enctype.php" method="post">
First name: <inputtype="text" name="fname"><br>
<input type="submit"value="提交">
<input type="submit" formenctype="multipart/form-data"
value="以 Multipart/form-data 提交">
</form>

<input> formmethod 属性

定义了表单提交的方式，覆盖了 <form> 元素的的method 属性。

<formaction="demo-form.php" method="get">
First name: <inputtype="text" name="fname"><br>
Last name: <inputtype="text" name="lname"><br>
<input type="submit"value="提交">
<input type="submit"formmethod="post" formaction="demo-post.php"
value="使用 POST 提交">
</form>

<input> height 和 width 属性

height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间在加载页时会被保留。如果没有这些属性，浏览器不知道图像的大小，并不能预留适当的空间。图片在加载过程中会使页面布局效果改变（尽管图片已加载）。

<inputtype="image" src="img_submit.gif" alt="Submit"width="48" height="48">

<input> list 属性

规定输入域的datalist。datalist 是输入域的选项列表。

<input> min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的input 类型规定限定（约束）。

注意: min、max 和 step 属性适用于以下类型的<input> 标签：date pickers、number 以及 range。

Enter a datebefore 1980-01-01:
<input type="date"name="bday" max="1979-12-31">
Enter a date after 2000-01-01:

<inputtype="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):

<inputtype="number" name="quantity" min="1"max="5">

<input> multiple 属性

是一个 boolean 属性，规定<input> 元素中可选择多个值。

Select images:<input type="file" name="img" multiple>

<input> pattern 属性

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

注意:pattern 属性适用于以下类型的 <input> 标签:text, search,url, tel,email, 和 password.

提示： 是用来全局 title 属性描述了模式

Country code:<input type="text" name="country_code" pattern="[A-Za-z]{3}"title="Three letter country code">

<input> placeholder 属性

性提供一种提示（hint），描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的 <input> 标签：text,search, url,telephone,email 以及password。

<inputtype="text" name="fname" placeholder="Firstname">

<input> required 属性

是一个 boolean 属性，规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的 <input> 标签：text,search, url,telephone,email,password, date pickers, number, checkbox, radio 以及 file。

Username:<input type="text" name="usrname" required>

<input> step 属性

输入域规定合法的数字间隔。如果 step="3"，则合法的数是 -3,0,3,6 等

<inputtype="number" name="points" step="3">

语义元素

能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例:<div> 和 <span> - 无需考虑内容.

语义元素实例: <form>,<table>, and <img> - 清楚的定义了它的内容.

HTML5提供了新的语义元素来明确一个Web页面的不同部分:

l <header>

l <nav>

l <section>

l <article>

l <aside>

l <figcaption>

l <figure>

l <footer>

<section> 元素

定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

根据W3C HTML5文档: section 包含了一组内容及其标题。

<p>The World Wide Fund for Nature (WWF) is....</p>

</section>

<article> 元素

标签定义独立的内容。 <article> 元素使用实例:

l Forum post

l Blog post

l News story

l Comment

<h1>Internet Explorer 9</h1>

<p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00发布。</p>

</article>

<nav> 元素

定义导航链接的部分。

<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

<nav>

<ahref="/html/">HTML</a> |

<ahref="/css/">CSS</a> |

<ahref="/js/">JavaScript</a> |

<ahref="/jquery/">jQuery</a>

</nav>

<aside> 元素

定义页面主区域内容之外的内容（比如侧边栏）,内容应与主区域的内容相关。

<p>My family and I visited The Epcot center this summer.</p>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

<header> 元素

描述了文档的头部区域。<header>元素注意用于定义内容的介绍展示区域。在页面中你可以使用多个<header> 元素。

<header><h1>Internet Explorer 9</h1>

<p>

<timepubdatedatetime="2011-03-15"></time>

</p></header><p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p></article>

<footer> 元素

描述了文档的底部区域。<footer> 元素应该包含它的包含元素。一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。

<footer><p>Posted by: Hege Refsnes</p>

<p>

<timepubdatedatetime="2012-03-01">

</time>

</p>

</footer>

<figure> 和 <figcaption> 元素

规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义<figure> 元素的标题.

<figcaption>元素应该被置于"figure" 元素的第一个或最后一个子元素的位置。

<imgsrc="img_pulpit.jpg"alt="The Pulpit Rock"width="304"height="228">

<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>

</figure>

以上的元素都是块元素(除了<figcaption>)。

为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

header,section, footer, aside, nav, article, figure
{
display: block;
}

Web 存储

简介

web存储,一个比cookie更好的本地存储方式。

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

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

localStorage 和sessionStorage

l localStorage - 没有时间限制的数据存储

l sessionStorage - 针对一个 session 的数据存储

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined"){

// 是的!支持 localStorage sessionStorage对象!

// 一些代码.....}

else{

// 抱歉!不支持 web 存储。

}

localStorage 对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

localStorage.sitename="菜鸟教程";

document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

l 保存数据：localStorage.setItem(key,value);

l 读取数据：localStorage.getItem(key);

l 删除单个数据：localStorage.removeItem(key);

l 删除所有数据：localStorage.clear();

l 得到某个索引的key：localStorage.key(index);

if(localStorage.clickcount){localStorage.clickcount=Number(localStorage.clickcount)+1;}

else{localStorage.clickcount=1;}

document.getElementById("result").innerHTML="你已经点击了按钮" + localStorage.clickcount +"次";

sessionStorage 对象

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

if(sessionStorage.clickcount){sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;}

else{sessionStorage.clickcount=1;}

document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮" + sessionStorage.clickcount +"次";

Web Storage 开发一个简单的网站列表程序

Web SQL 数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的APIs。

三个核心方法：

1. openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。

2. transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

3. executeSql：这个方法用于执行实际的 SQL 查询。

打开数据库

我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：

var db = openDatabase('mydb','1.0', 'TestDB', 2* 1024 * 1024);

openDatabase() 方法对应的五个参数说明：

1. 数据库名称

2. 版本号

3. 描述文本

4. 数据库大小

5. 创建回调

执行查询操作

执行操作使用 database.transaction()函数：

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)');

});

插入数据

在执行上面的创建表语句后，我们可以插入一些数据：

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 (1, "菜鸟教程")');

   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');

});

读取数据

以下实例演示了如何读取数据库中已经存在的数据：

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 (1, "菜鸟教程")');

   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');

});

db.transaction(function (tx) {

   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {

      var len = results.rows.length, i;

      msg = "<p>查询记录条数: " + len + "</p>";

      document.querySelector('#status').innerHTML +=  msg;

      for (i = 0; i < len; i++){

         alert(results.rows.item(i).log );

   }, null);

});

删除记录

删除记录使用的格式如下：

db.transaction(function (tx) {

    tx.executeSql('DELETE FROM LOGS  WHERE id=1');

});

删除指定的数据id也可以是动态的：

db.transaction(function(tx) {

    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);

});

更新记录

更新记录使用的格式如下：

db.transaction(function (tx) {

    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');

});

更新指定的数据id也可以是动态的：

db.transaction(function(tx) {

    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);

});

huhanghao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录