通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表: 外部样式表 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,可以通过更改一个文件来改变整个站点的外观。
<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>HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 通过使用 <a> 标签在 HTML 中创建链接。 有两种使用 <a> 标签的方式: 1. 通过使用 href 属性 - 创建指向另一个文档的链接。 2. 通过使用 name 属性 - 创建文档内的书签。
href 属性规定链接的目标。 开始标签和结束标签之间的文字被作为超级链接来显示: <a href="url">Link text</a> 例如: <a href="http://blog.csdn.net">欢迎浏览博客</a> 显示出来就是 欢迎浏览 博客 点击这个链接可以跳转到博客首页。
如果想要定义链接在何处显示,我们需要使用HTML链接-target属性 例如:
<html> <body> <a href="http://blog.csdn.net" target="_blank">欢迎浏览博客</a> <p>如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。</p> </body> </html>这个就会在新窗口打开链接。
name 属性规定锚(anchor)的名称。 可以使用 name 属性创建 HTML 页面中的书签。 书签不会以任何特殊方式显示,它对读者是不可见的。 当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法: <a name="label">锚(显示在页面上的文本)</a> 实例:
<html> <body> <p> <a href="#C4">查看 Chapter 4。</a> </p> <h4>Chapter 1</h4> <p>This chapter explains ···</p> <h4>Chapter 2</h4> <p>This chapter explains ···</p> <h4>Chapter 3</h4> <p>This chapter explains ···</p> <h4><a name="C4">Chapter 4</a></h4> <p>This chapter explains ···</p> <h4>Chapter 5</h4> <p>This chapter explains ···</p> <h4>Chapter 6</h4> <p>This chapter explains ···</p> <h4>Chapter 7</h4> <p>This chapter explains ···</p> </body> </html>通过使用 HTML,可以在文档中显示图像。
在 HTML 中,图像由 <img> 标签定义。 <img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。 要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。 定义图像的语法是: <img src="url" /> URL 指存储图像的位置。
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息。
比如上图代码,如果能显示则显示出来的是船的图像,如果不能显示,则浏览器会显示Big Boat 这个替换文本,而非是船的图像。
1.背景图像
<body background="url">
即gif 和 jpg 文件均可用作 HTML 背景。如果图像小于页面,图像会进行重复。
2.排列图像
<img src="url" align="bottom/middle/top">
其中,bottom 对齐方式是默认的对齐方式。
3.浮动图像
<img src="url" align="left/right">
图像的 align 属性设置为 “left”,图像将浮动到文本的左侧。 图像的 align 属性设置为 “right”,图像将浮动到文本的右侧。
4.调整图像尺寸
<img src="url" width="数字" height="数字">
通过改变 img 标签的 “height” 和 “width” 属性的值,可以放大或缩小图像。