HTML/XHTML

因为iOS 端要与WebView交互，看一下HTML.后再了解一下JS

1.实例解析

位于标签 <html> 与 </html> 描述了文档类型

位于标签 <body> 与 </body> 为可视化网页内容

位于标签 <h1> 与 </h1> 作为一个标题使用

位于标签 <p> 与 </p> 作为一个段落显示

1.1空的 HTML 元素

没有内容的 HTML 元素被称为空元素。

空元素是在开始标签中关闭的。

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

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

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

2.<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容

3.标题（Heading）

是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

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

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

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

4.HTML 链接

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

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

5.HTML 图像

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

<img src="w3cschool.png" width="104" height="142">

6.HTML 元素

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数 HTML 元素可拥有属性

HTML 段落

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

实例

<p>This is a paragraph</p>

<p>This is another paragraph</p>

亲自试一试

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

提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）

不要忘记结束标签

即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

实例

<p>This is a paragraph

<p>This is another paragraph

亲自试一试

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

注释：在未来的 HTML 版本中，不允许省略结束标签。

提示：通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。

HTML 折行

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

<p>This is<br />a para<br />graph with line breaks</p>

7.HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

属性例子 1:

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

属性例子 2:

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

属性例子 3:

<table> 定义 HTML 表格。（您将在稍后的章节学习到更多有关 HTML 表格的内容）

<table border="1"> 拥有关于表格边框的附加信息。

始终为属性值加引号

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

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

8.HTML 水平线

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

hr 元素可用于分隔内容。

实例

<p>This is a paragraph</p>

<hr />

<p>This is a paragraph</p>

<hr />

<p>This is a paragraph</p>

9.预格式文本

此例演示如何使用 pre 标签对空行和空格进行控制

10.文本格式化标签

标签描述

<b>定义粗体文本。

<big> 定义大号字。

<em>定义着重文字。

<i>定义斜体字。

<small> 定义小号字。

<strong> 定义加重语气。

<sub> 定义下标字。

<sup> 定义上标字。

<ins> 定义插入字。

<del> 定义删除字。

<s> 不赞成使用。使用 <del> 代替。

<strike> 不赞成使用。使用 <del> 代替。

<u>不赞成使用。使用样式（style）代替。

11.引用、引用和术语定义

标签 描述

<abbr> 定义缩写。

<acronym> 定义首字母缩写。

<address> 定义地址。

<bdo> 定义文字方向。

<blockquote> 定义长的引用。

<q>定义短的引用语。

<cite> 定义引用、引证。

<dfn>定义一个定义项目。

12.无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

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

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

浏览器显示如下：

Coffee

Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

13.列表标签

标签描述

<ol>定义有序列表。

<ul>定义无序列表。

<li>定义列表项。

<dl>定义定义列表。

<dt>定义定义项目。

<dd>定义定义的描述。

<dir> 已废弃。使用 <ul> 代替它。

<menu> 已废弃。使用 <ul> 代替它。

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

<div> 定义文档中的分区或节（division/section）。

HTML 布局 - 使用 <div> 元素

div 元素是用于分组 HTML 元素的块级元素。

<span>定义 span，用来组合文档中的行内元素。

15.表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（<form>）定义。

<form>

...

input 元素

...

</form>

16.iframe 用于在网页内显示网页。

文档描述

使用 <meta> 元素来描述文档。

文档关键词

使用 <meta> 元素来定义文档的关键词。

所有链接一个目标

如何使用 base 标签使页面中的所有标签在新窗口中打开

17.HTML 字符实体

小于号：&lt; 或 &#60;

不间断空格：&nbsp

大于号&gt

空格&nbsp; &#160;

< 小于号&lt; &#60;

> 大于号&gt; &#62;

& 和号&amp; &#38;

" 引号&quot; &#34;

' 撇号 &apos; (IE不支持)&#39;

￠分&cent; &#162;

£ 镑&pound; &#163;

¥ 日圆&yen; &#165;

€ 欧元&euro; &#8364;

§ 小节&sect; &#167;

© 版权&copy; &#169;

® 注册商标&reg; &#174;

™ 商标&trade; &#8482;

× 乘号&times; &#215;

÷ 除号&divide; &#247;

18.URL 编码

URL 只能使用 ASCII 字符集来通过因特网进行发送。

由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

19.XHTML 事件属性

窗口事件 (Window Events)  仅在 body和frameset 元素中有效。

属性值描述

onload脚本当文档被载入时执行脚本

onunload脚本当文档被卸下时执行脚本

表单元素事件 (Form Element Events)仅在表单元素中有效。

属性值描述

onchange脚本当元素改变时执行脚本

onsubmit脚本当表单被提交时执行脚本

onreset脚本当表单被重置时执行脚本

onselect脚本当元素被选取时执行脚本

onblur脚本当元素失去焦点时执行脚本

onfocus脚本当元素获得焦点时执行脚本

键盘事件 (Keyboard Events)

在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。

属性值描述

onkeydown脚本当键盘被按下时执行脚本

onkeypress脚本当键盘被按下后又松开时执行脚本

onkeyup脚本当键盘被松开时执行脚本

鼠标事件 (Mouse Events)

在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。

属性值描述

onclick脚本当鼠标被单击时执行脚本

ondblclick脚本当鼠标被双击时执行脚本

onmousedown脚本当鼠标按钮被按下时执行脚本

onmousemove脚本当鼠标指针移动时执行脚本

onmouseout脚本当鼠标指针移出某元素时执行脚本

onmouseover脚本当鼠标指针悬停于某元素之上时执行脚本

onmouseup脚本当鼠标按钮被松开时执行脚本