1.HTML_w3初学笔记汇总（自用）

最新推荐文章于 2024-04-22 15:24:17 发布

曲调响起琴声悠扬

最新推荐文章于 2024-04-22 15:24:17 发布

阅读量523

点赞数

分类专栏： HTML 文章标签：前端 html

本文链接：https://blog.csdn.net/qq_42636335/article/details/120650504

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

和

HTML 5 Canvas vs. SVG

HTML简介

什么是HTML：是用来描述网页的一种语言

HTML（Hyper Text Markup Language）：超本文标记语言
HTML不是编程语言是标记语言
标记语言是一套标记标签
HTML使用标记标签来描述网页

HTML标签：尖括号、通常成对出现（开始标签、结束标签）

HTML文档 = 网页：HTML文档描述网页、包含HTML标签和纯文本

HTML编辑器

基本的HTML标签

HTML标题：通过<h1>-<h6>等标签定义

<html>

<body>

<h1>h1标题</h1>
<h2>h2标题</h2>

</body>
</html>

HTML段落：通过<p>标签定义

HTML链接：通过<a>标签定义

<a href = "https://www.baidu.com"> This is a link </a>

HTML图像：通过<img>标签定义

<img src = "路径" width = "***" height = "***" />

HTML元素

HTML元素：指的是从开始标签/开放标签（start tag/opening tag）到结束标签/闭合标签（end tag/closing tag）的所有代码

HTML元素语法

开始标签起始，结束标签终止
元素内容是开始标签与结束标签之间的内容
某些HTML元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）理解为不成对出现的标签(<br>)，在开始的时候关闭（不需要</br>）
大多HTML元素可拥有属性

嵌套的HTML元素：HTML文档由嵌套的HTML元素构成

HTML实例解析

<html>

<body>

<p>This is my first paragraph </p>

</body>

</html>

<html>元素定义了整个HTML文档

<body>元素定义了HTML文档主体

<p>定义了HTML文档中的一个段落

空的HTML元素

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

在XHML/XML以及未来版本的HTML中，所有元素都必须被关闭。

在开始标签中添加斜杠（<br/>），是关闭空元素的正确方法，即使不加也有效，但使用<br/>更有长远保障

HTML属性

属性为HTML元素提供附加信息

HTML属性：属性提供了有关HTML元素的更多信息；属性总以名称/值对的形式出现（name = “value”）；属性总在HTML的开始标签中规定

属性实例

始终为属性值加引号：属性值应该始终被包括在引号内。双引号是最常用的，单引号也行。

在某些情况下，比如属性值本身就含有双引号，那我们就必须使用单引号。

name='Bill "HelloWorld" Gates'

完整的HTML属性参考手册https://www.w3school.com.cn/tags/index.asphttps://www.w3school.com.cn/tags/index.asp

HTML全局属性https://www.w3school.com.cn/tags/html_ref_standardattributes.asphttps://www.w3school.com.cn/tags/html_ref_standardattributes.asp

HTML标题

HTML标题：通过<h1> - <h6> 等标签进行定义的（1为最大/最重要）。

浏览器会自动在标题前后添加空行（默认情况，HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后）

标题很重要：请确保HTML heading标签只用于标题，不要仅仅为产生粗体或大号文本而使用标题，搜索引擎使用标题为网页的结构和内容编制索引。因为用户可以通过标题快速浏览网页，所以用标题来呈现文档结构很重要。

HTML水平线： <hr />标签在HTML页面中创建水平线。hr元素可用于分隔内容。

HTML注释：

HTML段落

HTML段落：通过<p>标签定义

浏览器会自动在段落前后添加空行（<p>是块级元素）

HTML折行：如果希望在不产生一个新段落的情况下换行（新行），请使用<br/>标签

<br> or <br />：在XHML、XML以及未来的HTML版本中，不允许使用没有结束标签（闭合标签）的HTML元素。使用<br/>是更长远的保障。

HTML输出提示：我们无法确定HTML被显示的确切效果，屏幕的大小以及对窗口的调整都可能导致不同的结果。对于HTML，我们无法通过咋HTML代码中添加额外的空格或换行来改变输出效果。当显示页面时，浏览器会移除源代码中多于的空格和空行，所有连续的空格或空行（换行）都会被算作一个空格。

HTML样式

style属性用于改变HTML样式

HTML的style属性：提供了一种改变所有HTML元素的样式的通用方法

样式是HTML4引入的，通过HTML样式，能够通过使用style属性直接将样式添加到HTML元素中或者间接地在独立的样式表（css文件）进行定义。

不赞成使用的标签和属性

标签	描述
<center>	定义居中的内容
<font>和<basefont>	定义HTML字体
<s>和<strike>	定义删除线字体
<u>	定义下划线文本
属性	描述
align	定义文本的对齐方式
bgcolor	定义背景颜色
color	定义文本颜色

对于上述标签和属性：请用样式代替

HTML样式实例

<!DOCTYPE HTML>
<html>
<body style="background-color:purple">

<h1 align = "center" style = "background-color:green" "text-align:center">16第一个标题</h1>

<p>16第一个段落</p>

<br />
<hr />
<img src = "C:\Users\asus\Desktop\File\mmexport1569996628752.jpg" width = "200" height = "100">一个图片<img/>


</body>
</html>

HTML文本格式化

<b> 定义粗体文字

<big>定义大号文字

<em>定义着重文字

<i>定义斜体字

<small>定义小号字

<sub>定义下标字

<sup>定义上标字

<ins>定义插入字

<del>定义删除字

<pre>预格式文本，保留空格

<code>定义计算机代码

<kbd>定义键盘码

<samp>定义计算机代码样本

<tt>定义打印机代码

<var>定义变量

<address>定义地址

<abbr>定义缩写

<bdo>定义文字方向

<blockquote>定义长的引用

HTML引用

HTML<q>用于短的引用：定义短的引用

浏览器通常会为<q>元素包围引号。

用于长引用的HTML<blockquote>:定义被引用的节

浏览器通常会对<blockquote>元素进行缩进处理。

用于缩略词的HTML<abbr>：定义缩写或首字母缩略语

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

用于定义的HTML<dfn>：定义项目或缩写的定义

设置title属性时：
设置包含具有标题的<abbr>元素时：

前两种光标放置时，均有内容弹出

否则，文本内容即是项目，并且父元素包含定义

用于联系信息的HTML<address>：定义文档或文章的联系信息（作者/拥有者）

通常斜体显示，大多浏览器会在此元素前后添加折行

用于著作标题的HTML<cite>：定义著作的标题

通常斜体显示

用于双向重写的HTML<bdo>：定义双流向覆盖

用于覆盖当前文本方向

HTML注释

HTML注释标签：

注释对于HTML纠错也有很大帮助。

条件注释：条件注释定义只有Internet Exper执行的HTML标签

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

软件程序标签

各种HTML软件程序也能生成HTML注释。

例如标签会被包围在由FrontPage 和 Expression Web创建的HTML注释中。

作为一项规则，这些标签的存在，有助于对创建这些标签的软件的支持。

HTML颜色

颜色由红绿蓝混合而成

颜色值：RGB

颜色名：大多浏览器都支持颜色名集合

Web安全色：数年前，当大多数计算机仅支持256种颜色时，一系列216种Web安全色作为Web标准被建议使用。其中的原因是，微软和Mac操作系统使用了40种不通过的保留的固定系统颜色。

216跨平台色

HTML颜色名

仅有16种颜色名被W3C的HTML4.0标准支持。他们是： aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。

如果使用其他颜色，应使用十六进制的颜色值。

颜色名列表

颜色名列表https://www.w3school.com.cn/html/html_colornames.asphttps://www.w3school.com.cn/html/html_colornames.asp

HTML CSS

通过使用HTML4.0，所有的格式化代码均可移出HTML文档，然后移入一个独立的样式表

如何使用样式

外部样式表：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表就可以通过更改一个文件来改变整个站点的外观。
内部样式表：当单个文件需要特别样式时，可以在head部分通过<style>标签定义内部样式表
内联样式：当特殊的样式需要应用到个别元素时，可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。

HTML链接

HTML使用超级链接与网络上的另一个文档相连

HTML超链接（链接）

有两种使用<a>标签的方式：

通过使用href属性 - 创建指向另一个文档的连接

通过使用name属性 - 创建文档内的书签

HTML链接语法

<a href = "url">Link text </a>

"链接文本"不一定是文本，图片或其他HTML元素也可以成为链接

HTML链接 - target属性

使用target属性，可以定义被链接的文档在何处显示

<a href = "http://www.w3school.com.cn/" target = "_blank"> Visit W3chool! </a>

_blank：浏览器总在一个新打开、未命名的窗口中载入目标文档
_self：这个目标的值对所有没有指定目标的<a>标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题<base>标签中的garget属性一起使用
_parent：这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者顶级框架中，那么它与目标_self等效
_top：这个目标使得文档载入包含这个超链接的窗口，用_top目标将会清除所有被包含的框架并将文档载入整个浏览器窗口

HTML链接 - name属性

name属性规定锚（anchor）的名称

可以用name属性创建HTML页面中的书签

书签不会以任何特殊方式显示，它对读者是不可见的

当使用命名锚时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，使用者就无需不停地滚动页面来寻找他们需要的信息。

<a name = "label"> 锚（显示在页面上的文本）</a>

可以用id属性替代name属性，命名锚同样有效。

基本的注意事项 - 有用的提示

请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次http请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href = “http://www.w3school.com.cn.html/”

命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，会发现其中几乎每个词条都采用这样的导航方式。

假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端，不会发生错误。

跳出框架：跳出框架是指在框架之外运行打开，“你的网页被固定在框架之内”，指的是有人在做网页，利用框架把别人的网页嵌入在他的网页框架之中，好像是他做的网页，可以通过代码，使自己做的网页跳出框架。

HTML图像

通过使用HTML，可以在文档中显示图像

图像标签（<img>）和源属性（Src）

在HTML中，图像由<img>标签定义

<img>是空标签，只包含属性，没有闭合标签

要在页面上显示图像需要使用源属性（src），值为图像的URL地址

<img src = ""url />

替换文本属性（Alt）

alt属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。

<img src = "boat.gif" alt = "Big Boat">

当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时浏览器将显示这个替代性的文本而不是图像，为页面上的图像都加上替换文本属性是个好习惯，有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML表格

表格：表格由<table>标签定义。每个表格有若干行（<tr>），每行被分割为若干单元格（<td>），字母td指表格数据，即单元格内容。

表格和边框属性：如果不定义边框属性，表格将不显示边框。

表格的表头：表格的表头使用<th>标签进行定义，大多浏览器会把表头显示未粗体居中文本

表格中的空单元格：在一些浏览器中，没有内容的表格单元显示的不太好，如果是空的浏览器可能无法显示出这个单元格的边框。（为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来）

<caption>：定义表格标题

colspan/rowspan属性：横跨单元格

cellpadding属性：单元格边距

cellspacing属性：单元格间距

HTML列表

HTML支持有序、无序和定义列表

无序列表：无序列表是一个项目的列表，用粗体圆点标记

无序列表始于<ul>标签，每个列表项始于<li>

有序列表：也是一列项目，用数字标记

有序列表始于<ol>标签，每个列表始于<li>

定义列表：自定义列表不仅仅是一列项目，而是项目及其注释的组合

自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

HTML<div>和<span>

可以通过<div>和<span> 将HTML元素组合起来

HTML块元素

大多数HTML元素被定义为块级元素或内联元素

块级元素在浏览器显示时，通常会以新行来开始和结束

例子：<h1>,<p>,<ul>,<table>

HTML内联元素：内联元素在显示时通常不会以新行开始

例子：<b>,<td>,<a>,<img>

HTML<div>元素

HTML<div>元素是块级元素，它是可用于组合其他HTML元素的容器

<div>元素没有特定含义，并且因属于块级元素，浏览器会在其前后行显示折行

如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性

<div>元素的另一个常见用途是文档布局，它取代了使用表格定义布局的老式方法

HTML<span>元素

HTML<span>元素是内联元素，可用作文本的容器，没有特定含义

与CSS一同使用时，<span>元素可用于为部分文本设置样式属性。

HTML类

对HTML进行分类（设置类），使我们能够为元素的类定义CSS样式

分类块级元素：设置<div>元素的类，能够为相同的<div>元素设置相同的类

分类行内元素：HTML<span>元素是行内元素，能够用作文本容器，设置元素的类，能够为相同的<span>元素设置相同的样式

HTML id属性

HTML id 属性用于HTML元素指定唯一的id

一个HTML文档中不能存在多个有相同id的元素

使用id属性

id属性指定HTML元素的唯一ID。id属性的值在HTML文档中必须是唯一的。

id属性用于指向样式表中特定样式声明。Javascript也可以使用它来访问和操作拥有特定ID的元素

id语法：写一个#，后跟id名称

id对大小写敏感，id必须包含至少一个字符（不能空格、制表符等）

Class与id的差异

同一个类名可以由多个HTML元素使用，而一个id名称只能由页面的一个HTML元素使用

通过id和链接实现HTML书签

HTML书签用于让读者跳转至网页的特定部分

如果页面很长，那么书签可能很有用

要使用书签必须先创建，然后添加链接

当单击链接时，页面将滚动到带有书签的位置

在Javascript中使用id属性

Javascript也可以使用id属性为特定元素执行某些任务

可以使用getElementById() 的方法访问拥有特定id 的元素

HTML Iframe

Iframe用于在网页内显示网页

添加Ifram语法

<iframe src = "URL"></iframe>

Iframe - 设置高度和宽度

height和width属性用于规定iframe的高度和宽度，属性值的默认单位是像素，也可以用百分比设定

Iframe - 删除边框

frameborder属性规定能否显示iframe周围的边框，设置属性值为“0”就可以移出边框

使用iframe作为链接的目标

iframe可用作链接的目标，链接的target属性必须引用iframe的name属性

HTML JavaScript

JavaScript使HTML页面更具动态性和交互性

HTML <script>标签

HTML <script>标签用于定义客户端脚本（JavaScript）

JavaScript的常见用途是图像处理、表单验证和内容的动态更改

如需选取HTML元素，Javascript最常用document.getElementById()方法

HTML <noscrpit>标签

HTML<noscript>标签定义了替代内容，这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户

HTML文件路径

HTML路径：文件路径描述了网站文件夹结构中某个文件的位置

文件路径会在链接外部文件时被用到：网页、图像、样式表、Javascript

绝对文件路径：是指向一个因特网文件的完成URL

<img src="https://www.w3scholl.com.cn/images/picture.jpg" alt="flower">

相对路径：相对路径指向了相对于当前页面的文件

使用相对路径是个好习惯，如果使用了相对路径，那么网页就不会与当前的基准URL进行绑定。所有链接在localhost或未来的公共域中均可正常工作

HTML头部元素

HTML <head>元素

<head>元素是所有头部元素的容器。<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等。

<title>、<base>、<link>，<meta>，<script>以及<style>都可以添加到head部分

HTML <title>元素

<title>标签定义文档的标题

title元素在所有HTML/XHTML文档中都是必须的

title元素能够：定义浏览器工具栏中的标题、提供页面被添加到收藏夹时显示的标题、显示在搜索引擎结果中的页面标题。

HTML <base>元素：为页面上所有链接规定默认地址或默认目标

HTML <link>元素：标签定义文档与外部资源之间的管理

<head>

<link rel = "stylesheet" type = "text/css" href = "mystyle.css" />

</head>

HTML <style>元素：用于为HTML文档定义样式信息

可以在style元素内规定HTML元素在浏览器中呈现的样式

HTML <meta>元素

元数据是关于数据的信息

典型情况下meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他数据

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他web服务

针对搜索引擎的关键词：一些搜索引擎会利用meta元素的name和content属性来索引您的页面

meta元素定义页面的描述

<meta name = "description" content = "Free Web tutorials on HTML,CSS,XML" />

meta元素定义页面的关键词

<meta name = "keywords" content="HTML,CSS,XML" />

HTML <script>元素

HTML 布局

使用<div>元素的HTML布局

<div>元素常用作布局工具，因为能够轻松地通过CSS对其进行定位

HTML响应式 Web设计

响应式Web设计：RWD（Responsive Web Design），能够以可变尺寸传递网页，对于平板和一定设备是必需的。

使用Bootstrap：另一个创建响应式设计的方法，是使用现成的CSS框架

Bootstrap是最流行的开发响应式web的HTML，CSS和JS框架

Bootstrap帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机

HTML 计算机代码元素

计算机代码

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}

HTML计算机代码格式

通常，HTML使用可变的字母尺寸，以及可变的字母间距

在显示计算机代码时不需要如此

<kbd>，<samp>以及<code>元素全都支持固定的字母尺寸和间距

HTML键盘格式

<kbd>元素定义键盘输入

HTML样本格式

<samp>元素定义计算机输出示例

HTML代码格式

<code>元素定义编程代码示例

<code>元素不保留多余的空格和折行

HTML 变量格式化

<var>元素定义数学变量

HTML5 语义元素

语义元素清楚地向浏览器和开发者描述其意义

非语义元素：<div>和<span> - 无法提供关于其内容的信息

语义元素：<form>、<table>以及<img> - 清晰地定义其内容

HTML5中新的语义元素

HTML5 <section>元素：定义文档中的节（节：是有主题的内容组，通常具有标题）

可以将网站首页划分为简介、内容、联系信息等节

HTML5 <article>元素：规定独立的自包含内容

文档有其自身的意义，并且可以独立于网站其他内容进行阅读

<article>元素应用场景：论坛、博客、新闻

嵌套语义元素

在HTML5标准中，<article>元素定义完整的相关元素自包含块

<section>元素被定义为相关元素块

在因特网上，会发现<section>元素包含<article>元素的HTML页面，还有<article>元素包含<section>元素页面，还会发现<section>元素包含<section> 元素，<article>元素包含<article>元素

HTML5 <header>元素

<header>元素为文档或节规定页眉

<header>元素应该被用作介绍性内容的容器

一个文档中可以有多个<header>元素

HTML5 <footer>元素

<footer>元素为文档或节规定页脚

<footer>元素应该提供有关其包含元素的信息

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等

可以在一个文档中使用多个<footer>元素

HTML5 <nav>元素：定义导航链接集合

<nav>元素旨在定义大型的导航链接块，但是并非文档中所有链接都应位于<nav>元素中

HTML5 <aside>元素：页面主内容之外的某些内容（比如侧栏）

HTML5 <figure>和<figcaption>元素

<figure>标签规定独立的流内容（图像、图标、照片、代码等），figure元素的内容应该与主内容相关，如果被删除不应对文档流产生影响。

<figcaption>标签定义figure元素的标题，figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置

在书和报纸中，与图片搭配的标题很常见。

标题的作用是为图片添加可见的解释

通过HTML5，图片和标题能够被组合在<figure>元素中

<img>定义图像，<figcaption>定义标题

HTML（5）样式指南和代码约定

HTML代码约定

请始终在文档首行声明文档类型
请使用小写元素名
关闭所有HTML元素
使用小写属性名
属性值加引号
请始终对图像使用alt属性
请始终定义图像尺寸（这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间）
精简空格更易阅读
避免长代码行
请勿毫无理由地增加空行（为了提高可读性，请增加空行来分割大型或逻辑代码；请增加两个空格的缩进，请勿使用TAB）
不推荐省略<html>、<body>以及<head>标签
短注释应该在单行中书写，长注释跨越多行，应该通过注释符号在独立的行中书写
请使用简单的语法来链接样式表（type属性不是必需的）
在逗号或分号之后添加空格，是所有书写类型的通用规则
请使用简单的语法来加载外部脚本（type属性不是必需的）
使用小写文件名
正确使用文件扩展名

HTML字符实体

HTML中的预留字符必需被替换为字符实体

HTML实体

HTML中，某些字符是预留的。在HTML钟不能使用小于号和大于号，因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在HTML源代码中使用字符实体

&entity_name

or

&#entity_number

不间断空格

HTML中常用字符实体是不间断空格（ ）

HTML中有用的字符实体

HTML符号

键盘上不存在的字符也可以由实体代替

HTML支持的一些符号

数学符号：

希腊字母

其他实体

HTML编码（字符集）

UTF-8几乎涵盖世界上所有字符和符号

HTML charset属性

为了正确显示HTML页面，Web浏览器必须知道页面中使用的字符集

<meta charset="UTF-8">

若未规定，UTF-8则是HTML中的默认字符集

UTF-8字符

很多UTF-8字符无法在键盘上键入，但始终可以使用数字显示

必须以&#开头并以；（分号）结束实体编号

HTML编码（字符集）

为了正确显示HTML页面，web浏览器必须知道要使用哪个字符集

HTML统一资源定位器

URL（Uniform Resource Locator统一资源定位符）也被成为网址

scheme://host.domain:port/path/filename

scheme - 定义因特网服务类型，最常见的类型是http
host - 定义域主机（http的默认主机是www）
domain - 定义因特网域名
：port - 定义主机上的端口号
path - 定义服务器上的路径
filename - 定义文档/资源名称

URL Schemes

http - 超文本传输协议 - 以http://开头的普通网页，不加密
https - 安全超文本传输协议 - 安全网页，加密所有信息交换
ftp - 文件传输协议 - 用于将文件下载或上传至网站
file - - 计算机上的文件

HTML框架

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面

框架

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面，每份HTML文档成为一个框架，并且每个框架都独立于其他的框架

坏处：开发人员必须同时跟踪更多的HTML文档，很难打印整张页面

框架结构标签 <frameset>

框架结构标签（<frameset>）定义如何将窗口分割为框架

每个frameset定义了一系列行或列

rows/columns的值规定了每行或每列占据屏幕的面积

框架标签（frame）

frame标签定义了放置在每个框架中的HTML文档

提示：假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在<frame>标签中加入：noresize=“noresize”

为不支持框架的浏览器添加<noframes>标签

不能将<body></body>标签与<frameset></frameset>标签同时使用！假如你添加包含一段文本的<noframes>标签，就必须将这段文字嵌套于<body></body>标签内

HTML背景

背景（backgrounds）

<body>拥有两个配置背景的标签，背景可以是颜色或者图像

背景颜色属性值可以是十六进制数、RGB或颜色名

HTML URL字符编码

URL编码会将字符转换为可通过因特网传输的格式

HTML <!DOCTYPE>

常见的生命

HTML5

<!DOCTYPE html>

HTML 4.0.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML表单

HTML表单用于搜集不同类型的用户输入

表单本身是不可见的

表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等等。

<input>元素

<input>元素是最重要的表单元素，根据不同的type属性有很多形态

text：定义常规文本输入
radio：定义单选按钮输入
submit：定义提交按钮

文本输入

<input type="text">定义用于文本输入的单行输入字段

单选按钮输入

<input type="radio">定义单选按钮

单选按钮允许用户在有限数量的选项中选择其中之一

提交按钮

<input type="submit">定义用于向表单处理程序提交表单的按钮

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面

表单处理程序在表单的action属性中指定

Action属性

action属性定义在提交表单时执行的动作

向服务器提交表单的通常做法是使用提交按钮

通常表单会被提交到web服务器上的网页

如果忽略action属性，则action会被设置为当前页面

Method属性

method属性规定在提交表单时所用的HTTP方法（GET或POST）

<form action="action/-page.php" method="GET">

<form action="action/-page.php" method="POST">

如何使用GET

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息

当您使用GET时，表单数据在页面地址栏中是可见的

action_page.php?firstname=Mickey&lastname=Mouse

何时使用POST

如果表单正在更新数据或者包含敏感信息（例如密码）

POST的安全性更好，因为在页面地址栏中被提交的数据是不可见的

Name属性

如果要正确地被提交，每个输入字段必须设置一个name属性

用<fieldset>组合表单数据

<fieldset>元素组合表单中的相关数据

<legend>元素为<fieldset>元素定义标题

HTML Form属性

HTML<form>元素已设置所有可能的属性

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"

ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>

form elements

</form>

accept-charset - 规定在被提交表单中使用的字符集（默认：页面字符集）
action - 规定向何处提交表单的地址（URL）（提交页面）
autocomplete - 规定浏览器应该自动完成表单（默认：开启）
enctype - 规定被提交数据的编码（默认：url-encoded）
method - 规定在提交表单时所用的HTTP方法（默认：GET）
name - 规定识别表单的名称（对于DOM使用：document.forms.name）
novalidate - 规定浏览器不验证表单
target - 规定action属性中地址的目标（默认：_self）

HTML 表单属性

Action属性：action属性定义提交表单时要执行的操作

通常用户单击“提交”按钮时，表单数据将发送到服务器上的文件中

Target属性：target属性规定提交表单后在何处显示响应

_blank：新窗口或选项卡中
_self：当前窗口中
_parent：父框架中
_top：窗口的整个body中
framename：命名的iframe中

默认值为_self

Method属性：指定提交表单数据时要使用的HTTP方法

表单数据可以作为URL变量（使用method=“get”）或作为HTTP post 事务（使用method=“post”）发送

提交表单数据时，默认的HTTP方法是GET

关于GET注意事项

以名称/值对的形式将表单数据追加到URL
永远不要使用URL发送敏感数据（提交的表达数据在URL中可见）
URL的长度受到限制（2048个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET适用于非安全数据，例如Google中的查询字符串

关于POST注意事项

将表单数据附加在HTTP请求的正文中（不在URL中显示提交的表单数据）
POST没有大小限制，可用于发送大量数据
带有POST的表单提交无法添加书签

如果表单数据包含敏感信息或个人信息，请务必使用POST

Autocomplete属性

autocomplete属性规定表单是否打开自动完成功能

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值

Novalidate属性

novalidate属性是一个布尔属性

如果已设置，它规定提交时不应验证表单数据

rel属性：规定当前文档和被链接文档之间的关系

HTML 表单元素

<input>元素：根据不同的type属性，可以变化为多种形态

<select>元素：定义下拉列表

<option>元素：定义带选择的选项

<textarea>元素：定义多行输入字段（文本域）

<button>元素：定义可以点击的按钮

HTML5表单元素

HTML5增加了如下表单元素：

<datalist>
<keygen>
<output>

HTML5 <datalist>元素

<datalist>元素为<input>元素规定预定义选项列表

用户会在他们输入数据时看到预定义选项的下拉列表

<input>元素的list属性必须引用<datalist>元素的id属性

HTML 输入类型

输入类型：

text：<input type="text">定义供文本输入的单行输入字段
password：定义密码字段
submit：定义提交表单数据至表单处理程序的按钮。表单处理程序通常是包含处理输入数据的脚本的服务器页面
radio：定义单选按钮
checkbox：定义复选框，允许用户在有限数量的选项中选择零个或多个选项
button：定义按钮

HTML5输入类型

HTML5增加了多个新的输入类型：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、rul、week

老式web浏览器不支持的输入类型会被视为输入类型text

输入类型：number：用于应该包含数字值的输入字段，能够对数字做出限制

输入限制

输入类型：data：用于包含日期的输入字段

输入类型：color：用于包含颜色的输入字段

输入类型：range：用于包含一定范围内的值的输入字段

输入类型：time：用于包含时间的输入字段

输入类型：datetime：用于包含日期和时间（有时区）的输入字段

输入类型：datetime-local：用于包含日期和时间（无时区）的输入字段

输入类型：email：用于包含电子邮件地址的输入字段，根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证，某些智能手机会识别email类型，并在键盘增加“.com”以匹配电子邮件输入

输入类型：search：用于包含搜索字段（搜索字段的表现类似常规文本字段）

输入类型：tel：用于包含电话号码的输入字段

输入类型：url：用于包含URL地址的输入字段，根据浏览器支持，在提交时能自动验证url字段

HTML Input属性

value属性：规定输入字段的初始值

readonly属性：规定输入字段为只读（不能修改）

readonly属性不需要值，它等同于readonly=“readonly”

disabled属性：规定输入字段是禁用的

被禁用的元素时不可用和不可点击的，被禁用的元素不会被提交

disabled属性也不需要值，它等同于disabled=“disabled”

size属性：规定输入字段的尺寸（以字符计）

maxlength属性：规定输入字段允许的最大长度

如设置maxlength属性，则输入控件不会接受超过所允许数的字符，该属性不会提供任何反馈。如果需要提醒用户，则必须编写javascript代码

HTML5 <input>新增属性

autocomplete属性：规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。

autocomplete属性适用于<form>以及如下<input>类型：text、search、url、tel、email、password、datepickers、range以及color。

novalidate属性：属于<form>属性，如果设置，则novalidate规定在提交表单时不对表单数据进行验证

autofocus属性：布尔属性，如果设置则规定当页面加载时<input>元素应该自动获得焦点

form属性：规定<input>元素所属的一个或多个表单，如需引用一个以上的表单，请使用空格分割的表单id列表

formaction属性：规定当提交表单时处理该输入控件的文件的URL，该属性覆盖<form>元素的action属性，适用于type=“submit”以及type=“image”

formenctype属性：规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对method=“post”的表单），该属性覆盖<form>元素的enctype属性，该属性适用于type=“submit”以及type=“image”

formmethod属性：定义用以向action URL发送表单数据（form-data）的HTTP方法，覆盖<form>元素的method属性，适用于type=“submit”以及type=“image”

formnovalidate属性：布尔属性，如果设置则规定在提交表单时不对<input>进行验证，覆盖<form>元素的novalidate属性，可用于type=“submit”

formtarget属性：规定的名称或关键词指示提交表单后在何处显示接收到的响应，覆盖<form>元素的target属性，可与type=“submit”和type=“image”使用

height属性和width属性：规定<input>元素的高度和宽度，仅用于<input type="image">

请始终规定图像尺寸，如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁

list属性：引用的<datalist>元素中包含了<input>元素的预定义选项

min和max属性：规定<input>元素的最小值和最大值，适用于所需输入类型：number、range、date、datetime、datetime-local、month、time以及week

multiple属性：布尔属性，如果设置，则规定允许用户在<input>元素中输入一个以上的值，适用于email和file

pattern属性：规定用于检查<input>元素值的正则表达式，适用text、search、url、tel、email和password。请使用全局的title属性对模式进行描述以帮助用户。

placeholder属性：规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）

该提示会在用户输入值之前显示在输入字段中，适用于：text、search、url、tel、email以及password

required属性：布尔属性，如果设置则规定在提交表单之前必须填写输入字段，适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file。

step属性：规定<input>元素的合法数字间隔

HTML Input form* 属性

介绍HTML<input>元素的不同form*属性

form属性：规定<input>元素所属的表单，属性值必须等于它所属的<form>元素的id值

HTML5 Canvas

canvas元素用于在网页上绘制图形

Canvas简介：HTML5的canvas元素使用JS在网页上绘制图像

创建Canvas元素

<canvas id="myCanvas" width="200" height="100"></canvas>

通过JavaScript来绘制

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

HTML5 内联 SVG

SVG：可伸缩矢量图形（Scalable Vector Graphics）；用于定义用于网络的基于矢量的图形；使用XML格式定义图形；图像在放大或改变尺寸的情况下其图形质量不会有损失；SVG是万维网联盟的标准

SVG的优势：可以通过文本编辑器来创建和修改；可以被搜索/索引/脚本化/压缩；可伸缩；图像可在任何的分辨率下被高质量地打印；可在图像质量不下降的情况下被放大

HTML 5 Canvas vs. SVG

Canvas和SVG都允许在浏览器中创建图形，但是它们在根本上是不同的

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

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

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

Canvas：通过JS绘制2D图形

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

SVG 与 Canvas比较

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）
不适合游戏应用

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以.png或.ijp格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

HTML 多媒体

Web上的多媒体指的是音效、音乐、视频和动画

多媒体格式：多媒体元素存储于媒体文件中

当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。

多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

视频格式

声音格式

使用哪种格式：WAVE是因特网上最受欢迎的无压缩声音格式；MP3是最新的压缩录制音乐格式

HTML 插件

插件：（Plug-in）是扩展浏览器标准功能的计算机程序

插件被设计用于许多不同的目的：运行Java小程序、运行ActiveX空间、显示Flash电影、地图、扫描病毒、验证银行账号

大多浏览器不再支持Java Applet和插件；所有浏览器均不再支持ActiveX空间；在现代浏览器中，对shockwave flash的支持也已关闭

<object>元素：所有浏览器均支持

它旨在将插件嵌入网页中，但也可以用于将HTML包含在HTML中

<embed>元素：也可定义了HTML文档中的嵌入式对象

HTML 音频

使用<embed>元素：此标签定义外部（非HTML）内容的容器

<embed>标签在HTML4中是无效的，页面无法通过HTML4验证
不同的浏览器对音频格式的支持也不同
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频
如果用户的计算机未安装插件，无法播放该音频
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放

使用<object>元素：也可以定义外部（非HTML）内容的容器

不同的浏览器对音频格式的支持也不同
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频
如果用户的计算机未安装插件，无法播放该音频
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放

使用HTML 5 <audio>元素：此元素是一个HTML5元素

最好的HTML解决方法

上面例子使用了两个不同的音频格式。HTML5<audio>元素会尝试以MP3或ogg播放音频。如果失败，代码将回退尝试<embed>元素

您必须把音频转换为不同的格式。
<audio> 元素无法通过 HTML 4 和 XHTML 验证。
<embed> 元素无法通过 HTML 4 和 XHTML 验证。
<embed> 元素无法回退来显示错误消息。

向网站添加音频的最简单方法：雅虎的媒体播放器算其中之一

使用雅虎媒体播放器是一个不同的途径。您只需简单地让雅虎来完成歌曲播放的工作就好了。

它能播放 mp3 以及一系列其他格式。通过一行简单的代码，您就可以把它添加到网页中，轻松地将 HTML 页面转变为专业的播放列表。

使用雅虎播放器是免费的。如需使用它，需要把这段JS插入网页底部

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

然后只需要简单地把MP3文件链接到您的HTML中，JS会自动地为每首歌创建播放按钮

使用超链接：如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。

以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”来播放该文件：

内联的声音：当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。

如果您打算在 web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。

我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。

HTML 视频

使用<embed>标签：标签的作用是在HTML页面中嵌入多媒体元素

HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
如果浏览器不支持 Flash，那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

使用<object>标签

如果浏览器不支持 Flash，将无法播放视频。
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放

使用<video>标签：<video>是HTML5中的新标签

最好的HTML5 解决方法：HTML5 + <object> + <embed>

优酷解决方案

在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。

如果您希望在网页中播放视频，那么您可以把视频上传到优酷等视频网站，然后在您的网页中插入 HTML 代码即可播放视频：

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

使用超链接

<a href="movie.swf">Play a video file </a>

关于内联视频的一段注释

当视频被包含在网页中时，它被称为内联视频。

如果您打算在 web 应用程序中使用内联视频，您需要意识到很多人都觉得内联视频令人恼火。

同时请注意，用户可能已经关闭了浏览器中的内联视频选项。

我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。

HTML YouTube视频

HTML YouTube 视频https://www.w3school.com.cn/html/html_youtube.asp

HTML 简介

HTML5 是最新的HTML标准
专门为承载丰富的web内容而设计的，并且无需额外插件
拥有新的语义、图形以及多媒体元素
提供的新元素和新的API简化了web应用程序的搭建
跨平台，被设计为在不同类型的硬件（PC、平板、手机、电视机等）之上运行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document
</body>

</html>

HTML5 新的属性语法

HTML5 标准允许4种不同的属性语法

HTML5 新特性

新的语义元素，比如 <header>, <footer>, <article>, and <section>。
新的表单控件，比如数字、日期、时间、日历和滑块。
强大的图像支持（借由 <canvas> 和 <svg>）
强大的多媒体支持（借由 <video> 和 <audio>）
强大的新 API，比如用本地存储取代 cookie。

HTML5 被删元素

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

HTML5 浏览器支持

所有现代浏览器都支持HTML5

此外浏览器不论新旧，都会自动把未识别元素当做行内元素来处理

把HTML5 元素定义为块级元素

HTML5定义了八个新的语义HTML元素，所有都是块级元素

可以将VSS display属性设置为block，以确保老式浏览器中正确的行为

header,section,footer,aside,nav,main,article,figure{

display:block;

}

向HTML添加新元素

可以通过浏览器trick向HTML添加任何新元素

IE的问题

上述方案可用于所有新的HTML5元素

IE8以及更早的版本，不允许对未知元素添加样式

幸运的是，Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript", "the shiv"：

以上代码是一段注释，但是IE9的早期版本会读取它（并理解他）

完整的Shiv解决方案

引用shiv代码的连接必须位于<head>元素中，因为IE需要在读取之前认识所有新元素

HTML5 skeleton

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Skeleton</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>

<body>

<header>
  <h1>HTML5 SKeleton</h1>
</header>

<nav>
<ul>
  <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
  <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>

<section>

<h1>Famous Cities</h1>

<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>

<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>

<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>

</section>

<footer>
<p>© 2014 W3Schools. All rights reserved.</p>
</footer>

</body>
</html>

HTML5 新元素

HTML5 新元素https://www.w3school.com.cn/html/html5_new_elements.asp

HTML5 迁移

更改为HTML DOTYPE
更改为HTML编码
添加shiv
为HTML5语义元素添加CSS
更改为HTML5 <header>、<footer>、<nav>、<section>、<article>

HTML5 迁移https://www.w3school.com.cn/html/html5_migration.asp

HTML5 地理位置

定位用户位置：HTML5 Geolocation API用于获得用户的地理位置（信息使用时需用户同意）

HTML5 使用地理定位：请使用getCurrentPosition()方法获得用户的位置

处理错误和拒绝

getCurrentPosition()方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数

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;
    }
  }

错误代码

Permission denied - 用户不允许地理定位
Position unavailable - 无法获取当前位置
Timeout - 操作超时

在地图中显示结果：如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌或百度

getCurrentPosition()方法返回数据

Geolocation对象

watchposition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（像汽车上的GPS）

clearWatch() - 停止watchposition()方法

HTML5 拖放

拖放（drag和drop）是很常见的特性

拖放是HTML5标准的组成部分：任何元素都可拖放

设置元素可拖放：<img draggable="true">
拖放内容：ondragstart和setData() 规定当元素被拖动时发生的事情。上述例子dataTransfer.setData()方法设置被拖动数据的数据类型和值
拖到何处：ondragover 默认数据/元素无法被放置到其他元素中，为了实现拖放，我们必须阻止元素的这种默认处理方式。本例使用event.preventDefault()
进行放置：ondrop 当放开被拖数据时，会发生drop时间。本例使用 drop(event)函数

代码解释

调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素中

HTML 本地存储

HTML本地存储：优于cookies

本地存储

在HTML5之前，应用程序数据只能存储在cookie中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与cookie不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

HTML 本地存储对象

HTML本地存储提供了两个在客户端存储数据的对象：window.localStorage - 存储没有截止日期的数据和 window.sessionStorage - 针对一个session来存储数据（当关闭浏览器标签页时数据会丢失）

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

//针对localStorage/sessionStorage的代码

}else{

}//抱歉！不支持Web Storage

localStorage对象

localStorage对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除

创建localStorage名称/值对，其中name="lastname",value="Gates"
取回"lastname"的值，并把它插到id="result"的元素中

sessionStorage对象

sessionStorage对象等同localStorage对象，不同之处在于只对一个session存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除

HTML5 应用程序缓存

使用应用程序缓存，通过创建cache manifest文件，可轻松创建web应用的离线版本

应用程序缓存：HTML5引入了应用程序缓存，意味着可对web应用进行缓存，并可在没有因特网连接时进行访问

带来的三个优势：离线浏览、速度（已缓存资源加载更快）、减少服务器负载（浏览器将只从服务器下载更新过或更改过的资源）

Cache Manifest基础：如需启动应用程序缓存，请在文档<html>标签中包含manifest属性

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了manifest的页面在用户对其访问时都会被缓存。如果未指定manifest属性，则页面不会被缓存（除非在manifest文件中指定了该页面）

manifest文件的建议文件扩展名是：".appcache"

manifest文件需要设置正确的MIME-type，即"text/cache-manifest"。必须在web服务器上进行配置

Manifest文件：是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）

manifest文件有三个部分：CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存；NETWORK - 在此标题下列出的文件需要与服务器连接，且不会被缓存；FALLBACK - 在此标题下列出的文件规定当页面无法访问时回退页面（比如404）

CACHE MANIFEST

第一行 CACHE MANIFEST 是必需的

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件被加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然可用。

NETWORK

下面的NETWORK部分规定文件“login.php”永远不会被缓存，且离线时是不可用的

NETWORK:

login.asp

可以使用星号来指示所有其他其他资源/文件都需要因特网连接

NETWORK:

*

FALLBACK

下面的FALLBACK部分规定如果无法建立因特网连接，则用"offline.html"替代/html/目录中的所有文件

FALLBACK:

/html/ /offline.html

第一个URI是资源，第二个是替补

更新缓存

一旦应用被缓存，他就会保持缓存直到发生以下情况：用户清空浏览器缓存；manifest文件被修改；由程序来更新应用缓存

实例 - 完整的Cache Manifest文件

CACHE MANIFEST
# 2012-02-21 V1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

#开头的是注释行，但也可以满足其他用途

应用的缓存只会在其 manifest 文件改变时被更新。如果您编辑了一幅图像，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

关于应用程序缓存的注意事项

请留心缓存的内容。

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。

HTML Web Workers

Web worker是运行在后台的JavaScript，不会影响页面的性能

Web worker：当在HTML页面中执行脚本时，页面是不可响应的，直到脚本已完成

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

可以继续做任何愿意做的事情：点击，选取内容等，而此时Web worker 在后台运行

检测Web Worker支持： 在创建web worker之前，请检测用户浏览器是否支持

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

//是的！支持web worker......

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

}else{

//抱歉！不支持

}

创建Web Worker文件

创建Wen worker对象

终止Web Worker

当创建web worker后，它会继续监听消息（即使在外部脚本完成后）直到被终止位置

如需终止web worker，并释放浏览器/计算机资源，请使用terminate()方法

w.terminate()

复用Web Worker

如果把worker变量设置为undefined，在其被终止后，可以重复使用该代码：

w = undefined;

Web Worker 和 Dom

由于web worker位于外部文件中，他们无法访问下例JS对象：window对象、document对象、parent对象。

HTML Server-Sent事件

Sever-Sent事件允许网页从服务器获得更新

Server-Sent事件 - One Way Messaging

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

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件，更新能够自动到达。

例如：Facebook/Twitter 更新、股价更新、新的博文、赛事结果，等等。

接收Server-Sent事件通知

EventSource对象用于接受服务器发送事件通知

创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
每当接收到一次更新，就会发生 onmessage 事件
当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

检测Server-Sent事件支持

服务器端代码实例

为了使上例运行，您需要能够发送数据更新的服务器（比如 PHP 或 ASP）。

服务器端事件流的语法非常简单。请把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。

PHP 中的代码 (demo_sse.php)：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

ASP 中的代码 (VB) (demo_sse.asp)：

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

把报头 "Content-Type" 设置为 "text/event-stream"
规定不对页面进行缓存
输出要发送的日期（始终以 "data: " 开头）
向网页刷新输出数据

曲调响起琴声悠扬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.HTML_w3初学笔记汇总（自用）

HTML简介什么是HTML：是用来描述网页的一种语言HTML（Hyper Text Markup Language）：超本文标记语言 HTML不是编程语言是标记语言标记语言是一套标记标签 HTML使用标记标签来描述网页HTML标签：尖括号、通常成对出现（开始标签、结束标签）HTML文档 =网页：HTML文档描述网页、包含HTML标签和纯文本HTML编辑器...
复制链接

扫一扫