html入门教程适合初学者的知识分享

  一、HTML 基本概念
 
  什么是 HTML 文件?? ?
 
  HTML 的英文全称是 Hypertext Marked Language, 中文叫做“超文本标记语言”。
 
  和一般文本的不同的是,一个 HTML 文件不仅包含文本内容,还包含一些 Tag,中 文称“标记”。? ?
 
  一个 HTML 文件的后缀名是。htm 或者是。html.
 
  用文本编辑器就可以编写 HTML 文件。
 
  这就试写一个 HTML 文件吧!
 
  打开你的 Notepad,新建一个文件,然后拷贝以下代码到这个新文件,然后将这个文件存 成 first.html.
 
  <html> <head> <title>Title of page<itle> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> 要浏览这个 first.html 文件,双击它。
 
  或者打开浏览器,在 File 菜单选择 Open,然后选 择这个文件就行了。示例解释
 
  这个文件的第一个 Tag 是<html>,这个 Tag 告诉你的浏览器这是 HTML 文件的头。
 
  文件 的最后一个 Tag 是</html>,表示 HTML 文件到此结束。
 
  在<head>和</head>之间的内容,是 Head 信息。
 
  Head 信息是不显示出来的,你在浏 览器里看不到。
 
  但是这并不表示这些信息没有用处。
 
  比如你可以在 Head 信息里加上一些 关键词,有助于搜索引擎能够搜索到你的网页。
 
  在<title>和<itle>之间的内容,是这个文件的标题。
 
  你可以在浏览器最顶端的标题栏看 到这个标题。
 
  在<body>和</body>之间的信息,是正文。
 
  在<b>和</b>之间的文字,用粗体表示。
 
  <b>顾名思义,就是 bold 的意思。
 
  HTML 文件看上去和一般文本类似,但是它比一般文本多了 Tag,比如<html>,<b>等, 通过这些 Tag,可以告诉浏览器如何显示这个文件。

 
 
  HTML 元素(HTML Elements)?
 
  HTML 元素(HTML Element)用来标记文本, 表示文本的内容。
 
  比如 body, p, title 就是 HTML 元素。? ?
 
  HTML 元素用 Tag 表示,Tag 以<开始,以>结束。
 
  Tag 通常是成对出现的,比如<body></body>.
 
  起始的叫做 Opening Tag,结 尾的就叫做 Closing Tag.?
 
  目前 HTML 的 Tag 不区分大小写的。
 
  比如,<HTML>和<html>其实是相同的。
 
  HTML 元素(HTML Elements)的属性 HTML 元素可以拥有属性。
 
  属性可以扩展 HTML 元素的能力。
 
  比如你可以使用一个 bgcolor 属性,使得页面的背景色成为红色,就像这样:
 
  <body bgcolor=”red”>
 
  再比如,你可以使用 border 这个属性,将一个表格设成一个无边框的表格。如下:
 
  <table border=”0″>
 
  属性通常由属性名和值成对出现,就像这样:name=”value”.
 
  上面例子中的 bgcolor, border 就是 name,red 和 0 就是 value.
 
  属性值一般用双引号标记起来。
 
  属性通常是附加给 HTML 的 Opening Tag,而不是 Closing Tag.
 
  二、基础 HTML Tag
 
  HTML 里,比较基础的 Tag 主要用于标题,段落和分行。
 
  学习 HTML 最好的方法,就是跟着示例学。正文标题
 
  这个示例告诉你如何在 HTML 文件里定义正文标题。
 
  HTML 用<h1>到<h6>这几个 Tag 来定义正文标题,从大到小。
 
  每个正文标题自成一段。
 
  <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6>段落划分
 
  在 HTML 里用<p>和</p>划分段落。
 
  <p>This is a paragraph</p> <p>This is another paragraph</p>换行
 
  通过使用<br>这个 Tag,可以在不新建段落的情况下换行。
 
  <br>没有 Closing Tag. 用<p>换行是个坏习惯,正确的是使用<br>.
 
  <p>This <br> is a para<br>graph with line breaks</p>
 
  HTML 注释
 
  在 HTML 文件里,你可以写代码注释,解释说明你的代码,这样有助于你和他人日后能够 更好地理解你的代码。
 
  注释可以写在<!–和–>之间。
 
  浏览器是忽略注释的,你不会在 HTML 正文中看到你的注 释。
 
  <!– This is a comment –>
 
  一些小建议
 
  HTML 文件会自动截去多余的空格。
 
  不管你加多少空格,都被看做一个空格。
 
  一个空行也 被看做一个空格。
 
  有些 Tag 能够将文本自成一段,而不需要使用<p></p>来分段。
 
  比如<h1></h1>之类 的标题 Tag.更多示例
 
  这个示例显示了段落的特性。
 
  <html> <body> <p> 这一段 在源代码里 包含很多分行, 但是浏览器忽略 这些分行。
 
  </p> <p> 这一段 包含 但是 </p> <p> 很多 在浏览器里 空格, 浏览器忽略多余空格。 你使用的浏览器的窗口大小决定了段落的行数。
 
  如果你改编浏览器窗口的大小,段落的行数会因此 改变。
 
  </p> </body> </html>换行
 
  这个示例告诉你如何在 HTML 文件里换行。
 
  <html> <body> <p> 要<br>在一段<br>里<br>换行<br>请使用<br>br 这个 Tag.
 
  </p> </body> </html>正文标题
 
  这个示例教会你如何在 HTML 文件里显示正文标题。
 
  <html> <body> <h1>这是 1 号标题</h1> <h2>这是 2 号标题</h2> <h3>这是 3 号标题</h3> <h4>这是 4 号标题</h4> <h5>这是 5 号标题</h5> <h6>这是 6 号标题</h6> </body> </html>
 
  居中的正文标题
 
  这个示例告诉你如何将正文标题居中显示。

 
 
  <html> <body> <h1 align=”center”>这是标题</h1> <p>上面的标题是居中显示的。
 
  </p> </body> </html>加条横线 这个示例演示了如何在 HTML 文中加条横线。
 
  <html> <body> <p>用 hr 这个 Tag 可以在 HTML 文件里加一条横线。
 
  </p> <hr> <p>村妇想像皇宫的生活:皇后得用金扁担挑水吧。
 
  </p> <hr> <p>问:谁是世界上最可怜的人?答:炮兵连炊事班战士!问:为什么?答:戴绿帽背黑锅看别人 打炮。
 
  </p> <hr> <p>初中某数学老师讲方程式变换,在讲台上袖子一挽大声喝道:同学们注意!我要变形了!…… </p> </body> </html>代码注释
 
  这个示例演示如何在 HTML 代码中加上代码注释,这些注释只显示在 HTML 源代码中,而 源代码最终形成的网页里是看不到这些注释的。
 
  <html> <body> <!–这是代码注释–> <p>代码注释是不会显示在网页里的。
 
  </p> </body> </html>背景颜色
 
  这个示例演示如何改变 HTML 文件的背景色。
 
  <html> <body bgcolor=”yellow”> <h2>看,这个页面是黄色的。
 
  </h2> </body> </html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61600.shtml

张贴在2