HTML简明教程(一)

HTML简明教程(一)

**内容主体来自:W3School **

一、HTML 简介

二、HTML 基础

三、HTML 元素

四、HTML 属性

五、HTML 标题

六、HTML 段落

七、HTML 文本格式化

八、HTML 样式CSS

九、HTML 链接

一、HTML简介

什么是 HTML?

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

什么是HTML 标签

  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
  • HTML 标签是由尖括号包围的关键词,比如
  • HTML 标签通常是成对出现的,比如
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取HTML文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容:

<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

例子解释

  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落

二、HTML基础

HTML 标题

HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落

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

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

<a href="http://www.w3school.com.cn">This is a link</a>

注释:在 href 属性中指定链接的地址。

HTML 图像

HTML 图像是通过 HTML简明教程(一) 标签进行定义的。

<img src="w3school.jpg" width="104" height="142" />

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

三、HTML 元素

HTML 文档是由 HTML 元素定义的。

HTML 元素

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

开始标签 元素内容 结束标签
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br />

注释:开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

HTML元素的嵌套

大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素)。HTML 文档由嵌套的 HTML 元素构成。例如:

<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

不要忘记结束标签

虽然即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML,但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。HTML5 版本不允许省略结束标签。

空的 HTML 元素

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

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

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

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

HTML 提示:使用小写标签

虽然大写标签还一直存在,但是请使用小写标签,从开始就形成良好的习惯!

四、HTML 属性

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

请使用英文小写的属性名

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

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

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

属性例子 1:

<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。

属性例子 2:

<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

属性例子 3:

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

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

name='Bill "HelloWorld" Gates'

完整的 HTML 参考手册

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

属性 描述
class classname 规定元素的类名(classname)
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式(inline style)
title text 规定元素的额外信息(可在工具提示中显示)

更多关于标准属性的信息请访问:

HTML 标准属性参考手册

五、HTML 标题

HTML 标题

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

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

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

注释:默认情况下,HTML会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

标题很重要

请确保将 HTML heading标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。

HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。

HTML 注释

浏览器会忽略注释,也不会显示它们。注释是这样写的:

<!-- This is a comment -->

注释:开始括号之后需要紧跟一个叹号,结束括号之前(右边的括号)不需要。

六、HTML 段落

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

注释:浏览器会自动地在段落的前后添加空行。(因为它是块级元素)

提示:不要使用空的段落标记 <p></p> 去插入一个空行。

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:

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

HTML 空行和空格的输出

我们无法确定 HTML被显示的确切效果。屏幕的大小,以及对窗口的调整都可能导致不同的结果。对于HTML,您无法通过在HTML代码中添加额外的空格或换行来改变输出的效果。当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。

七、HTML 文本格式化

文本格式化标签

标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<s> 不赞成使用。使用 代替。
<strike> 不赞成使用。使用 代替。
<u> 不赞成使用。使用样式(style)代替。

“计算机输出”标签

标签 描述
<code> 定义计算机代码。
<kbd> 定义键盘码。
<samp> 定义计算机代码样本。
<tt> 定义打字机代码。
<var> 定义变量。
<pre> 定义预格式文本。
<listing> 不赞成使用。使用
 代替。
<plaintext> 不赞成使用。使用
 代替。
<xmp> 不赞成使用。使用
 代替。
引用、引用和术语定义
标签 描述
<abbr> 定义缩写。
<acronym> 定义首字母缩写。
<address> 定义地址。
<bdo> 定义文字方向。
<blockquote> 定义长的引用。
<q> 定义短的引用语。
<cite> 定义引用、引证。
<dfn> 定义一个定义项目。

八、HTML 样式CSS

所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表: 外部样式表 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。可以在 head 部分通过 <style> 标签定义内部样式表。

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

访问CSS 教程,学习更多有关样式的知识。

九、HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。

通过使用 <a> 标签在 HTML 中创建链接。

有两种使用<a> 标签的方式:

  • 通过使用 href 属性 - 创建指向另一个文档的链接
  • 通过使用 name 属性 - 创建文档内的书签
  • 通过使用 target 属性 - 定义被链接的文档在何处显示

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

<a href="url">Link text</a>

href 属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。提示:"链接文本"不必一定是文本。图片或其他HTML元素都可以成为链接。

HTML 链接 - target 属性

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

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

<a href="http://www.sina.com.cn/" target="_blank">Visit sina!</a>

HTML 链接 - name 属性

name 属性规定锚(anchor)的名称。

可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示,它对读者是不可见的。

当使用命名锚(namedanchors)时,可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法:

<a name="label">锚(显示在页面上的文本)</a>

提示:锚的名称可以是任何你喜欢的名字。

提示:您可以使用 id 属性来替代 name 属性,命名锚同样有效。

实例

首先,我们在 HTML 文档中对锚进行命名(创建一个书签):

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

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

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

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

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

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

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

提示:假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

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

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

上一篇:深入理解Java虚拟机(自动内存管理机制)


下一篇:HTML5桌面通知:notification api