HTML/XHTML

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


1.实例解析

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

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

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

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


1.1空的 HTML 元素

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

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

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

 XHTMLXML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTMLXHTML  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)  仅在 bodyframeset 元素中有效。

属性描述

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脚本当鼠标按钮被松开时执行脚本


你可能感兴趣的:(HTML/XHTML)