首页 > 代码库 > 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> 标签的方式：
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 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