前端基础知识

来源：互联网发布：怎么推广app软件编辑：程序博客网时间：2024/05/19 03:22

HTML 教程- (HTML5标准)

超文本标记语言（英语：HyperText MarkupLanguage，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML来建立自己的 WEB站点，HTML 运行在浏览器上，由浏览器来解析。

在本教程中，您将学习如何使用 HTML来创建站点。

HTML 很容易学习！相信您能很快学会它！

HTML 实例

本教程包含了数百个 HTML实例。

使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。

注意：对于中文网页需要使用 <metacharset="utf-8"> 声明编码，否则会出现乱码。

实例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

尝试一下 »

点击 "尝试一下" 按钮查看在线实例

HTML文档的后缀名

· .html

· .htm

以上两种后缀名没有区别，都可以使用。

开始学习HTML!

HTML 实例

在 HTML手册中包含了数百个在线实例，您可以在线编辑并查看运行结果。

查看 HTML实例！

HTML 参考手册

在菜鸟教程中，我们提供了完整的 HTML参考手册，其中包括标签、属性、颜色、实体等等。

HTML标签参考手册

HTML简介

笔记列表

1. tianqixin

429***967@qq.com

参考地址

注意:HTML中不支持空格、回车、制表符，它们都会被解析成一个空白字符。

实例

菜鸟

教程

尝试一下 »

tianqixin

429***967@qq.com

参考地址

8个月前(01-04)

2. 一路风尘

896***31@qq.com

参考地址

在使用中常常遇到 utf-8和 utf8，现在终于弄明白他们的使用不同之处了，现在来和大家分享一下，下面我们看一下 utf-8和 utf8有什么区别。

"UTF-8" 是标准写法，php在 Windows下边英文不区分大小写，所以也可以写成 "utf-8"。"UTF-8"也可以把中间的"-"省略，写成 "UTF8"。一般程序都能识别，但也有例外（如下文），为了严格一点，最好用标准的大写"UTF-8"。

在数据库中只能使用"utf8"(MySQL)在MySQL的命令模式中只能使用"utf8"，不能使用"utf-8"，也就是说在PHP程序中只能使用 "set names utf8(不加小横杠)"，如果你加了"-"此行命令将不会生效，但是在 PHP 中 header时却要加上"-"，因为 IE不认识没杠的"utf8"，原因见下文。

PHP 中的 header：

<?php header('Content-Type: text/html; charset=UTF-8');?> //奇怪了：Content-Type 用冒号，Chatset却是等号。

静态文件使用：

总结：【只有在MySQL中可以使用"utf-8"的别名"utf8"，但是在其他地方一律使用大写"UTF-8"。】

具体为：

除了在命令 "mysql_query(setnames utf8)" 外一律用大写"UTF-8"。

一路风尘

896***31@qq.com

参考地址

5个月前(03-27)

3. 一路风尘

896***31@qq.com

参考地址

html 与 htm的区别

前者是超文本标记(HypertextMarkup)

后者是超文本标记语言(HypertextMarkup Language)

可以说 htm = html

同时，这两种都是静态网页文件的扩展名，扩展名可以互相更换而不会引起错误（这是指打开而言，但是对于一个链接来说，如果它指向的是一个htm文件，而那个htm文件被更改为html文件，那么是找不到这个连接的）

那为什么出现两种文件格式呢？

htm 是来源于老的 8.3文件格式，DOS操作系统只能支持长度为三位的后缀名，所以是 htm,但在 windows下无所谓 HTM与 HTML，html是为长文件名的格式命名的。所以 htm是为了兼容过去的DOS命名格式存在的，在效果上没有区别的。以前 htm和 html 作为不同的服务器上的超文本文件，但现在通用。

什么是8.3文件格式？这是一种在老的16位Win95或Win98文件系统的短文件名文件格式，扩展名只限于3位，文件名只限于8位。如果要与16位系统交互，比如说，要把一个路径传给一个16位的程序，你就不能用长文件名，而必须对它进行转换。例如把"C： /MyLongestPath/MyLongerPath/MyFilename.txt"转换成"C： /Mylong~1/MyLong~2/Myfile~1.txt"

了解这个有什么用？在FAT磁盘格式下的DOS中只支持8.3文件格式，如果你要在这个环境下做应用，应该要注意这个文件格式问题。在NTFS下，默认可以兼容这种文件格式，同时也支持长文件名，你也可以通过调整注册表来取消对8.3文件格式也支持。

一路风尘

896***31@qq.com

参考地址

5个月前(03-27)

4. stinkaroo

190***276@qq.com

后缀名选择：用 htm还是用 html ?

推荐使用长后缀名 html 。

命名应该遵从含义清晰、简洁、一致性原则。含义清晰指见名知义，比如这里的 htm（hypertext markup）和 html (hypertext markup language) 均采用的是英文单词首字母缩写，含义清晰。简洁要求变量命名尽量简短，比如此处后缀名使用首字母缩写而不使用全单词。一致性原则要求同环境下的大量变量命名符合同样的规则，比如有的朋友习惯于Linux文件夹命名规则后，使用win系统时新建文件夹命名仍拒绝使用空格，这便造成了新文件夹名与旧文件夹名命名规则不一致。

一致性原则往往更为重要。比如合作开发时，不能各守其是，人为提高开发难度。

从一路风尘的笔记中，我们了解到 htm是历史遗留的8.3字符限制命名方式，而现在我们在命名时并未遵守8.3规则。因此，从 htm和 html 中选择时，也应该选择无限制长度命名方式的 html

HTML 简介

HTML 实例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

尝试一下 »

实例解析

· <!DOCTYPE html> 声明为 HTML5文档

· <html> 元素是 HTML页面的根元素

· <head> 元素包含了文档的元（meta）数据

· <title> 元素描述了文档的标题

· <body> 元素包含了可见的页面内容

· <h1> 元素定义一个大标题

· <p> 元素定义一个段落

什么是HTML?

HTML 是用来描述网页的一种语言。

· HTML指的是超文本标记语言: HyperText Markup Language

· HTML不是一种编程语言，而是一种标记语言

· 标记语言是一套标记标签 (markup tag)

· HTML使用标记标签来描述网页

· HTML文档包含了HTML 标签及文本内容

· HTML文档也叫做 web页面

HTML 标签

HTML 标记标签通常被称为 HTML标签 (HTML tag)。

· HTML标签是由尖括号包围的关键词，比如 <html>

· HTML标签通常是成对出现的，比如<b>和 </b>

· 标签对中的第一个标签是开始标签，第二个标签是结束标签

· 开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML 元素

"HTML 标签"和"HTML元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

HTML 网页结构

下面是一个可视化的HTML页面结构：

<html>

<head>

</head>

<body>

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

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

</body>

</html>

只有 <body> 区域 (白色部分) 才会在浏览器中显示。

HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

版本

发布时间

HTML

1991

HTML+

1993

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML 1.0

2000

HTML5

2012

XHTML5

2013

<!DOCTYPE> 声明

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

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

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPEhtml>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPEhtml>

HTML 4.01

<!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

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

查看完整网页声明类型 DOCTYPE参考手册。

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为UTF-8。

HTML 实例

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>页面标题</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

HTML 基础- 4个实例

不要担心本章中您还没有学过的例子，

您将在下面的章节中学到它们。

HTML 标题

HTML 标题（Heading）是通过<h1>- <h6>标签来定义的.

实例

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

尝试一下 »

HTML 段落

HTML 段落是通过标签 <p>来定义的.

实例

<p>这是一个段落。</p><p>这是另外一个段落。</p>

尝试一下 »

HTML 链接

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

实例

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

尝试一下 »

提示:在 href属性中指定链接的地址。

(您将在本教程稍后的章节中学习更多有关属性的知识).

HTML 图像

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

实例

<imgsrc="/images/logo.png"width="258"height="39"/>

尝试一下 »

注意： 图像的名称和尺寸是以属性的形式提供的。

HTML 元素

HTML 文档由 HTML元素定义。

HTML 元素

<="" p="" style="color:rgb(51, 51, 51); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial,STHeiti, 'Microsoft Yahei', sans-serif; font-size: 12px; font-style: normal;font-variant: normal; font-weight: normal; letter-spacing: normal; line-height:normal; orphans: auto; text-align: start; text-indent: 0px; text-transform:none; white-space: normal; widows: 1; word-spacing: 0px;-webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);">

开始标签 *

元素内容

结束标签 *

<p>

这是一个段落

</p>

这是一个链接

</a>

<br>

*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法

· HTML 元素以开始标签起始

· HTML 元素以结束标签终止

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

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

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

· 大多数 HTML 元素可拥有属性

注释: 您将在本教程的下一章中学习更多有关属性的内容。

嵌套的 HTML 元素

<="" p="">

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

HTML 文档实例

<!DOCTYPEhtml>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

以上实例包含了三个 HTML 元素。

HTML 实例解析

<p> 元素:

<p>这是第一个段落。</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签<p> 以及一个结束标签 </p>.
元素内容是: 这是第一个段落。

<body> 元素:

<body>
<p>这是第一个段落。</p>
</body>

<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签<body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签<html> ，以及一个结束标签 </html>.
元素内容是另一个 HTML 元素（body 元素）。

不要忘记结束标签

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

<p>这是一个段落
<p>这是一个段落

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

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

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

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

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

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

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML 属性

属性是 HTML 元素提供的附加信息。

HTML 属性

· HTML元素可以设置属性

· 属性可以在元素中添加附加信息

· 属性一般描述于开始标签

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

属性实例

HTML 链接由 <a>标签定义。链接的地址在 href属性中指定：

实例

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

尝试一下 »

HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

提示: 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'

HTML 提示：使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

HTML 属性参考手册

查看完整的HTML属性列表: HTML标签参考手册。

下面列出了适用于大多数 HTML元素的属性：

属性

描述

class

为html元素定义一个或多个类名（classname）(类名从样式文件引入)

定义元素的唯一id

style

规定元素的行内样式（inline style）

title

描述了元素的额外信息 (作为工具条使用)

更多标准属性说明： HTML标准属性参考手册.

HTML元素

HTML标题

笔记列表

1. gouer

wyl***@qq.com

1. 属性和属性值，尽量小写，本来这样做也方便些。

2. class属性可以多用class = " "（引号里面可以填入多个class属性）

3. id属性只能单独设置id = " "（只能填写一个，多个无效）

gouer

wyl***@qq.com

2个月前 (06-14)

点我分享笔记

笔记需要是本篇文章的内容扩展！

HTML 标题

在 HTML文档中，标题很重要。

HTML 标题

标题（Heading）是通过 <h1> -<h6>标签进行定义的.

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

实例

<h1>这是一个标题。</h1><h2>这是一个标题。</h2><h3>这是一个标题。</h3>

尝试一下 »

注释: 浏览器会自动地在标题的前后添加空行。

标题很重要

请确保将 HTML标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

HTML 水平线

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

hr 元素可用于分隔内容。

实例

<p>这是一个段落。</p><hr><p>这是一个段落。</p><hr><p>这是一个段落。</p>

尝试一下 »

HTML 注释

可以将注释插入 HTML代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

实例

尝试一下 »

注释: 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。。

HTML 提示 -如何查看源代码

你是否看过一些网页然后惊叹它是如何实现的的。

如果您想找到其中的奥秘，只需要单击右键，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

本站实例

标题
如何在 HTML 文档中显示标题。

隐藏注释
如何在 HTML 源代码中插入注释。

水平线
如何插入水平线。

HTML 标签参考手册

菜鸟教程的标签参考手册提供了有关这些标题及其属性的更多信息。

您将在本教程下面的章节中学到更多有关 HTML标签和属性的知识。

标签

描述

<html>

定义 HTML 文档

<body>

定义文档的主体

定义 HTML 标题

<hr>

定义水平线

定义注释

HTML属性

HTML段落

笔记列表

1. stinkaroo

190***276@qq.com

标题大小与字体大小的关系

1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。

<font size="6">这是6号字体文本</font>

<font size="5">这是5号字体文本</font>

<font size="4">这是4号字体文本</font>

<font size="3">这是3号字体文本</font>

<font size="2">这是2号字体文本</font>

<font size="1">这是1号字体文本</font>

尝试一下 »

HTML 文本格式化

加粗文本

斜体文本

电脑自动输出

这是_下标和^上标

尝试一下 »

HTML 格式化标签

HTML 使用标签 <b>("bold")与 <i>("italic")对输出的文本进行格式,如：粗体 or 斜体

这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

在线实例

文本格式化
此例演示如何在一个 HTML 文件中对文本进行格式化

预格式文本
此例演示如何使用 pre 标签对空行和空格进行控制。

"计算机输出"标签
此例演示不同的"计算机输出"标签的显示效果。

地址
此例演示如何在 HTML 文件中写地址。

缩写和首字母缩写
此例演示如何实现缩写或首字母缩写。

文字方向
此例演示如何改变文字的方向。

块引用
此例演示如何实现长短不一的引用语。

删除字效果和插入字效果
此例演示如何标记删除文本和插入文本。

HTML 文本格式化标签

标签

描述

<b>

定义粗体文本

<em>

定义着重文字

<i>

定义斜体字

<small>

定义小号字

定义加重语气

<sub>

定义下标字

<sup>

定义上标字

<ins>

定义插入字

<del>

定义删除字

HTML "计算机输出"标签

标签

描述

<code>

定义计算机代码

<kbd>

定义键盘码

<samp>

定义计算机代码样本

<var>

定义变量

<pre>

定义预格式文本

HTML 引文,引用,及标签定义

标签

描述

<abbr>

定义缩写

定义地址

<bdo>

定义文字方向

定义长的引用

<q>

定义短的引用语

<cite>

定义引用、引证

<dfn>

定义一个定义项目。

HTML段落

HTML链接

笔记列表

1. yogi

you***30@foxmail.com

参考地址

文本显示为单行，超过部分隐藏并使用省略号，实例:

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

尝试一下 »

使用display:-webkit-box;让文本显示为多行(只有-webkit内核才有作用)，实例:

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

width:100px;

尝试一下 »

yogi

you***30@foxmail.com

参考地址

5个月前(03-21)

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

尝试一下 -实例

HTML链接
如何在HTML文档中创建链接。

(可以在本页底端找到更多实例)

HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a>中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

· 一个未访问过的链接显示为蓝色字体并带有下划线。

· 访问过的链接显示为紫色并带有下划线。

· 点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS样式，展示样式会根据 CSS的设定而显示。

HTML 链接语法

链接的 HTML代码很简单。它类似这样：

<ahref="url">链接文本</a>

href 属性描述了链接的目标。.

实例

<ahref="http://www.runoob.com/">访问菜鸟教程</a>

上面这行代码显示为：访问菜鸟教程

点击这个超链接会把用户带到菜鸟教程的首页。

提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target属性

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

下面的这行会在新窗口打开文档：

实例

<ahref="http://www.runoob.com/"target="_blank">访问菜鸟教程!</a>

尝试一下 »

HTML 链接- id属性

id属性可用于创建在一个HTML文档书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。

实例

在HTML文档中插入ID:

<aid="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<ahref="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

<ahref="http://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

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

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

更多实例

图片链接
如何使用图片链接。

在当前页面链接到指定位置
如何使用书签

跳出框架
本例演示如何跳出框架，假如你的页面被固定在框架之内。

创建电子邮件链接
本例演示如何链接到一个邮件。（本例在安装邮件客户端程序后才能工作。）

建电子邮件链接 2
本例演示更加复杂的邮件链接。

HTML 链接标签

标签

描述

<a>

定义一个超级链接

HTML <head>

查看在线实例

<title> -定义了HTML文档的标题
使用 <title> 标签定义HTML文档的标题

<base> -定义了所有链接的URL
使用 <base> 定义页面中所有链接默认的链接目标地址。

HTML<head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）,样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>,<style>, <meta>, <link>, <script>, <noscript>,and <base>.

HTML<title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML文档中是必须的。

<title> 元素:

· 定义了浏览器工具栏的标题

· 当网页添加到收藏夹时，显示在收藏夹中的标题

· 显示在搜索引擎结果页面的标题

一个简单的 HTML文档:

实例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>文档标题</title></head><body>文档内容......</body></html>

HTML<base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>

</head>

HTML<link> 元素

<head>

</head>

HTML<style> 元素

在<style>元素中你也可以直接添加样式来渲染 HTML文档:

<head>

body {background-color:yellow}

p {color:blue}

</style>

</head>

HTML<meta> 元素

meta标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

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

<meta> 标签-使用实例

为搜索引擎定义关键词:

为网页定义描述内容:

定义网页作者:

每30秒中刷新当前页面:

HTML<script> 元素

HTML head 元素

标签

描述

<head>

定义了文档的信息

<title>

定义了文档的标题

<base>

定义了页面链接标签的默认链接地址

<link>

定义了一个文档和外部资源之间的关系

<meta>

定义了HTML文档中的元数据

定义了客户端的脚本文件

<style>

定义了HTML文档的样式文件

DTD 教程

DTD（文档类型定义）的作用是定义 XML文档的合法构建模块。

DTD 可被成行地声明于 XML文档中，也可作为一个外部引用。

现在开始学习DTD!

DTD 新闻实例

<!DOCTYPE NEWSPAPER [

<!ELEMENT NEWSPAPER (ARTICLE+)>
<!ELEMENT ARTICLE (HEADLINE,BYLINE,LEAD,BODY,NOTES)>
<!ELEMENT HEADLINE (#PCDATA)>
<!ELEMENT BYLINE (#PCDATA)>
<!ELEMENT LEAD (#PCDATA)>
<!ELEMENT BODY (#PCDATA)>
<!ELEMENT NOTES (#PCDATA)>

<!ATTLIST ARTICLE AUTHOR CDATA #REQUIRED>
<!ATTLIST ARTICLE EDITOR CDATA #IMPLIED>
<!ATTLIST ARTICLE DATE CDATA #IMPLIED>
<!ATTLIST ARTICLE EDITION CDATA #IMPLIED>

]>

DTD 简介

文档类型定义（DTD）可定义合法的XML文档构建模块。它使用一系列合法的元素来定义文档的结构。

DTD 可被成行地声明于 XML文档中，也可作为一个外部引用。

内部的 DOCTYPE 声明

假如 DTD 被包含在您的 XML源文件中，它应当通过下面的语法包装在一个 DOCTYPE声明中：

<!DOCTYPEroot-element [element-declarations]>

带有 DTD 的 XML文档实例（请在 IE5以及更高的版本打开，并选择查看源代码）：

<?xmlversion="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>

在您的浏览器中打开此XML文件，并选择"查看源代码"命令。

以上 DTD 解释如下：

· !DOCTYPE note (第二行)定义此文档是 note 类型的文档。

· !ELEMENT note (第三行)定义 note 元素有四个元素："to、from、heading,、body"

· !ELEMENT to (第四行)定义 to 元素为 "#PCDATA" 类型

· !ELEMENT from (第五行)定义 from 元素为 "#PCDATA" 类型

· !ELEMENT heading (第六行)定义 heading 元素为 "#PCDATA" 类型

· !ELEMENT body (第七行)定义 body 元素为 "#PCDATA" 类型

外部文档声明

假如 DTD 位于 XML源文件的外部，那么它应通过下面的语法被封装在一个DOCTYPE定义中：

<!DOCTYPEroot-element SYSTEM "filename">

这个 XML 文档和上面的 XML文档相同，但是拥有一个外部的 DTD:（点击打开该文件，并选择"查看源代码"命令。）

<?xmlversion="1.0"?>
<!DOCTYPE note SYSTEM "note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

这是包含 DTD 的 "note.dtd" 文件：

<!ELEMENTnote (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>

为什么使用 DTD？

通过 DTD，您的每一个 XML文件均可携带一个有关其自身格式的描述。

通过 DTD，独立的团体可一致地使用某个标准的 DTD来交换数据。

而您的应用程序也可使用某个标准的 DTD来验证从外部接收到的数据。

您还可以使用 DTD 来验证您自身的数据。

DTD - XML 构建模块

XML 和 HTML文档的主要的构建模块是元素标签。

XML 文档构建模块

所有的 XML文档（以及 HTML 文档）均由以下简单的构建模块构成：

· 元素

· 属性

· 实体

· PCDATA

· CDATA

元素

元素是 XML以及 HTML 文档的主要构建模块。

HTML 元素的例子是"body"和 "table"。XML元素的例子是 "note"和 "message"。元素可包含文本、其他元素或者是空的。空的 HTML元素的例子是 "hr"、"br"以及 "img"。

实例:

<body>sometext</body>

<message>some text</message>

属性可提供有关元素的额外信息。

属性总是被置于某元素的开始标签中。属性总是以名称/值的形式成对出现的。下面的 "img"元素拥有关于源文件的额外信息：

<imgsrc="computer.gif" />

元素的名称是 "img"。属性的名称是 "src"。属性的值是"computer.gif"。由于元素本身为空，它被一个 " /" 关闭。

实体

实体是用来定义普通文本的变量。实体引用是对实体的引用。

大多数同学都了解这个 HTML实体引用：" "。这个"无折行空格"实体在 HTML 中被用于在某个文档中插入一个额外的空格。

当文档被 XML解析器解析时，实体就会被展开。

实体引用

字符

PCDATA

PCDATA 的意思是被解析的字符数据（parsed characterdata）。

可把字符数据想象为 XML元素的开始标签与结束标签之间的文本。

PCDATA 是会被解析器解析的文本。这些文本将被解析器检查实体以及标记。

文本中的标签会被当作标记来处理，而实体会被展开。

不过，被解析的字符数据不应当包含任何 &、<或者 > 字符；需要使用 &、<以及 > 实体来分别替换它们。

CDATA

CDATA 的意思是字符数据（character data）。

CDATA 是不会被解析器解析的文本。在这些文本中的标签不会被当作标记来对待，其中的实体也不会被展开

DTD - 元素

在一个 DTD 中，元素通过元素声明来进行声明。

声明一个元素

在 DTD 中，XML元素通过元素声明来进行声明。元素声明使用下面的语法：

<!ELEMENTelement-name category>
或
<!ELEMENT element-name (element-content)>

空元素

空元素通过类别关键词EMPTY进行声明：

<!ELEMENTelement-name EMPTY>

实例:

<!ELEMENT br EMPTY>

XML example:

<br />

只有 PCDATA 的元素

只有 PCDATA 的元素通过圆括号中的 #PCDATA进行声明：

<!ELEMENTelement-name (#PCDATA)>

实例:

<!ELEMENT from (#PCDATA)>

带有任何内容的元素

通过类别关键词 ANY 声明的元素，可包含任何可解析数据的组合：

<!ELEMENTelement-name ANY>

实例:

<!ELEMENT note ANY>

带有子元素（序列）的元素

带有一个或多个子元素的元素通过圆括号中的子元素名进行声明：

<!ELEMENTelement-name (child1)>
或
<!ELEMENT element-name (child1,child2,...)>

实例:

<!ELEMENT note (to,from,heading,body)>

当子元素按照由逗号分隔开的序列进行声明时，这些子元素必须按照相同的顺序出现在文档中。在一个完整的声明中，子元素也必须被声明，同时子元素也可拥有子元素。"note"元素的完整声明是：

<!ELEMENTnote (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>

声明只出现一次的元素

<!ELEMENTelement-name (child-name)>

实例:

<!ELEMENT note (message)>

上面的例子声明了：message子元素必须出现一次，并且必须只在 "note"元素中出现一次。

声明最少出现一次的元素

<!ELEMENTelement-name (child-name+)>

实例:

<!ELEMENT note (message+)>

上面的例子中的加号（+）声明了：message子元素必须在"note"元素内出现至少一次。

声明出现零次或多次的元素

<!ELEMENTelement-name (child-name*)>

实例:

<!ELEMENT note (message*)>

上面的例子中的星号（*）声明了：子元素 message可在 "note" 元素内出现零次或多次。

声明出现零次或一次的元素

<!ELEMENTelement-name (child-name?)>

实例:

<!ELEMENT note (message?)>

上面的例子中的问号(?)声明了：子元素 message可在 "note" 元素内出现零次或一次。

声明"非.../既..."类型的内容

实例:

<!ELEMENT note (to,from,header,(message|body))>

上面的例子声明了："note"元素必须包含 "to"元素、"from" 元素、"header" 元素，以及非 "message" 元素既 "body" 元素。

声明混合型的内容

实例:

<!ELEMENT note (#PCDATA|to|from|header|message)*>

上面的例子声明了："note"元素可包含出现零次或多次的 PCDATA、"to"、"from"、"header"或者 "message"。

实体是用于定义引用普通文本或特殊字符的快捷方式的变量。

· 实体引用是对实体的引用。

· 实体可在内部或外部进行声明。

一个内部实体声明

语法

<!ENTITYentity-name "entity-value">

实例

DTD 实例:

<!ENTITY writer "Donald Duck.">
<!ENTITY copyright "Copyright W3CSchool.cc">

XML 实例：

<author>&writer;&copyright;</author>

注意： 一个实体由三部分构成:一个和号 (&), 一个实体名称, 以及一个分号 (;)。

一个外部实体声明

语法

<!ENTITYentity-name SYSTEM "URI/URL">

实例

DTD 实例:

<!ENTITY writer SYSTEM "http://www.w3cschool.cc/entities.dtd">
<!ENTITY copyright SYSTEM "http://www.w3cschool.cc/entities.dtd">

XML example:

<author>&writer;&copyright;</author>

DTD - 来自网络的实例

电视节目表 DTD

由 David Moisan 创造。拷贝自： http://www.davidmoisan.org/

<!DOCTYPETVSCHEDULE [

<!ELEMENT TVSCHEDULE (CHANNEL+)>
<!ELEMENT CHANNEL (BANNER,DAY+)>
<!ELEMENT BANNER (#PCDATA)>
<!ELEMENT DAY (DATE,(HOLIDAY|PROGRAMSLOT+)+)>
<!ELEMENT HOLIDAY (#PCDATA)>
<!ELEMENT DATE (#PCDATA)>
<!ELEMENT PROGRAMSLOT (TIME,TITLE,DESCRIPTION?)>
<!ELEMENT TIME (#PCDATA)>
<!ELEMENT TITLE (#PCDATA)>
<!ELEMENT DESCRIPTION (#PCDATA)>

<!ATTLIST TVSCHEDULE NAME CDATA #REQUIRED>
<!ATTLIST CHANNEL CHAN CDATA #REQUIRED>
<!ATTLIST PROGRAMSLOT VTR CDATA #IMPLIED>
<!ATTLIST TITLE RATING CDATA #IMPLIED>
<!ATTLIST TITLE LANGUAGE CDATA #IMPLIED>
]>

报纸文章 DTD

拷贝自：http://www.vervet.com/

<!DOCTYPENEWSPAPER [

<!ELEMENT NEWSPAPER (ARTICLE+)>
<!ELEMENT ARTICLE (HEADLINE,BYLINE,LEAD,BODY,NOTES)>
<!ELEMENT HEADLINE (#PCDATA)>
<!ELEMENT BYLINE (#PCDATA)>
<!ELEMENT LEAD (#PCDATA)>
<!ELEMENT BODY (#PCDATA)>
<!ELEMENT NOTES (#PCDATA)>

<!ATTLIST ARTICLE AUTHOR CDATA #REQUIRED>
<!ATTLIST ARTICLE EDITOR CDATA #IMPLIED>
<!ATTLIST ARTICLE DATE CDATA #IMPLIED>
<!ATTLIST ARTICLE EDITION CDATA #IMPLIED>

<!ENTITY NEWSPAPER "Vervet Logic Times">
<!ENTITY PUBLISHER "Vervet Logic Press">
<!ENTITY COPYRIGHT "Copyright 1998 Vervet Logic Press">

]>

产品目录 DTD

拷贝自： http://www.vervet.com/

<!DOCTYPECATALOG [

<!ENTITY AUTHOR "John Doe">
<!ENTITY COMPANY "JD Power Tools, Inc.">
<!ENTITY EMAIL "jd@jd-tools.com">

<!ELEMENT CATALOG (PRODUCT+)>

<!ELEMENT PRODUCT
(SPECIFICATIONS+,OPTIONS?,PRICE+,NOTES?)>
<!ATTLIST PRODUCT
NAME CDATA #IMPLIED
CATEGORY (HandTool|Table|Shop-Professional) "HandTool"
PARTNUM CDATA #IMPLIED
PLANT (Pittsburgh|Milwaukee|Chicago) "Chicago"
INVENTORY (InStock|Backordered|Discontinued) "InStock">

<!ELEMENT SPECIFICATIONS (#PCDATA)>
<!ATTLIST SPECIFICATIONS
WEIGHT CDATA #IMPLIED
POWER CDATA #IMPLIED>

<!ELEMENT OPTIONS (#PCDATA)>
<!ATTLIST OPTIONS
FINISH (Metal|Polished|Matte) "Matte"
ADAPTER (Included|Optional|NotApplicable) "Included"
CASE (HardShell|Soft|NotApplicable) "HardShell">

<!ELEMENT PRICE (#PCDATA)>
<!ATTLIST PRICE
MSRP CDATA #IMPLIED
WHOLESALE CDATA #IMPLIED
STREET CDATA #IMPLIED
SHIPPING CDATA #IMPLIED>

<!ELEMENT NOTES (#PCDATA)>

]>

阅读全文

0 0