HTML&XHTML入门笔记:二、快速启动

smigoo

2.1编写工具

编写:任何文本编辑器皆可。

查看:Microsoft Internet Explorer,Mozilla Firefox,Apple Safari,Netscape Navigator,Opera皆可。不同浏览器显示效果可能不同,因为HTML和XHTML不是页面布局语言,只能尽量建议浏览器如何显示。

2.2 一个最简单的HTML文档

<html>

<head>

<title> My first HTML document</title>

<head/>

<body>

<h2>My first HTML document</h2>

Hello , <i>World Wide Web!</i>

<!–NO “Hello , World”for us–!>

<p>

Welcome!<br>

<a href=”http://www.smigoo.net”>Smigoo</a>

<p>

<em>And</em><br>

<a href=”http://www.digbase.net”> Digbase </a>

<p>

&copy; Smigoo

</body>

</html>

2.3内部的标签

HTML,XHTML都是嵌入式语言:可以把语言的指示符或标签(tag)插入文档中,在读者调用这个文档时,就可以在浏览器中显示出来。浏览器利用这些标签中的信息,判断如何显示及处理文档中的不同内容。

Tag中的第一个单词是它的正式名称,该名称一般描述了该标签的功能。Tag的其余词语一般都是标签的属性(attribute),这些属性定义或修改了标签的行为。

2.3.1开始标签和结束标签

1.结束标签永远没有属性。

2.HTML标签中可以省略一些结束标签。(如2.2的例子)

3.XHTML规定所有标签必须有对应的结束标签。

2.4 HTML的“骨架”

<html>

<head>

<title> </title>

<head>

<body>

</body>

</html>

2.5 HTML和XHTML文档的“皮肉”

3种主要内容:标签,注释comment,文本text

2.5.1 注释

“<!–” + 标签内容 +“–!>”

2.5.2文本

即浏览器显示的部分。标签定义了文本的结构,如标题列表和表格等。另一些标签对内容的格式和显示向浏览器提出建议。

2.5.3 多媒体

多媒体(包括图像,声音等)不属于HTML文档中的一部分,只是文档中通过标签加载这些元素与文本集成在一起。

2.6 文本

HTML和XHTML不是页面布局语言,只能尽量建议浏览器如何显示。

2.6.1 文本的外观

HTML和XHTML不是页面布局语言,所以应该将重心放到文档的内容上,可以用级联样式表(Cascading Style Sheet , CSS)定义样式。当也可以通过物理样式及与内容相关的文本样式标签定义文档的外观,只是无法预知在不同的运行环境下确切的外观是怎样。

2.6.1.1 基于内容的文本样式

基于内容的样式标签会告诉HTML/XHTML文档某一部分的用途或意义。

如之前的例中的<em></em>表示强调模式(emphasis);

如果语气够强的话还可以用<Strong>;

此外还有<cite>表示引用;

<code>表示程序代码片断;

<kbd>表示由用户从键盘输入的内容;

<samp>表示范例文本;

<dfn>表示定义;

<var>表示程序语言中代码的变量名称。

或许这些标签所显示的文本样式并不那么明显,但是他们却是基于内容的,所有标签中的内容是同一种特殊的部分。这可以使文档更容易实现自动化操作,且易于管理。

2.6.1.2 物理样式

如<i>斜体,<b>加粗,<tt>等宽字体等等。

2.6.1.3 特殊文本字符

“©”:&copy;

“>”:&gt;

“<”:&lt;

“&”:&amp;

等等,同时也可以用字符在Unicode码表中的位置标号来显示,之前需要加“#”,如“&#033;”表示的是“!”。

2.6.2 文本结构

2.6.2.1 部分,段落和换行

部分<div>,段落<p>,换行<br>

<div>和<p>标签分别定义了文档和文本的基本区域,我们可以对这些区域中的内容在浏览器中进行特殊排列,并对其他与块相关的特性应用文本样式,或改变。

若无特殊的排列属性,<div>和<p>会断开文本一行,并另起一行。而<p>比<div>,<br>行距要大。

2.6.2.2 标题

从<h1>到<h6>共6中等级标题标签,<h4>一般与普通文本字体大小相同。标题也会打断当前文本流,独占一行。

2.6.2.3 水平分割符

<hr>会断开文本流,在新的一行画一条贯穿整个窗口的直线。

2.6.2.4 预先格式化的文本

<pre>包括全文的空格,回车,换行符等等。

2.7 超链接

锚:anchor

2.7.1 URL

统一资源定位符:URL(Uniform resource locator)

协议://服务器域名/路径名/文件名

2.7.2 锚

锚标签(<a>)是HTML和XHTML文档中用来定义超链接的源和目标的特性。属性href的值为目标的URL。

点击就会打开SMIGOO.NET<a href=”http://www.smigoo.net”>不信你点</a>

2.7.3 超链接的名称和导航

标签id和name可以作为文档内部的超链接目标,因此可以实现统一文档或不同文档指定位置的跳转。

1. 同一文档或其他文档中需跳转部分:

<h5 id=”smigoo”>这里的ID是“smigoo</h5>

2. 将此ID值作为该文档URL的后缀,并使用“#”隔开:

如果在同一文档中,内容很长,点击下面就可以直接帮你达到ID处,加不加“”都可以。

<a href=#smigoo>点点试试</a>

如果不同文档,加油绝对或相对路径吧!点击下面就可以直接帮你达到ID处。

<a href=”..\text.html”>再点点试试</a>

2.7.4锚之外的内容

超链接除了HTML和XHTML文档之外,还可以指向任何类型的文档,包括其他因特网服务。

2.8 特殊的图像

2.8.1 内联图像

标签<img>,用src属性指定图像文件。

浏览器会单独下载图像,并将其插入文本流中,就好象它们是特殊的字符。可以通过CSS中的align属性改变图像与文本的对齐方式,顶部(top),中间(middle),底部(bottom)三种。

2.8.2 图像映射

图像映射是一个锚内具有特殊属性的图像:它们可以包含若干个超链接。

1. 服务器端图像映射:<a>标签中的<img>标签中添加ismap属性,当用户用鼠标单击图像的某处时,图像浏览器可以将鼠标位置相对的x,y坐标发送给该链接所指向的服务器。

2. 客户端图像映射:<img>标签的usemap属性和<map>标签,<area>标签允许创作者把浏览器处理图像所需要的信息一同包含图像所在的文档。

2.9 列表,可搜索文档和表单

可搜索文档和表单超出了文本格式化的范畴,它们是一种与读者进行交互的方式。

2.9.1 无序,有序和定义列表

无序列表指的是项目顺序并不重要的一种列表,用<ul></ul>来定义边界,列表中的每一个项目通常是词或短语,用<li>(列表符)来进行标记。在使用XHTML时一定要加上标签结束符</li>,在使用这种列表时,列表项通常会从左边开始缩进,每一项前还会加上一个项目符号。

有序列表用<ol>和</ol>界定边界,它们与无序列表格式相同,包括标记列表项的<li>标签,不过浏览器会在列表每一项前加上升序的编号。

定义列表,用<dl></dl>限定边界,每个项目符由两部分组成,一个简短的标题或者名称被包含在<dt>标签中,后面紧跟相应的值或定义,用<dd>标签表示,在XHTML中必须有结束标签。显示这种标签时,浏览器通常会将项目名称独占一行,而它的定义以缩进的形式显示在下面。

2.9.2 可搜索文档与表单

<isindex>标签(不赞成使用)

<form></form>

2.10 表格

包括<table>标签和对表格进行说明的<caption>标签在内,共有8种支持表格的标签。

用户可以逐行创建表格,在表格的行<tr>和</tr>之间可以放置表头的标签<th>或者表格数据标签<td>,以及与他们相对应的内容。

2.11 框架

可以将浏览器分成不同区域,每个区域显示不同的文档。

框架是在特殊的文档中定义的,在那里可以用一个或多个<frameset>标签来代替<body>标签,这样可以告诉浏览器如何让将主窗口分割成独立的框架。特殊的<frame>标签是在<frameset>中的,并指向在框架中显示的文档。

2.12 样式表和JavaScript

样式表允许用户控制网页的外观,控制文本字体样式及其大小,颜色,背景,对齐方式等等。更重要的是,样式表使整个文档集中显示一致的显示特性。

JavaScript是一种编程语言,其函数和命令允许你为用户控制浏览器的行为。

Tags: , ,

One comment

  1. 写得相当详细哦!我要好好学习!

    [回复]

Leave a comment