HTML的基础知识

8-07 198 views

html是用一套标记标签描述网页的标记语言。

标签

  • 由尖括号包围的关键词,通常成对出现,有头有尾。例如:<html></html>。
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签(opening tag)和闭合标签(closing tag)。
  • 对大小写不敏感:<P> 等同于 <p>。W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

 

文档

  • 亦称网页,包含HTML标签和纯文本,Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。由嵌套的 HTML 元素构成

标题

  • 通过 <h1> - <h6> 等标签进行定义,<h1> 定义最大的标题。<h6> 定义最小的标题,应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
  • 注释:浏览器会自动地在标题的前后添加空行;默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

 

段落

  • 通过<p>标签进行定义,浏览器会自动地在段落的前后添加空行。(<p> 是块级元素)。

 

链接

  • 通过 <a> 标签进行定义,例如:<a href="http://www.w3school.com.cn">This is a link</a>
  • 注释:在 href 属性中指定链接的地址。

 

图像

  • 通过 <img> 标签进行定义,<img src="w3school.jpg" width="104" height="142" />
  • 注释:图像的名称和尺寸是以属性的形式提供的。

alt 属性

  • 在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。
  • 为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息。
    <img src="boat.gif" alt="Big Boat"><img src="boat.gif" alt="Big Boat">

背景图片

  • gif 和 jpg 文件均可用作 HTML 背景。
  • 如果图像小于页面,图像会进行重复。<body background="/i/eg_background.jpg">
  • 通过改变 img 标签的 "height" 和 "width" 属性的值,您可以放大或缩小图像。

元素

  • 定义文档,指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

空元素

  • 没有内容的 HTML 元素被称为空元素。
  • 空元素是在开始标签中关闭的。<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
  • 在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

属性:

  • 标签拥有属性,总是以名称/值对的形式出现,比如:name="value";
  • 总是在 HTML 元素的开始标签中规定。

建议使用小写属性

  • 属性和属性值对大小写不敏感。不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。

始终为属性值加引号

  • 属性值应该始终被包括在引号内。
  • 双引号是最常用的,不过使用单引号也没有问题。
  • 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='Bill "HelloWorld" Gates'

水平线

  • <hr /> 标签在 HTML 页面中创建水平线。
  • hr 元素可用于分隔内容。

注释

  • <!-- This is a comment -->

如何查看源代码

  • 只需要对着网页单击右键,然后选择“查看源文件”(IE)或“查看页面源代码”(Firefox),其他浏览器的做法也是类似的。
  • 这么做会打开一个包含页面 HTML 代码的窗口。

折行

  • 如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签。

输出

  • 当显示页面时,浏览器会移除源代码中多余的空格和空行。
  • 所有连续的空格或空行都会被算作一个空格。
  • 需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格。

编辑器

  • 建议使用文本编辑器,利于学习,当您保存 HTML 文件时,既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别,完全根据您的喜好。然后直接双击文件,就可以用浏览器打开了。

没有下划线的链接

  • 例如:<a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接!

如何使用样式

  • 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化

有以下三种方式来插入样式表:

  • 外部样式表:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
  • <head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
  • 内部样式表:当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
    <head>
    <style type="text/css">
    body {background-color: red}
    p {margin-left: 20px}
    </style>
    </head>
  • 内联样式:当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
    <p style="color: red; margin-left: 20px">
    This is a paragraph
    </p>

超链接(链接)

  • 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
  • 当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
  • 通过使用 <a> 标签在 HTML 中创建链接。有两种使用 <a> 标签的方式:
  • 通过使用 href 属性 - 创建指向另一个文档的链接;
  • 通过使用 name 属性 - 创建文档内的书签。
  • target 属性:如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。
  • name 属性:规定锚(anchor)的名称,创建 HTML 页面中的书签,书签不会以任何特殊方式显示,它对读者是不可见的,当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
    注释:锚的名称可以是任何你喜欢的名字;您可以使用 id 属性来替代 name 属性,命名锚同样有效。
  • 请始终将正斜杠添加到子文件夹,例如:href="http://www.w3school.com.cn/html/"

框架

  • 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。

内联框架

  • iframe 用于在网页内显示网页。<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

背景

  • 好的背景使站点看上去特别棒。
  • <body> 标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的 HTML 标准(HTML4 和 XHTML)中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
    应该使用层叠样式表(CSS)来定义 HTML 元素的布局和显示属性。

 

欢迎留言