HTML 简介
1.Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。览器不会显示 HTML 标签,而是使用标签来解释页面的内容。
2.
My first paragraph.
# 与 之间的文本描述网页
#
与 之间的文本是可见的页面内容#
#
与
之间的文本被显示为段落HTML 链接
1.HTML 链接是通过 标签进行定义的。
HTML 图像
HTML 图像是通过 标签进行定义的。
HTML 元素语法
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容(empty content)
空元素在开始标签中进行关闭(以开始标签的结束而结束)
大多数 HTML 元素可拥有属性
空的 HTML 元素
没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。
就是没有关闭标签的空元素(
标签定义换行)。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素必须被关闭。
在开始标签中添加斜杠,比如
,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使
在所有浏览器中都是有效的,但使用
其实是更长远的保障。
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>
有序列表 :
定义列表
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
表单使用表单标签(
单选按钮
复选框
表单的动作属性(Action)和确认按钮
实例:
简单的下拉列表
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
文本域
本例演示如何创建文本域(多行文本输入控件)。用户可在文本域中写入文本。可写入字符的字数不受限制。
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.
创建按钮
创建框:
带有输入框和确认按钮的表单
带有复选框的表单
带有单选按钮的表单
姓名 | Bill Gates |
---|---|
电话 | 555 77 854 |
电话 | 555 77 855 |
图解:姓名 Bill Gates
电话 555 77 854
电话 555 77 855
带有标题的表格
本例演示一个带标题 (caption) 的表格
姓名 | 电话 | |
---|---|---|
电话 | 555 77 854 |