HTML 简介

HTML 简介

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

2.

My First Heading

My first paragraph.

 

# 与 之间的文本描述网页

#

与 之间的文本是可见的页面内容

#

与

之间的文本被显示为标题

#

与

之间的文本被显示为段落

HTML 链接

1.HTML 链接是通过 标签进行定义的。

This is a link

HTML 图像

HTML 图像是通过 标签进行定义的。

HTML 元素语法

HTML 元素以开始标签起始

HTML 元素以结束标签终止

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容（empty content）

空元素在开始标签中进行关闭（以开始标签的结束而结束）

大多数 HTML 元素可拥有属性

 

空的 HTML 元素

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

 

就是没有关闭标签的空元素（
标签定义换行）。

 

在 XHTML、XML 以及未来版本的 HTML 中，所有元素必须被关闭。

 

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

即使
在所有浏览器中都是有效的，但使用
其实是更长远的保障。

 

HTML 居中

拥有关于对齐方式的附加信息。

拥有关于背景颜色的附加信息。

HTML 水平线

---

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

hr 元素可用于分隔内容。

 

 

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

 

使用空的段落标记

去插入一个空行是个坏习惯。用
标签代替它！

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

This is
a para
graph with line breaks

元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

  

预格式文本

此例演示如何使用 pre 标签对空行和空格进行控制。

 

<p>这是                            这是</p><p>预格式文本。        >>>>>>>>>>> 预格式文本。</p><p>它保留了      空格              它保留了      空格</p><p>和换行。                         和换行。</p><p> </p><p>pre 标签很适合显示计算机代码</p><p> </p><p>地址</p><p>此例演示如何在 HTML 文件中写地址。</p><p> </p><p></p><p>唐老鸭的地址：</p><p></p><address>
<p>Donald Duck<br></p>
<p>BOX 555<br></p>
<p>Disneyland<br></p>
<p>USA<br></p>
<p></p>
</address><p> </p><p><br></p><p> </p><p></p><p>W3School 的地址：</p><p></p><address>
<p>  <a href="mailto:service@w3school.com.cn">用户服务信箱</a><br></p>
<p>  上海赢科投资有限公司<br></p>
<p>  金桥开发区 789 号<br></p>
<p></p>
</address><p>结果：</p><p>唐老鸭的地址：</p><p> </p><p>Donald Duck</p><p>BOX 555</p><p>Disneyland</p><p>USA</p><p> </p><p>用户服务信箱</p><p>上海赢科投资有限公司</p><p>金桥开发区 789 号</p><p> </p><p>缩写和首字母缩写</p><p><abbr title="United Nations">UN</abbr></p><p><acronym title="World Wide Web">WWW</acronym></p><p> </p><p>文字方向</p><p><bdo dir="rtl"></bdo></p><p>Here is some Hebrew text</p><p></p><p>Here is some Hebrew text</p><p> </p><p>块引用</p><p></p><blockquote>
<p>这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。</p>
<p></p>
</blockquote><p>使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。</p><p><br></p><p>HTML 样式实例 - 背景颜色</p><p>background-color 属性为元素定义了背景颜色：</p><p></p><p></p><h2 style="background-color:red">This is a heading</h2><p></p><p style="background-color:green">This is a paragraph.</p><p></p><p>font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：</p><p></p><h1 style="font-family:verdana">A heading</h1><p></p><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p><p>text-align 属性规定了元素中文本的水平对齐方式：</p><p></p><h1 style="text-align:center">This is a heading</h1><p> </p><p>将图像作为链接</p><p><a href="../example/html/lastpage.html" tppabs="http://www.w3school.com.cn/example/html/lastpage.html"></a></p><p><img  border="0" src="../i/eg_buttonnext.gif" tppabs="http://www.w3school.com.cn/i/eg_buttonnext.gif" alt="HTML 简介" ></p><p></p><p> </p><p>表格的表头</p><p>表格的表头使用 </p><th> 标签进行定义。<p></p>
<table border="1">
<p></p>
<tr>
<p></p>
<th>Heading</th>           >>>>>>>>注意<p></p>
<th>Another Heading</th>
<p></p>
</tr>
<p></p>
<tr>
<p></p>
<td>row 1, cell 1</td>
<p></p>
<td>row 1, cell 2</td>
<p></p>
</tr>
<p></p>
<tr>
<p></p>
<td>row 2, cell 1</td>
<p></p>
<td>row 2, cell 2</td>
<p></p>
</tr>
<p></p>
</table>
<p> </p>
<p>表格中的空单元格</p>
<p>table border="1"></p>
<p></p>
</th><tr>
<p></p>
<td>row 1, cell 1</td>
<p></p>
<td>row 1, cell 2</td>
<p></p>
</tr><p></p><tr>
<p></p>
<td>row 2, cell 1</td>
<p></p>
<td> </td>
<p></p>
</tr><p></p><p> </p><p>无序列表:</p><p></p><h4>一个无序列表：</h4><p></p>

 

• 咖啡

 

• 茶

 

• 牛奶

 

有序列表 :

一个有序列表：

 

1. 咖啡

 

2. 茶

 

3. 牛奶

 

定义列表

Coffee

Black hot drink

Milk

White cold drink

表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（

）定义。

输入

多数情况下被用到的表单标签是输入标签（）。输入类型是由类型属性（type）定义的。

文本域

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

 

First name:

Last name:

 

单选按钮

Male    name和value什么意思？

Female

复选框

I have a bike

I have a car

表单的动作属性（Action）和确认按钮

                                                  name,action,method是什么意思？

Username:

          value是什么意思？

 

实例：

简单的下拉列表

本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。

Volvo

Saab

Fiat  》》》》加入首选

Audi

文本域

本例演示如何创建文本域（多行文本输入控件）。用户可在文本域中写入文本。可写入字符的字数不受限制。

This example cannot be edited

because our editor uses a textarea

for input,

and your browser does not allow

a textarea inside a textarea.

 

The cat was playing in the garden.

创建按钮

创建框：

健康信息：

身高：

体重：

 

带有输入框和确认按钮的表单

 

First name:

 

Last name:

 

带有复选框的表单

I have a bike:

I have a car:

I have an airplane:

带有单选按钮的表单

Male:

Female:

垂直的表头：

 

 

 

 

 

 

姓名	Bill Gates
电话	555 77 854
电话	555 77 855

 

图解：姓名 Bill Gates

      电话 555 77 854

      电话 555 77 855

带有标题的表格

本例演示一个带标题 (caption) 的表格

横跨两列的单元格：

我的标题

 

 

横跨两行的单元格：

 

 

姓名	电话
电话	555 77 854