首页 > 代码库 > HTML基础学习02

HTML基础学习02

HTML CSS

如何使用样式

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式:

外部样式表

当样式需要被应用到多个页面的时候,外部样式表将是最理想的选择,使用外部样式表可以通过更改一个文件来改变整个网站的外观。

<head><link rel="stylesheet" type="text/css" href="mystle.css"></head>

内部样式表

当单个文件需要特别的样式时,就可以使用内部样式表。可以在head部分通过<style>标签定义内部样式表。

<head>
<style type="text/css">
body
{
background-color:yellow;
color:red;
}
p{margin-left:20px}
</style>
</head>

内联样式

当特殊的样式需要应用到个别元素时,可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何css属性。

<p style="font-family:幼圆;font-size:40px;color:red">这是一个段落</p>

HTML 链接

HTML 超链接(链接)

超链接可以是一个字、一个词或一组词,也可以是一幅图片,你可以点击这些内容来跳转到新的文档或者当前文档的某个部分。当你吧鼠标指针移动到网页中的某个链接上时,箭头会变成一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式:

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

HTML 链接 - target 属性

使用 Target 属性,你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档:

<a href="http://www.baidu.com">百度一下</a><!--默认在当前页面内部打开一个网页-->
<a href="http://www.baidu.com" target="_blank">百度一下</a><!--如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。-->
<a href="http"//www.baidu.com"><img src="/image/01.gif"/></a><!--使用图像来作链接-->

HTML 链接 - name 属性

name 属性规定锚(anchor)的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示,它对读者是不可见的。

当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法:

<a name="label">锚(显示在页面上的文本)</a>

提示:锚的名称可以是任何你喜欢的名字。

提示:您可以使用 id 属性来替代 name 属性,命名锚同样有效。

实例

首先,我们在HTML文档中对锚进行命名(创建一个书签)

<a href name="tips">基本注意事项 - 有用的提示</a>

然后,我们在同一个文档中创建指向该锚的链接:

<a href="#tips">有用的提示</a>

也可以在其他页面中创建指向向该锚链接:

<a href="http://www.baidu.com#tips">有用提示</a>

创建电子邮件链接:

<html>
<body>
<p>这是邮件链接:
<a href="mailto:someone@microsoft.com?subject=Hello%20again"></a>
<p>
<b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</p>
</body>
</html>

链接到同一个页面的不同位置

<html>

<body>

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

HTML 图像

图像标签(<img>)和源属性(Src)

在HTML中,图像油<img>标签定义。<img>是空标签和<br/>折行标签一样它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src指“source”。源属性的值是图像的URL地址。

定义图像的语法是:

<img src="url"/><!--URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中,那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。-->

替换文本属性(Alt)

alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat"/><!--alt属性用于当图片不能正常显示的替换文本-->

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

背景图片:

<html>
<boby background="../images/QQ图片20170615160333.jpg">
<h3>背景图片</h3>
<p>gif和jpg文件都可用作HTML背景</p>
<p>如果图像小于页面,图像就会进行重复</p>
</body>
</html>

 

HTML基础学习02