前端复习01HTML总结

大纲：

其他补充细节知识点：

1、定义锚（anchor）：

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

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接

<a href="#tips">有用的提示</a>

也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

2、响应式 Web 设计

RWD 指的是响应式 Web 设计（Responsive Web Design）

RWD 能够以可变尺寸传递网页

RWD 对于平板和移动设备是必需的

3、框架

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

框架结构标签（<frameset>）
框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

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

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

3.1如何使用 <noframes> 标签

<html>

<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

</frameset>

</html>

3.2混合框架结构

<html>

<frameset rows="50%,50%">

<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>

</frameset>

</html>

3.3导航框架

导航框架包含一个将第二个框架作为目标的链接列表。名为 "contents.htm" 的文件包含三个链接。

<html>

<frameset cols="120,*">

  <frame src="/example/html/html_contents.html">
  <frame src="/example/html/frame_a.html" name="showframe">

</frameset>

</html>

3.4内联框架

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

用于在网页内显示网页









<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
//设置高度
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
//frameborder 属性规定是否显示 iframe 周围的边框。
			
				设置属性值为 "0" 就可以移除边框
			

<iframe src="demo_iframe.htm"name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
//iframe 可用作链接的目标（target）。链接的 target 属性必须引用 iframe 的 name 属性
即 链接会在 iframe 中打开

4、文件路径

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

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

如：

//文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件//
<img src="/images/picture.jpg" alt="flower">
//文件路径指向了位于当前文件夹中 images 文件夹里的一个文件//
<img src="images/picture.jpg" alt="flower">
//文件路径指向了位于当前文件夹的上一级文件夹中 images 文件夹里的一个文件//
<img src="../images/picture.jpg" alt="flower">

5、头部元素

<title> 标签定义文档的标题,能够：

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

<base> 标签为页面上的所有链接规定默认地址或默认目标（target），如：

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

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

//下面的 meta 元素定义页面的描述：//
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
//下面的 meta 元素定义页面的关键词//
<meta name="keywords" content="HTML, CSS, XML" />

name 和 content 属性的作用是描述页面的内容。

6、URL

Uniform Resource Locator，中文也译为“统一资源定位符”，也被称为网址，可以由单词组成，比如 “w3school.com.cn”，或者是因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会键入网址的域名，因为名称比数字容易记忆。
遵守以下的语法规则：

scheme://host.domain:port/path/filename
//scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称//

其中，scheme：

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

Web 浏览器通过 URL 从 web 服务器请求页面，但URL 只能使用 ASCII 字符集来通过因特网进行发送，所以URL 必须转换为有效的 ASCII 格式：URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符，不能包含空格，通常使用 + 来替换空格。

7、<!DOCTYPE>

<!DOCTYPE> 声明帮助浏览器正确地显示网页：

Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

在 HTML5 中声明

<!DOCTYPE html>

即可

8、XHTML

XHTML DOCTYPE 是强制性的

<html> 中的 XML namespace 属性是强制性的

<html>、<head>、<title> 以及 <body> 也是强制性的

XHTML 元素必须正确嵌套

XHTML 元素必须始终关闭

XHTML 元素必须小写

XHTML 文档必须有一个根元素

XHTML 属性必须使用小写

XHTML 属性值必须用引号包围

XHTML 属性最小化也是禁止的

XHTML 文档必须进行 XHTML 文档类型声明（XHTML DOCTYPE declaration）

<html>、<head>、<title> 以及 <body> 元素也必须存在，并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title of document</title>
</head>

<body>
......
</body>

</html>

如何从 HTML 转换到 XHTML

向每张页面的第一行添加 XHTML <!DOCTYPE>
向每张页面的 html 元素添加 xmlns 属性
把所有元素名改为小写
关闭所有空元素
把所有属性名改为小写
为所有属性值加引号

9、表单知识补充

action 属性：定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮，通常，表单会被提交到 web 服务器上的网页。
如果省略 action 属性，则 action 会被设置为当前页面。

用 <fieldset> 组合表单数据：

<fieldset> 元素组合表单中的相关数据 <legend> 元素为 <fieldset> 元素定义标题

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

效果：

属性：

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

HTML Input 属性

value 属性规定输入字段的初始值
readonly 属性规定输入字段为只读（不能修改）readonly 属性不需要值。它等同于 readonly="readonly"
disabled 属性规定输入字段是禁用的 disabled 属性不需要值。它等同于 disabled="disabled"
size 属性规定输入字段的尺寸（以字符计）
maxlength 属性规定输入字段允许的最大长度

10、HTML5补充内容

HTML5 实例：

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

默认的字符编码是 UTF-8。

Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式，需要使用"the shiv"：

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

HTML5 新增表单元素：

标签	描述
<datalist>	定义输入控件的预定义选项。与input配合使用规定输入域的选项列表
<keygen>	定义键对生成器字段（用于表单）。密钥
<output>	定义计算结果。定义不同类的输出。

新的输入类型新的输入属性

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 和 width
list
min 和 max
multiple
pattern (regexp)
placeholder
required
step

新的输入类型	新的输入属性
color date datetime datetime-local email month number range search tel time url week	autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height 和 width list min 和 max multiple pattern (regexp) placeholder required step

HTML5新增输入类型:

<input type="number"> 用于应该包含数字值的输入字段,够对数字做出限制:

https://www.w3school.com.cn/tiy/t.asp?f=html_input_number

<input type="date"> 用于应该包含日期的输入字段:

https://www.w3school.com.cn/tiy/t.asp?f=html_input_date

<input type="color"> 用于应该包含颜色的输入字段:

https://www.w3school.com.cn/tiy/t.asp?f=html_input_color

<input type="range"> 用于应该包含一定范围内的值的输入字段可显示为滑动控件:

https://www.w3school.com.cn/tiy/t.asp?f=html_input_range

<input type="month"> 允许用户选择月份和年份:

https://www.w3school.com.cn/tiy/t.asp?f=html_input_month
<input type="week"> 允许用户选择周和年:
https://www.w3school.com.cn/tiy/t.asp?f=html_input_week

<input type="time"> 允许用户选择时间（无时区）:

https://www.w3school.com.cn/tiy/t.asp?f=html_input_time

<input type="datetime"> 允许用户选择日期和时间（有时区）:

https://www.w3school.com.cn/tiy/t.asp?f=html_input_datetime

<input type="datetime-local"> 允许用户选择日期和时间（无时区):

https://www.w3school.com.cn/tiy/t.asp?f=html_input_datetime-local
<input type="email">用于应该包含电子邮件地址的输入字段：

https://www.w3school.com.cn/tiy/t.asp?f=html_input_email

<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）:

https://www.w3school.com.cn/tiy/t.asp?f=html_input_search

<input type="tel"> 用于应该包含电话号码的输入字段:

https://www.w3school.com.cn/tiy/t.asp?f=html_input_tel

<input type="url"> 用于应该包含 URL 地址的输入字段:
https://www.w3school.com.cn/tiy/t.asp?f=html_input_url

HTML5新增输入属性:

autocomplete 属性规定表单或输入字段是否应该自动完成
novalidate 规定在提交表单时不对表单数据进行验证
autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点
form 属性规定 <input> 元素所属的一个或多个表单。
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 属性覆盖 <form> 元素的 novalidate 属性。可用于 type="submit"。
formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。会覆盖 <form> 元素的 target 属性。可与 type="submit" 和 type="image" 使用。
height 和 width 属性规定 <input> 元素的高度和宽度。用于 <input type="image">。
list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
min 和 max 属性规定 <input> 元素的最小值和最大值。
multiple 属性是布尔属性。如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。multiple 属性适用于以下输入类型：email 和 file。
pattern 属性规定用于检查 <input> 元素值的正则表达式。
placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。该提示会在用户输入值之前显示在输入字段中。
required 属性是布尔属性。如果设置，则规定在提交表单之前必须填写输入字段。
step 属性规定 <input> 元素的合法数字间隔。

HTML5图像:

标签描述

<canvas> 定义使用 JavaScript 的图像绘制。

<svg> 定义使用 SVG(可伸缩矢量图形) 的图像绘制。

标签	描述
<canvas>	定义使用 JavaScript 的图像绘制。
<svg>	定义使用 SVG(可伸缩矢量图形) 的图像绘制。

比较：

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

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

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

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

Canvas 是逐像素进行渲染的。

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

HTML5媒介元素:

标签	描述
<audio>	定义声音或音乐内容 <audio controls="controls"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> Your browser does not support this audio format. </audio>
<embed>	定义外部应用程序的容器（比如插件） <embed height="100" width="100" src="song.mp3" /> <embed src="movie.swf" height="200" width="200"/>
<source>	定义 <video> 和 <audio> 的来源。
<track>	定义 <video> 和 <audio> 的轨道。
<video>	定义视频或影片内容 <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video> 上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

也可以利用<object> 元素：

<object height="100" width="100" data="song.mp3"></object>

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">

HTML5新增语义元素:

标签	描述
<article>	定义文章。
<aside>	定义页面内容以外的内容（比如侧栏）。 https://www.w3school.com.cn/tiy/t.asp?f=html5_aside
<details>	定义用户能够查看或隐藏的额外细节。
<figcaption>	定义 <figure> 元素的标题。
<figure>	图片和标题能够被组合在 <figure> 元素中包含内容，比如图示、图表、照片、代码清单等。
<footer>	定义文档或节的页脚 https://www.w3school.com.cn/tiy/t.asp?f=html5_footer
<header>	规定文档或节的页眉。 https://www.w3school.com.cn/tiy/t.asp?f=html5_header
<main>	规定文档的主内容。
<mark>	定义重要的或强调的文本。
<nav>	定义导航链接,旨在定义大型的导航链接块 https://www.w3school.com.cn/tiy/t.asp?f=html5_nav
<section>	定义文档中的节。可以将网站首页划分为简介、内容、联系信息等节。 https://www.w3school.com.cn/tiy/t.asp?f=html5_section
<summary>	定义 <details> 元素的可见标题。
<time>	定义日期/时间。

HTML5API:

地理位置

拖放：

<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
//在本例中，数据类型是 "text"，而值是这个可拖动元素的 id ("drag1") function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

web存储:sessionStorge针对一个session进行数据存储，关闭浏览器创港口后清除，localStorage没有事件限制，不过它可能会因为本地时间修改失效。不过大量复杂数据结构一般用indexDB
应用缓存
web Workers:页面中执行脚本时，页面状态不可响应，直到脚本完成。在后台运行，独立于其他脚本，不会影响页面的性能。（相当于多线程并发）
SSE:网页自动获取来自服务器的更新。用于接收服务器发送时间通知

11、meta标签的作用

提供给机器解读的一些元数据。页面搜索引擎优化，定义页面实用语言等等。
属性有两个

1）http-equiv+content

charset(编码格式)
expires(过期时间)
refresh(特定时间内自动刷新跳转)
pragma(禁止浏览器从本地计算机缓存中访问页面内容no-cache)
widows-target(设定页面在窗口中以独立页面展示，防止被当成frame页调用)
set-cookie(自定义cooke)、
ontent-Type(字符集)

2）name+content

keywords(关键字)
description(主要内容)
robots(none不被检索)
author、generator(使用的制作软件)
copyright
viewport(缩放比例)