HTML学习笔记2

HTML计算机代码元素

HTML显示计算机代码时不适用可变的字母尺寸和间距，<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。

HTML键盘格式

<kbd>定义键盘输入。

HTML 样本格式

HTML <samp> 元素定义计算机输出示例。

HTML 代码格式

HTML <code> 元素定义编程代码示例。<code>不保留多余的空格和折行。如果想要保留空格和折行，可增加<pre>

<code>
<pre>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

这样输出的将保留文本格式。

HTML 变量格式化

HTML <var> 元素定义数学变量：

<p>爱因斯坦公式：</p>
<p><var>E</var>=<var>m</var><var>c</var><sup>2</sup>

HTML 计算机代码元素

标签	描述
<code>	定义计算机代码文本
<kbd>	定义键盘文本
<samp>	定义计算机代码示例
<var>	定义变量
<pre>	定义预格式化文本

HTML 注释

HTML使用来添加注释。浏览器不会显示注释内容。注释可以折行使用，可将一整句HTML语句注释掉。

条件注释：

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

条件注释定义只有 Internet Explorer 执行的 HTML 标签。

软件程序标签

各种 HTML 软件程序也能够生成 HTML 注释。

例如  标签会被包围在由 FrontPage 和 Expression Web 创建的 HTML 注释中。

作为一项规则，这些标签的存在，有助于对创建这些标签的软件的支持。

HTML CSS

例1：本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

<html>
<head>
<style type="text/css">
h1{color:red}
p{color:blue}
</style>
</head>

<body>
<h1>header1</h1>
<p>A paragraph.</p>
</body>

</html>

效果如下：

例2：不带下划线的链接

<html>
<body>
<a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接！</a>
</body>
</html>

这将产生一个没有横线的链接

例3：本例演示如何 <link> 标签链接到一个外部样式表。

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

<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
</html>

其结果如下：

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

外部样式表

如例3所示，这样的插入方式可以通过改变样式表中的值来改变整个站点的外观。

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。如例1所示。

内联样式

当要对个别元素进行格式设置时，可使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

<p style="color:red;margin-left:20px">
A paragraph.
</p>

上述代码改变了段落的颜色和左页边距。

标签	描述
<style>	定义样式定义。
<link>	定义资源引用。
<div>	定义文档中的节或区域（块级）。
<span>	定义文档中的行内的小块或区域。
<font>	规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont>	定义基准字体。不赞成使用。请使用样式。
<center>	对文本进行水平居中。不赞成使用。请使用样式。

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

如，当外部样式表对标题的定义如下：

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

内部样式表的定义为：

h3 {
  text-align: right; 
  font-size: 20pt;
  }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color: red; 
text-align: right; 
font-size: 20pt;

颜色属性继承与外部样式表，文字属性和排列属性仍然为内部样式表。

HTML链接

HTML用<a>来添加超链接，

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

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

超链接形式可以为文字，也可以为图片。以下是使用图片作为链接的例子：

<p><a href="/example/html/lastpage.html"><img border="0" src="/i/eg_buttonnext.gif" /></a></p>

超链接内容为文字则直接将定义图片的部分改成文字即可。

target属性

使用target属性设置超链接文本的显示位置，如设置target为_blank，超链接将会在新窗口打开文本：

<p><a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a></p>

HTML链接-name属性

name 属性规定锚（anchor）的名称。

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

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

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

锚的命名方式：

<a name="label">锚（要显示在页面上的文本）</a>

示例如下：

首先使用name属性创建命名锚：

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

然后在同一文档中创建对锚的链接

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

也可在其他页面中创建指向该锚的链接，只要在URL末尾加上#锚名称即可直接链接到这个命名锚：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

创建电子邮件链接

<p>这是邮件链接：<a href="mailto:somebody@microsoft.com?subject=Hello%20again">发送邮件</a></p>

结果为：这是邮件链接：发送邮件

注意：应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

另一个创建电子链接的方式：

<p>这是另一个邮件链接<a href="mailto:somebody@microsoft.com?cc=someoneelse@microsoft.com&bcc=someoneelse2@microsoft.com
&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a></p>