HTML高级教程chapter02

小凯哥HTML授课课件第一版本第二单元HTML实战HTML编辑器使用Notepad或TextEdit来编写HTML可以使用专业的HTML编辑器来编辑HTML：AdobeDreamweaverMicrosoftExpressionWebCoffeeCupHTMLEditor不过，我们同时推荐使用文本编辑器来学习HTML，比如Notepad(PC)或TextEdit(Mac)。我们相信，使用一款简单的文本编辑器是学习HTML的好方法。通过记事本，依照以下四步来创建您的第一张网页。步骤一：启动记事本如何启动记事本：开始所有程序附件记事本步骤二：用记事本来编辑HTML在记事本中键入HTML代码：小凯哥HTML授课课件第一版本步骤三：保存HTML在记事本的文件菜单选择“另存为”。当您保存HTML文件时，既可以使用.htm也可以使用.html扩展名。两者没有区别，完全根据您的喜好。在一个容易记忆的文件夹中保存这个文件，比如xiaokaige。步骤四：在浏览器中运行这个HTML文件启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的HTML文件。结果应该类似这样：小凯哥HTML授课课件第一版本HTML标题标题（Heading）是通过h1-h6等标签进行定义的。h1定义最大的标题。h6定义最小的标题。实例h1Thisisaheading/h1h2Thisisaheading/h2h3Thisisaheading/h3注释：浏览器会自动地在标题的前后添加空行。注释：默认情况下，HTML会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。标题很重要请确保将HTMLheading标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将h1用作主标题（最重要的），其后是h2（次重要的），再其次是h3，以此类推。HTML水平线hr/标签在HTML页面中创建水平线。hr元素可用于分隔内容。实例pThisisaparagraph/phr/pThisisaparagraph/phr/小凯哥HTML授课课件第一版本pThisisaparagraph/p提示：使用水平线(hr标签)来分隔文章中的小节是一个办法（但并不是唯一的办法）。HTML注释可以将注释插入HTML代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。注释是这样写的：实例!--Thisisacomment--注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。提示：合理地使用注释可以对未来的代码编辑工作产生帮助。HTML提示-如何查看源代码HTML段落段落是通过p标签定义的。实例pThisisaparagraph/ppThisisanotherparagraph/p注释：浏览器会自动地在段落的前后添加空行。（p是块级元素）提示：使用空的段落标记p/p去插入一个空行是个坏习惯。用br/标签代替它！（但是不要用br/标签去创建列表。不要着急，您将在稍后的篇幅学习到HTML列表。）不要忘记结束标签即使忘了使用结束标签，大多数浏览器也会正确地将HTML显示出来：实例pThisisaparagraphpThisisanotherparagraph上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。注释：在未来的HTML版本中，不允许省略结束标签。提示：通过结束标签来关闭HTML是一种经得起未来考验的HTML编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理小凯哥HTML授课课件第一版本解。HTML折行如果您希望在不产生一个新段落的情况下进行换行（新行），请使用br/标签：pThisisbr/aparabr/graphwithlinebreaks/pbr/元素是一个空的HTML元素。由于关闭标签没有任何意义，因此它没有结束标签。br还是br/您也许发现br与br/很相似。在XHTML、XML以及未来的HTML版本中，不允许使用没有结束标签（闭合标签）的HTML元素。即使br在所有浏览器中的显示都没有问题，使用br/也是更长远的保障。HTML输出-有用的提示我们无法确定HTML被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。对于HTML，您无法通过在HTML代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格。HTML文本格式化文本格式化标签标签描述b定义粗体文本。big定义大号字。em定义着重文字。i定义斜体字。small定义小号字。strong定义加重语气。sub定义下标字。小凯哥HTML授课课件第一版本sup定义上标字。ins定义插入字。del定义删除字。s不赞成使用。使用del代替。strike不赞成使用。使用del代替。u不赞成使用。使用样式（style）代替。“计算机输出”标签标签描述code定义计算机代码。kbd定义键盘码。samp定义计算机代码样本。tt定义打字机代码。var定义变量。pre定义预格式文本。listing不赞成使用。使用pre代替。plaintext不赞成使用。使用pre代替。xmp不赞成使用。使用pre代替。引用、引用和术语定义标签描述abbr定义缩写。acronym定义首字母缩写。address定义地址。bdo定义文字方向。blockquote定义长的引用。q定义短的引用语。cite定义引用、引证。dfn定义一个定义项目。小凯哥HTML授课课件第一版本案例文本格式化htmlbodybThistextisbold/bbr/strongThistextisstrong/strongbr/bigThistextisbig/bigbr/emThistextisemphasized/embr/iThistextisitalic/ibr/smallThistextissmall/smallbr/Thistextcontainssubsubscript/subbr/Thistextcontainssupsuperscript/sup/body/html预格式文本htmlbodypre这是预格式文本。它保留了空格和换行。/preppre标签很适合显示计算机代码：/pprefori=1to10printinexti/pre/body/html小凯哥HTML授课课件第一版本“计算机输出”标签htmlbodycodeComputercode/codebr/kbdKeyboardinput/kbdbr/ttTeletypetext/ttbr/sampSampletext/sampbr/varComputervariable/varbr/pb注释：/b这些标签常用于显示计算机/编程代码。/p/body/html地址!DOCTYPEhtmlhtmlbodyaddressWrittenbyahref=mailto:[e-mail]/a.brVisitusat:brExample.combrBox564,DisneylandbrUSA/address/body/html缩写和首字母缩写htmlbodyabbrtitle=etceteraetc./abbr小凯哥HTML授课课件第一版本br/acronymtitle=WorldWideWeb在某些浏览器中，当您把鼠标移至缩略词语上时，title可用于展示表达的完整版本。/pp仅对于IE5中的acronym元素有效。/pp对于Netscape6.2中的abbr和acronym元素都有效。/p/body/html文字方向htmlbodyp如果您的浏览器支持bi-directionaloverride(bdo)，下一行会从右向左输出(rtl)；/pbdodir=rtlHereissomeHebrewtext/bdo/body/html块引用htmlbody这是长的引用：blockquote这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。/blockquote这是短的引用：q这是短的引用。/qp使用blockquote元素的话，浏览器会插入换行和外边距，而q元素不会有任何特殊的呈现。/p/body/html删除字效果和插入字效果p一打有del二十/delins十二/ins件。/p小凯哥HTML授课课件第一版本HTMLCSS如何使用样式当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：外部样式表当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。headlinkrel=stylesheettype=text/csshref=mystyle.css/head内部样式表当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过style标签定义内部样式表。headstyletype=text/cssbody{background-color:red}p{margin-left:20px}/style/head内联样式当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。以下实例显示出如何改变段落的颜色和左外边距。pstyle=color:red;margin-left:20pxThisisaparagraph/pHTML链接小凯哥HTML授课课件第一版本HTML超链接（链接）超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。我们通过使用a标签在HTML中创建链接。有两种使用a标签的方式：1.通过使用href属性-创建指向另一个文档的链接2.通过使用name属性-创建文档内的书签HTML链接语法链接的HTML代码很简单。它类似这样：ahref=urlLinktext/ahref属性规定链接的目标。开始标签和结束标签之间的文字被作为超级链接来显示。实例ahref=上面这行代码显示为：Visitxiaokaige点击这个超链接会把用户带到xiaokaige的首页。提示：链接文本不必一定是文本。图片或其他HTML元素都可以成为链接。HTML链接-ta