HTML 教程 - Hyper Text Markup Language - 超文本标记语言

我们是为了教初学者建立这个“程序员*”网站的,即然与那些缺乏的基础,但不仅仅是教如何使用HTML。我们欢迎您来开始“编程*”课程。可首先是“菜单”...

本系列教程是为了给您一些体验而编成的,那么您就可以能够读写HTML,能够保存文档而后在一个网页浏览器看到您的工作。不幸的是这页没有一个章节教您如何使用计算机的所有基础功能,所以在这个观点上您可以是求朋友帮助的: 在你继续学习HTML之前,你必须:

  • 懂得什么是笔记本以及如何使用
  • 了解如何使用Internet Explorer打开一个文件(或任何其他浏览器,我们建议使用Chrome浏览器)
  • 了解你是如何做复制/粘贴的以及是如何表现它们的

* 做HTML 编程 即使存在?

很抱歉让你们失望了,但HTML编程不存在,因为HTML的它是不是一种编程语言。它是一种标记语言。因此它简单地变形了内容,仅此而已

HTML快速参考指南

下面我做了最常用的HTML的代码的简短列表。当你不知道如何创建一个HTML代码或只是不记得它时,你回到这里可以更容易地把此页添加到收藏夹。

HTML - 单元

主要的HTML单元有 <html>, <head>, <title> 以及 <body>. 下面是如何建立一个网站的一个简单例子。

html<html>
	<head> 
		<title>我使用HTML代码做的第一个网站!</title>
	</head> 
	<body> 
		嗨,大家好!在这里,我放HTML页面的内容。
	</body> 
</html>

HTML - 第

html<p>这是一个简单的HTML段。</p>
<p align="left">这是一个简单的HTML段。</p>

Demo

这是一个简单的HTML段。

这是一个简单的HTML段。

要对齐HTML单元,我们将使用 对齐 含有属性的标签: 左,右,中置,对齐。

HTML - 标题

html<h1>这是对于最大标题的HTML标记</h1>

在HTML里定义标题或顶标的其他标签是:h1, h2, h3, h4, h5, h6. 与...定义的标题h1 是最大的并与...定义的 h6 是最小的。

HTML - 换行

<br />是一个换行符。空白与 "br" “/”之间的区别是 HTML 4有效的XHTML代码。

HTML - 水平规则

<hr /> 用于绘制一条水平线。 空白与"hr" y "/" 之间的区别 HTML 4有效的XHTML代码。

HTML - 列表

下面是一个简单的HTML列表示例:

html<ol>
	<li>在列表中的第一个html元素</li>
	<li>T在列表中的第二个html元素</li>
	<li>在列表中的第三个html元素</li>
</ol>

上面的例子是一个有序的html列表。 其他HTML列表为: 无序和定义列表。

HTML - 链接

html<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" >Html 5</a>
<a href="#top">返回页首</a> (<a name="top"></a>)
<a href="mailto:admin@example.com" >联系我们</a>
<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" ><img src="img/html_image.jpg" alt="HTML 5" /></a>

以上,你拥有一个正常的HTML链接的例子, 在同一页上的两个部分之间的一个链接, 链接到电子邮件并链接一个图像的一个链接。 虽然值得一提再也不HTML里使用的更长。

html<base href="http://www.tutorialehtml.com/">

Basehref 从索引标签已被删除 HTML 5.

HTML - 图片

html<img src="img//html_image.jpg" alt="Html Image" width="100" height="50"  align="center" />

建议, 使用CSS来调整图片。 这将会改变上述的html代码:

html<img src="img//html_image.jpg" alt="Html Image" style="width:100px; height:50px; margin:auto;" />

HTML - Forms

这只是一个用于创建一个表单的HTML代码例子。 这是一位用户要输入信息得用什么。 但要处理这些信息,你需要一个发送该信息到数据库的PHP文件(例如),邮寄等。

html<form method="post" name="myform" action="process.php">
	<!--用于文本字段输入信息-->
	<input type="submit" value="Send">
	<input type="reset" value="Delete" />
</form>

HTML - 文本字段

下面是HTML文本字段的几个例子。

html<input type="text" size="10" maxlength="40" name="name"> --> regular text field
<input type="password" size="10" maxlength="10" name="pass"> --> password field
<input type="radio" name="color" value="red"> --> radio button
<input type="checkbox" name="check" value="yes"> --> checkbox 
<select name="select">  --> simple select list / drop-down list
   <option>Html 4.1</option> 
   <option>Html 5</option> 
</select>

HTML - 表格

在HTML里表格的基本结构如下:

html<table>
   <tr> 
      <th>Col 1</th>
      <th>Col 2</th>
   </tr>
   <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 - 背景颜色

用于设置背景的颜色。 在这里,我保留了如何使用它的几个例子:

html<body bgcolor="#efefef">
<div bgcolor="#888888">
<table bgcolor="#000000"> - etc.

Html - 背景

要添加一个背景图片将要使用下面的HTML代码。

html<table background="img/pattern.jpg">

HTML - 注释

html<!-- 这是一个简单的HTML注释-->

Html - 内嵌(音乐和声音)

要在HTML文档中插入音乐或声音使用嵌入标签,具体如下

html<embed src="example.mp3" hidden="false" autostart="false" loop="false" volume="60" width="144" height="60" />

Html - 客体(视频)

要在一个HTML文档中插入视频使用嵌入标签,具体如下:

html<object width="425" height="344">
	<param name="movie" value="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1"></param>
	<param name="allowFullScreen" value="true"></param>
	
	<embed src="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344">
</embed>
</object>

HTML -

html<b>加粗 HTML 文本</b>
<strong>强调 HTML 文本</strong>

HTML - 斜体

html<i>斜体</i>
<em>强调</em>

HTML - 标,上标,删除线

指数,索引和拼切文字。 虽然没有被广泛使用,这是值得一提的。

html<sub>索引!</sub>
<sup>指数</sup>
<del>拼切文字</del>

HTML - 上载和隐藏字段

以下表格是用来上载文件到服务器。不要忘了,这仅仅是HTML的一部分。 为了使它正常工作,你应该使用PHP,ASP或任何其他服务器端语言进行处理。

html<form method="post" action="process.php"> 
	<input type="hidden" name="MAX_FILE_SIZE" value="500" /> 
	<input type="file" />
	<input type="submit" value="Upload">
	<input type="reset" value="Reset" />
</form>