您的位置：首页 > Web前端 > HTML

HTML简明教程（一）

2016-08-04 22:40 330 查看

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 图像是通过 标签进行定义的。

<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 元素的属性：

属性值描述
classclassname规定元素的类名（classname）
idid规定元素的唯一 id
stylestyle_definition规定元素的行内样式（inline style）
titletext规定元素的额外信息（可在工具提示中显示）
更多关于标准属性的信息请访问：

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>
不赞成使用。使用 
代替。
[code]<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/"。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航