通过使用 HTMLQ可以在文档中显C图像?/span>
Q?a style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">可以在本底端找到更多实?/a>。)
?HTML 中,囑փ?<img> 标签定义?/p>
<img> 是空标签Q意思是_它只包含属性,q且没有闭合标签?/p>
要在面上显C图像,你需要用源属性(srcQ。src ?"source"。源属性的值是囑փ?URL 地址?/p>
定义囑փ的语法是Q?/p>
<img src="url" />
URL 指存储图像的位置。如果名?"boat.gif" 的图像位?www.w3school.com.cn ?images 目录中,那么?URL ?http://www.w3school.com.cn/images/boat.gif?/p>
览器将囑փ昄在文档中囑փ标签出现的地斏V如果你图像标{于两个段落之_那么览器会首先昄W一个段落,然后昄囄Q最后显C第二段?/p>
alt 属性用来ؓ囑փ定义一串预备的可替换的文本。替换文本属性的值是用户定义的?/p>
<img src="boat.gif" alt="Big Boat"
>
在浏览器无法载入囑փӞ替换文本属性告诉读者她们失ȝ信息。此Ӟ览器将昄q个替代性的文本而不是图像。ؓ面上的囑փ都加上替换文本属性是个好习惯Q这h助于更好的显CZ息,q且对于那些使用U文本浏览器的h来说是非常有用的?/p>
假如某个 HTML 文g包含十个囑փQ那么ؓ了正显C个页面,需要加?11 个文件。加载图片是需要时间的Q所以我们的是:慎用囄?/p>
HTML 使用链接与网l上的另一个文档相q?/span>
几乎可以在所有的|页中找到链接。点击链接可以从一张页面蟩转到另一张页面?/span>
链接可以是一个字Q一个词Q或者一l词Q也可以是一q图像,您可以点击这些内Ҏ跌{到新的文档或者当前文档中的某个部分?/p>
当您把鼠标指针移动到|页中的某个链接上时Q箭头会变ؓ一只小手?/p>
我们通过使用 <a> 标签?HTML 中创建链接?/p>
有两U?<a> 标签的方式:
延阅读Q?/span>什么是文本?
链接?HTML 代码很简单。它cMq样Q?/p>
<a href="url">Link text</a>
href 属性规定链接的目标?/p>
开始标{֒l束标签之间的文字被作ؓ链接来显C?/p>
<a
>Visit W3School</a>
上面q行代码昄为:Visit W3School
点击q个链接会把用户带?W3School 的首c?/p>
提示Q?/span>"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接?/p>
name 属性规定锚QanchorQ的名称?/p>
您可以?name 属性创?HTML 面中的书签?/p>
书签不会以Q何特D方式显C,它对读者是不可见的?/p>
当用命名锚Qnamed anchorsQ时Q我们可以创建直接蟩臌命名锚(比如面中某个小节)的链接,q样使用者就无需不停地滚动页面来L他们需要的信息了?/p>
<a name="label">锚(昄在页面上的文本)</a>
提示Q?/span>锚的名称可以是Q何你喜欢的名字?/p> 提示Q?/span>您可以?id 属性来替代 name 属性,命名锚同h效?/p>
首先Q我们在 HTML 文档中对锚进行命名(创徏一个书{)Q?/p>
<a name="tips"
>基本的注意事?- 有用的提C?lt;/a>
然后Q我们在同一个文档中创徏指向该锚的链接:
<a href="#tips">有用的提C?lt;/a>
您也可以在其他页面中创徏指向该锚的链接:
<a >有用的提C?lt;/a>
在上面的代码中,我们?# W号和锚名称d?URL 的末端,可以直接链接到 tips q个命名锚了?/p>
具体效果Q?a style="margin: 0px; padding: 0px; border: 0px; color: #900b09; background-color: transparent;">有用的提C?/a>
注释Q?/span>请始l将正斜杠添加到子文件夹。假如这样书写链接:Q就会向服务器生两?HTTP h。这是因为服务器会添加正斜杠到这个地址Q然后创Z个新的请求,像q样Qhref="http://www.w3school.com.cn/html/"?/p> 提示Q?/span>命名锚经常用于在大型文档开始位|上创徏目录。可以ؓ每个章节赋予一个命名锚Q然后把链接到这些锚的链接放到文档的上部。如果您l常讉K癑ֺ癄Q您会发现其中几乎每个词条都采用q样的导航方式?/p> 提示Q?/span>假如览器找不到已定义的命名锚,那么׃定位到文档的端。不会有错误发生?/p>
标签 | 描述 |
---|---|
<a> | 定义锚?/td> |
可以使用专业?HTML ~辑器来~辑 HTMLQ?/p>
不过Q我们同时推荐用文本编辑器来学?HTMLQ比?Notepad (PC) ?TextEdit (Mac)。我们相信,使用一Ƅ单的文本~辑器是学习 HTML 的好Ҏ?/p>
通过C本,依照以下四步来创建您的第一张网c?/p>
如何启动C本:
开?br style="margin: 0px; padding: 0px; border: 0px;" /> 所有程?br style="margin: 0px; padding: 0px; border: 0px;" /> 附g
C?/p>
在记事本中键?HTML 代码Q?/p>
在记事本的文件菜单选择“另存?#8221;?/p>
当您保存 HTML 文gӞ既可以?.htm 也可以?.html 扩展名。两者没有区别,完全Ҏ您的喜好?/p>
在一个容易记忆的文g夹中保存q个文gQ比?w3school?/p>
启动您的览器,然后选择“文g”菜单?#8220;打开文g”命oQ或者直接在文g夹中双击您的 HTML 文g?/p>
l果应该cMq样Q?/p>
通过使用 HTML4.0Q所有的格式化代码均可移?HTML 文档Q然后移入一个独立的样式表?/span>
当浏览器d一个样式表Q它׃按照q个样式表来Ҏ档进行格式化。有以下三种方式来插入样式表Q?/p>
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。用外部样式表Q你可以通过更改一个文件来改变整个站点的外观?/p>
<head> <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
当单个文仉要特别样式时Q就可以使用内部样式表。你可以?head 部分通过 <style> 标签定义内部样式表?/p>
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style>
</head>
当特D的样式需要应用到个别元素Ӟ可以用内联样式?使用内联样式的方法是在相关的标签中用样式属性。样式属性可以包含Q?CSS 属性。以下实例显C出如何改变D落的颜色和左外边距?/p>
<p style="color: red; margin-left: 20px"
> This is a paragraph </p>
讉K我们?nbsp;CSS 教程Q学习更多有x式的知识?/p>
标签 | 描述 |
---|---|
<style> | 定义样式定义?/td> |
<link> | 定义资源引用?/td> |
<div> | 定义文档中的节或区域Q块U)?/td> |
<span> | 定义文档中的行内的小块或区域?/td> |
<font> | 规定文本的字体、字体尺寸、字体颜艌Ӏ不赞成使用。请使用样式?/td> |
<basefont> | 定义基准字体。不赞成使用。请使用样式?/td> |
<center> | Ҏ本进行水q_中。不赞成使用。请使用样式?/td> |
HTML 可定义很多供格式化输出的元素Q比如粗体和斜体字?/span>
下面有很多例子,您可以亲自试试:
您是否有q这Ll历Q当你看C个很的站点Q你会很想知道开发h员是如何它实现的?
你有没有看过一些网,q且想知道它是如何做出来的呢Q?/p>
要揭CZ个网站的技术秘密,其实很简单。单L览器?#8220;查看”菜单Q选择“查看源文?#8221;卛_。随后你会看C个弹出的H口Q窗口内是实际?HTML 代码?/p>
标签 | 描述 |
---|---|
<b> | 定义_体文本?/td> |
<big> | 定义大号字?/td> |
<em> | 定义着重文字?/td> |
<i> | 定义斜体字?/td> |
<small> | 定义号字?/td> |
<strong> | 定义加重语气?/td> |
<sub> | 定义下标字?/td> |
<sup> | 定义上标字?/td> |
<ins> | 定义插入字?/td> |
<del> | 定义删除字?/td> |
<s> | 不赞成用?/span>使用 <del> 代替?/td> |
<strike> | 不赞成用?/span>使用 <del> 代替?/td> |
<u> | 不赞成用?/span>使用样式QstyleQ代ѝ?/td> |
标签 | 描述 |
---|---|
<code> | 定义计算Z码?/td> |
<kbd> | 定义键盘码?/td> |
<samp> | 定义计算Z码样本?/td> |
<tt> | 定义打字Z码?/td> |
<var> | 定义变量?/td> |
<pre> | 定义预格式文本?/td> |
<listing> | 不赞成用?/span>使用 <pre> 代替?/td> |
<plaintext> | 不赞成用?/span>使用 <pre> 代替?/td> |
<xmp> | 不赞成用?/span>使用 <pre> 代替?/td> |
标签 | 描述 |
---|---|
<abbr> | 定义~写?/td> |
<acronym> | 定义首字母羃写?/td> |
<address> | 定义地址?/td> |
<bdo> | 定义文字方向?/td> |
<blockquote> | 定义长的引用?/td> |
<q> | 定义短的引用语?/td> |
<cite> | 定义引用、引证?/td> |
<dfn> | 定义一个定义项目?/td> |
可以?HTML 文档分割q段落?/span>
D落是通过 <p> 标签定义的?/p>
<p>This is a paragraph</p> <p>This is another paragraph</p>
注释Q?/span>览器会自动地在D落的前后添加空行。(<p> 是块U元素)
提示Q?/span>使用I的D落标记 <p></p> L入一个空行是个坏习惯。用 <br /> 标签代替它!Q但是不要用 <br /> 标签d建列表。不要着急,您将在稍后的幅学习?HTML 列表。)
即忘了使用l束标签Q大多数览器也会正地?HTML 昄出来Q?/p>
<p>This is a paragraph <p>This is another paragraph
上面的例子在大多数浏览器中都没问题,但不要依赖这U做法。忘C用结束标{会产生意想不到的结果和错误?/p>
注释Q?/span>在未来的 HTML 版本中,不允许省略结束标{?/p> 提示Q?/span>通过l束标签来关?HTML 是一U经得v未来考验?HTML ~写Ҏ。清楚地标记某个元素在何处开始,q在何处l束Q不论对您还是对览器来_都会使代码更Ҏ理解?/p>
如果您希望在不生一个新D落的情况下q行换行Q新行)Q请使用 <br /> 标签Q?/p>
<p>This is<br />a para<br />graph with line breaks</p>
<br /> 元素是一个空?HTML 元素。由于关闭标{没有Q何意义,因此它没有结束标{?/p>
您也许发?<br> ?<br /> 很相伹{?/p>
?XHTML、XML 以及未来?HTML 版本中,不允怋用没有结束标{(闭合标签Q的 HTML 元素?/p>
即 <br> 在所有浏览器中的昄都没有问题,使用 <br /> 也是更长q的保障?/p>
我们无法定 HTML 被显C的切效果。屏q的大小Q以及对H口的调整都可能D不同的结果?/p>
对于 HTMLQ您无法通过?HTML 代码中添加额外的I格或换行来改变输出的效果?/p>
当显C页面时Q浏览器会移?span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">源代码中多余的空格和I。所有连l的I格或空行都会被作一个空根{需要注意的是,HTML 代码中的所有连l的IQ换行)也被昄Z个空根{?/p>
Q这个例子演CZ一?HTML 格式化方面的问题Q?/p>
?HTML 文档中,标题很重要?/span>
标题QHeadingQ是通过 <h1> - <h6> {标{进行定义的?/p>
<h1> 定义最大的标题?lt;h6> 定义最的标题?/p>
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
注释Q?/span>览器会自动地在标题的前后添加空行?/p> 注释Q?/span>默认情况下,HTML 会自动地在块U元素前后添加一个额外的IQ比如段落、标题元素前后?/p>
L保将 HTML heading 标签只用于标题。不要仅仅是Z产生_体或大L文本而用标题?/p>
搜烦引擎使用标题为您的网늚l构和内容编制烦引?/p>
因ؓ用户可以通过标题来快速浏览您的网,所以用标题来呈现文档结构是很重要的?/p>
应该?h1 用作L题(最重要的)Q其后是 h2Q次重要的)Q再其次?h3Q以此类推?/p>
<hr /> 标签?HTML 面中创建水q线?/p>
hr 元素可用于分隔内宏V?/p>
<p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>
提示Q?/span>使用水^U?(<hr> 标签) 来分隔文章中的小节是一个办法(但ƈ不是唯一的办法)?/p>
可以注释插?HTML 代码中,q样可以提高其可L,使代码更易被人理解。浏览器会忽略注释,也不会显C它们?/p>
注释是这样写的:
<!-- This is a comment -->
注释Q?/span>开始括号之后(左边的括P需要紧跟一个叹Pl束括号之前Q右边的括号Q不需要?/p> 提示Q?/span>合理C用注释可以对未来的代码编辑工作生帮助?/p>
您一定曾l在看到某个|页时惊叚w “WOW! q是如何实现的?”
如果您想扑ֈ其中的奥U,只需要单d键,然后选择“查看源文?#8221;QIEQ或“查看面源代?#8221;QFirefoxQ,其他览器的做法也是cM的。这么做会打开一个包含页?HTML 代码的窗口?/p>
W3School 的标{֏考手册提供了有关q些标题及其属性的更多信息?/p>
您将在本教程下面的章节中学到更多有关 HTML 标签和属性的知识?/p>
标签 | 描述 |
---|---|
<html> | 定义 HTML 文档?/td> |
<body> | 定义文档的主体?/td> |
<h1> to <h6> | 定义 HTML 标题 |
<hr> | 定义水^Uѝ?/td> |
<!--> | 定义注释?/td> |
属性ؓ HTML 元素提供附加信息?/span>
HTML 标签可以拥有属?/span>。属性提供了有关 HTML 元素?span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">更多的信?/span>?/p> 属性L以名U?值对的Ş式出玎ͼ比如Q?span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">name="value"
属性L?HTML 元素?span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">开始标{?/span>中规定?/p>
<h1> 定义标题的开始?/p>
<h1 align="center"> 拥有关于寚w方式的附加信息?/p>
<body> 定义 HTML 文档的主体?/p>
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息?/p>
<table> 定义 HTML 表格。(您将在稍后的章节学习到更多有?HTML 表格的内容)
<table border="1"> 拥有关于表格Ҏ的附加信息?/p>
属性和属性值对大小?span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">不敏?/span>?/p>
不过Q万l网联盟在其 HTML 4 推荐标准中推荐小写的属?属性倹{?/p>
而新版本?(X)HTML 要求使用写属性?/p>
属性值应该始l被包括在引号内。双引号是最常用的,不过使用单引号也没有问题?/p>
在某些个别的情况下,比如属性值本w就含有双引P那么您必M用单引号Q例如:
name='Bill "HelloWorld" Gates'
我们的完整的 HTML 参考手册提供了每个 HTML 元素可用的合法属性的完整列表Q?/p>
下面列出了适用于大多数 HTML 元素的属性:
属?/th> | ?/th> | 描述 |
---|---|---|
class | classname | 规定元素的类名(classnameQ?/td> |
id | id | 规定元素的唯一 id |
style | style_definition | 规定元素的行内样式(inline styleQ?/td> |
title | text | 规定元素的额外信息(可在工具提示中显C) |
如需更多关于标准属性的信息Q请讉KQ?/p>
HTML 文档是由 HTML 元素定义的?/span>
HTML 元素指的是从开始标{(start tagQ到l束标签Qend tagQ的所有代码?/p>
开始标{?/th> | 元素内容 | l束标签 |
---|---|---|
<p> | This is a paragraph | </p> |
<a href="default.htm" > | This is a link | </a> |
<br /> |
注释Q?/span>开始标{ָ被称为开放标{(opening tagQ,l束标签常称为闭合标{(closing tagQ?/p>
提示Q?/span>您将在本教程的下一章中学习更多有关属性的内容?/p>
大多?HTML 元素可以嵌套Q可以包含其?HTML 元素Q?/p>
HTML 文档由嵌套的 HTML 元素构成?/p>
<html> <body> <p>This is my first paragraph.</p> </body> </html>
上面的例子包含三?HTML 元素?/p>
<p>This is my first paragraph.</p>
q个 <p> 元素定义?HTML 文档中的一个段落?/p>
q个元素拥有一个开始标{?<p>Q以及一个结束标{?</p>?/p>
元素内容是:This is my first paragraph?/p>
<body> <p>This is my first paragraph.</p> </body>
<body> 元素定义?HTML 文档的主体?/p>
q个元素拥有一个开始标{?<body>Q以及一个结束标{?</body>?/p>
元素内容是另一?HTML 元素Qp 元素Q?/p>
<html> <body> <p>This is my first paragraph.</p> </body> </html>
<html> 元素定义了整?HTML 文档?/p>
q个元素拥有一个开始标{?<html>Q以及一个结束标{?</html>?/p>
元素内容是另一?HTML 元素Qbody 元素Q?/p>
即您忘C使用l束标签Q大多数览器也会正地昄 HTMLQ?/p>
<p>This is a paragraph <p>This is a paragraph
上面的例子在大多数浏览器中都没问题,但不要依赖这U做法。忘C用结束标{会产生不可预料的结果或错误?/p>
注释Q?/span>未来?HTML 版本不允许省略结束标{?/p>
没有内容?HTML 元素被称为空元素。空元素是在开始标{中关闭的?/p>
<br> 是没有关闭标签的空元素Q?lt;br> 标签定义换行Q?/p>
?XHTML、XML 以及未来版本?HTML 中,所有元素都必须被关闭?/p>
在开始标{中d斜杠Q比?<br />Q是关闭I元素的正确ҎQHTML、XHTML ?XML 都接受这U方式?/p>
即 <br> 在所有浏览器中都是有效的Q但使用 <br /> 其实是更长远的保障?/p>
HTML 标签对大写不敏感:<P> {同?<p>。许多网站都使用大写?HTML 标签?/p>
W3School 使用的是写标签Q因Zl网联盟QW3CQ在 HTML 4 ?span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">推荐使用写Q而在未来 (X)HTML 版本?span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">强制使用写?/p>
本章通过实例向您演示最常用?HTML 标签?/span>
提示Q?/span>不要担心本章中您q没有学q的例子Q您在下面的章节中学到它们?/p> 提示Q?/span>学习 HTML 最好的方式是边学边做实验。我们ؓ您准备了很好?HTML ~辑器。用这个编辑器Q您可以L~辑一D?HTML 源码Q然后单?TIY 按钮来查看结果?/p> HTML 标题QHeadingQ是通过 <h1> - <h6> {标{进行定义的?/p> HTML D落是通过 <p> 标签q行定义的?/p> HTML 链接是通过 <a> 标签q行定义的?/p> 注释Q?/span>?href 属性中指定链接的地址?/p> Q您在本教E稍后的章节中学习更多有兛_性的知识Q?/p> HTML 囑փ是通过 <img> 标签q行定义的?/p> 注释Q?/span>囑փ的名U和寸是以属性的形式提供的?/p>HTML 标题
实例
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
HTML D落
实例
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML 链接
实例
<a >This is a link</a>
HTML 囑փ
实例
<img src="w3school.jpg" width="104" height="142" />
]]>
HTML 是用来描q网늚一U语a?/p>
HTML 标记标签通常被称?HTML 标签 (HTML tag)?/p>
Web 览器的作用是读?HTML 文档Qƈ以网늚形式昄出它们。浏览器不会昄 HTML 标签Q而是使用标签来解释页面的内容Q?/p>
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
在本教程中,你将学习如何使用 HTML 来创建站炏V?/span>
HTML 很容易学习!你会喜欢它的Q?/span>
现在开始学?HTML Q?/p>