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

HTML快速入门

2016-01-19 21:16 429 查看

什么是 HTML？

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

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

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

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

HTML 标签

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

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


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


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

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

HTML 元素

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

注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 属性

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

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


属性例子 1:

<h1>
定义标题的开始。

<h1 align="center">
拥有关于对齐方式的附加信息。(居中排列标题)

属性例子 2:

<body>
定义 HTML 文档的主体。

<body bgcolor="yellow">
拥有关于背景颜色的附加信息。(背景颜色)

属性例子 3:

<table>
定义 HTML 表格。

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

HTML 标题

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

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

实例

<h1>This is a heading</h1>


<h2>This is a heading</h2>


<h3>This is a heading</h3>


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

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

HTML 水平线

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

hr 元素可用于分隔内容。

实例

<p>This is a paragraph</p>


<hr />


<p>This is a paragraph</p>


<hr />


<p>This is a paragraph</p>


HTML 注释

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

注释是这样写的：

实例

<!-- This is a comment -->


注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。

段落

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

实例

<p>This is a paragraph</p>


<p>This is another paragraph</p>


注释：浏览器会自动地在段落的前后添加空行。（
<p>
是块级元素）

提示：使用空的段落标记 
<p></p>
去插入一个空行是个坏习惯。用 
<br />
标签代替它！

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 
<br />
标签：

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


HTML 输出 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>


<link rel="stylesheet" type="text/css" href="mystyle.css">


</head>


内部样式表

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

<head>


<style type="text/css">


body {background-color: red}


p {margin-left: 20px}


</style>


</head>


内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">


This is a paragraph


</p>


HTML 超链接（链接）

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

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

通过使用href属性 - 创建指向另一个文档的链接

通过使用name属性 - 创建文档内的书签

HTML 链接语法

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

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


href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

实例

<a href="http://acm.hdu.edu.cn/listproblem.php?vol=11">Visit HDOJ</a>


HTML 链接 - target 属性

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

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

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


HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

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

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

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

命名锚的语法：

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


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

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

实例

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

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


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

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


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

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


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

HTML 图像

通过使用 HTML，可以在文档中显示图像。

图像标签（
<img>
）和源属性（Src）

在 HTML 中，图像由 
<img>
标签定义。

<img>
是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />


URL 指存储图像的位置。如果名为”boat.gif”的图像位于 www.w3school.com.cn 的images目录中，那么其URL为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">


在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航