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

HTML基础

2015-09-29 15:05 639 查看

HTML 基础

HTML 指的是超文本标记语言 (Hyper Text Markup Language)，它使用标记标签(markup tag)来描述网页。

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

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

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

标签对中的第一个标签是开始标签(start tag)，第二个标签是结束标签(end tag)；

开始和结束标签也被称为开放标签(opening tag)和闭合标签（closing tag）；

HTML 标签对大小写不敏感：<P> 等同于 <p>，许多网站都使用大写的 HTML 标签；

HTML 元素指的是从开始标签到结束标签的所有代码，HTML 元素语法：

HTML 元素以开始标签起始，以结束标签终止；

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

某些 HTML 元素具有空内容（empty content），这种空元素在开始标签中进行关闭（以开始标签的结束而结束）；

大多数 HTML 元素可拥有属性，属性总是在 HTML 元素的开始标签中规定，并且以键-值对的形式出现，比如：name="value"；

下面是一个HTML文档实例：

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

在这个例子中：

<p> 元素定义了 HTML 文档中的一个段落，这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>，元素内容是：This is my first paragraph；

<body> 元素定义了 HTML 文档的主体，这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>，元素内容是另两个 HTML 元素（p 元素和h1元素）；

<html> 元素定义了整个 HTML 文档，这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>，元素内容是另一个 HTML 元素（body 元素）。

HTML空元素

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

<br />   <!--  插入换行符  -->
<hr />   <!--  插入水平线  -->

注意：在开始标签中添加斜杠，比如 <br />是关闭空元素的更好方法。

HTML标题

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

<h1 >This is heading 1</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

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

HTML段落

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

注释：浏览器会自动地在段落的前后添加空行；

当显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被算作一个空格，例如：

<html>

<body>

<h1>春晓</h1>

<p>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</p>

<p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>

</body>

</html>

输出的结果是：

春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。

如果想实现换行，可以使用<br />标签；

HTML文本格式化

例如：

<html>

<body>

<b>This text is bold</b>

<br />

<strong>This text is strong</strong>

<br />

<big>This text is big</big>

<br />

<em>This text is emphasized</em>

<br />

<i>This text is italic</i>

<br />

<small>This text is small</small>

<br />

This text contains
<sub>subscript</sub>

<br />

This text contains
<sup>superscript</sup>

</body>
</html>

结果如下图：

格式化标签：

<b> 定义粗体文本；

<big> 定义大号字；

<small> 定义小号字；

<em> 定义着重文字；

<i> 定义斜体字；

<strong> 定义加重语气；

<sub> 定义下标字；

<sup> 定义上标字；

<ins> 定义插入字；

<del> 定义删除字；

<code> 定义计算机代码；

<kbd> 定义键盘码；

<samp> 定义计算机代码样本；

<tt> 定义打字机代码；

<var> 定义变量；

<pre> 定义预格式文本；

<abbr> 定义缩写；

<acronym> 定义首字母缩写；

<address> 定义地址；

<bdo> 定义文字方向；

<blockquote> 定义长引用；

<q> 定义短的引用语；

<cite> 定义引用、引证；

<dfn> 定义一个定义项目；

HTML超链接

"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

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

注：在 href 属性中指定链接的地址，Target 属性定义被链接的文档在何处显示。

HTML图像

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

<img src="w3school.jpg" width="104" height="142" />

<img> 标签还有的一些属性：

alt，定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息；

align，图像对齐方式，可选项有bottom、middle、top、left、right；

HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

例如：

<table  border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
<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列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>

有序列表也是一列项目，列表项目使用数字进行标记。

<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>

<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>

列表支持嵌套定义：

<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>

自定义列表，是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

HTML表单

HTML 表单用于搜集不同类型的用户输入。

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>

单项按钮（Radio Buttons）：

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

复选框（Checkboxes）

<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>

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

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。

HTML块元素

大多数 HTML 元素被定义为块级元素(block level element)或内联元素(inline element)。

块级元素在浏览器显示时，通常会以新行来开始（和结束），例子：<h1>, <p>, <ul>, <table>；

内联元素在显示时通常不会以新行开始，例子：<b>, <td>, <a>, <img>；

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>

HTML <span> 元素是内联元素，可用作文本的容器。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<p><span>some text.</span>some other text.</p>

HTML CSS

通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。

本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

<html>

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>

<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>

</html>

也可以通过外部样式表进行格式化：

<html>

<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>

<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>

</html>

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>

<frameset rows="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>

注意：属性rows/columns 的值规定了每行或每列占据屏幕的面积

内联框架，用于在网页内显示网页，如下面：

<!DOCTYPE html>
<html>
<body>

<iframe src="/example/html/demo_iframe.html" width="200" height="200"></iframe>

<p>某些老式的浏览器不支持内联框架。</p>
<p>如果不支持，则 iframe 是不可见的。</p>

</body>
</html>

注：height 和 width 属性用于规定 iframe 的高度和宽度，属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。

HTML背景

可以随意搭配页面的背景颜色和文字颜色，例如：

<html>

<body bgcolor="#ffffff" text="yellow">

<p>
这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。
</p>

<p>
这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。
</p>

</body>
</html>

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

注：<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

HTML文档类型

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

注：<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

HTML 4.01的声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML头部

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />

<title>标题不会显示在文档区</title>
</head>

<body>
<p>这段文本会显示出来。</p>
</body>

</html>

<title> 标签定义文档的标题：

<head>
<title>Title of the document</title>
</head>

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

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

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面，例如：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />

<html>

<body>

<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>

</body>

</html>

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

HTML字符实体

HTML 中的预留字符必须被替换为字符实体。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

字符实体类似这样：

&entity_name;

或者

&#entity_number;

如需显示小于号，我们必须这样写：< 或 <

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用字符实体。

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	日圆	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

参考文档：

http://www.w3school.com.cn/html/index.asp

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航