当前位置 > 教程

3分钟学会html

基本概念

HTTP: HTTP是超文本传输协议, 是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。
在Internet上的Web服务器上存放的都是超文本信息，客户机需要通过HTTP协议传输所要访问的超文本信息。

当我们想浏览一个网站的时候，只要在浏览器的地址栏里输入网站的地址就可以了，例如www.hrloo.com ,但是在浏览器的地址栏里面出现的却是：http://www.*******,你知道为什么会多出一个“http”吗？

HTTP协议（HyperText Transfer Protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传输协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。这就是你为什么在浏览器中看到的网页地址都是以http://开头的原因。

我们在浏览器的地址栏里输入的网站地址叫做URL (Uniform Resource Locator，统一资源定位符)
就像每家每户都有一个门牌地址一样，每个网页也都有一个Internet地址。当你在
浏览器的地址框中输入一个URL或是单击一个超级链接时，URL就确定了要浏览的地址。
浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页。因此，在我们认识HTTP之前，有必要先弄清楚URL的
组成。
例如：http://www.abcd.com/china/index.htm。它的含义如下：
1. http://：代表超文本转移协议，通知abcd.com服务器显示Web页，通常不用输入；
2. www：代表一个Web（万维网）服务器；
3. abcd.com/：这是装有网页的服务器的域名，或站点服务器的名称；
4. China/：为该服务器上的子目录，就好像我们的文件夹；
5. Index.htm：index.htm是文件夹中的一个HTML文件（网页）。

HTML代码

HTML（Hyper Text Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
HTML是网络的通用语言，一种简单、通用的全置标记语言。用它可以编写图文并茂的复杂页面。
我们随便打开一个网页都是由HTML代码来编写的，也许你听说过许多可以编辑网页的软件，你也可以不需要用任何专门软件建站HTML页面，只需一个文本编辑器(如Office Word/记事本/写字板)等就可以编写了。

他主要是由文本文件和标签来来组成的。
关于标签它们都是成对出现的。

在本教程中，我们使用纯文本编辑器来编辑 HTML。我们认为这是学习 HTML 的最佳方式
.htm 还是 .html 文件后缀
当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 文件后缀。我们在实例中使用 .htm。这只是长久以来形成的习惯而已，因为过去的很多软件只允许三个字母的文件后缀。不过对于新的软件，使用 .html 完全没有问题。

例子：<html> </html>
<blockquote> 就以 </blockquote> 前面有个/ 这就是标签打开结束区别。
也有些例外如 <input>标签换行符 <br> 它是一个空标签没有结束标签。
不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签
您也许发现 <br> 与 <br /> 很相似使用 <br /> 也是更长远的保障。
段落标签：
<p> 标签定义段落 p标签是成对出现的,以<p>开始,以</p>结束
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
（<p> 是块级元素）

不要忘记结束标签
即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来
上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误

标题标签：
h标签包括,h1,h2,h3,h4,h5,h6 标签 h标签是成对出现的,以<h>开始,以</h>结束
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

链接标签：
HTML 链接是通过 <a> 标签进行定义的
<a href="http://www.moonseo.net">SEO研究中心</a>
图像标签：
图像是通过 <img> 标签进行定义的。
<img src=" http://www.baidu.com/img/baidu_sylogo1.gif" width="104" height="142" />
注释：图像的名称和尺寸是以属性的形式提供的。
HTML 元素
元素指的是从开始标签到结束标签的所有代码。

注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。HTML 文档由嵌套的 HTML 元素构成。
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html> 上面的例子包含三个 HTML 元素。

<p> 元素
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
<body>元素
<body>
<p>这是一个元素</p>
</body>
空的元素

<br /> 就是没有关闭标签的空元素（<br /> 标签定义换行）。
<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。

属性标签 id , class title style

<html>
<body>
<p>
第一行文字<br>第二行<br>第三行，<br>第四行。<br>
</p>
</body>
</html>

HTML 大小写
使用小写标签，HTML对大小写不敏感，许多网站都使用大写的 HTML 标签
因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML 属性

属性总是以名称/值对的形式出现，比如：name="value"。
例：
HTML 链接由 <a> 标签定义。
链接的地址在 href 属性中指定：
<a href="http://www.moonseo.net">SEO研究中心</a>
<body> 定义 HTML 文档的主体。
<body bgcolor="yellow"> <table border="1">

使用小写属性属性和属性值对大小写不敏感。
始终为属性值加引号
下面列出了适用于大多数 HTML 元素的属性：

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

水平线
<hr/> 页面创建水平线 hr 元素可用于分隔内容。

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

注释是这样写的： 
注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
提示：合理地使用注释可以对未来的代码编辑工作产生帮助
<html>
<body>

<p>这是一段普通的段落。</p>
</body>
</html>

标签	描述
<html>	定义 HTML 文档。
<body>	定义文档的主体。
<h1> to <h6>	定义 HTML 标题
<hr>	定义水平线。
<!-->	定义注释。

<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>

<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格

<html>
<body>
<h1>春晓</h1>
<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>
<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
</body>
</html>

DIV标签 -- 块标签成对出现的，以<div>开始以</div>结束的。以CSS 联合起来显示出威力。和id与class
div表示一个块,并无实际的意义,可以通过CSS样式(style)为其赋予不同的表现.
例： <div>一个块</div>

标签参考手册

标签	描述
<p>	定义段落。
<br />	插入单个折行（换行）。

style 属性
style 属性的作用改变HTML 元素的通用方法。style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义
背景颜色
background-color 属性为元素定义了背景颜色：
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>
文本对齐
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>上面的标题相对于页面居中对齐。</p>
</body>
</html>

target 属性
使用 Target 属性，你可以定义被链接的文档在哪个窗口显示。
下面的这行会在新窗口打开文档
<a href=”http://www.dw.net.cn/” target="_blank">达网网络技术有限公司</a>

name 属性
name 属性规定锚（anchor）的名称。
name 属性用于创建 HTML 内部的书签。

HTML框架
垂直框架
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
水平框架
</html>

<html>

表格由<table>标签
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
<table border="1"> 表格和边框属性
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

<html>
<body>
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>
<h4>一列：</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>

表格	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组。

无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

name项：常用的选项有Keywords(关键字) ，description(网站内容描述)，author(作者)，robots(机器人向导)等。

1、告诉浏览器网页所识别的文件类型及语言类型，比如说，我们要让浏览器识别HTM/HTML类型的简体中文网面，我们可以这样写：
< Meta http-equiv="Content-Type" content="text/html; charset=gb2312" >

2、让一些搜索引擎搜索到你的网页，代码可以这样写：
< Meta Name=" Keywords" Content="网页关键字" />
< Meta Name=" description" Content="网页描述文字" />

将定义关键词的meta标记项放在定义描述的meta项之前。如：
<meta type="keywords" content="" />
<meta type="description" content="" />

编辑