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 注释。
例如 <!--webbot bot--> 标签会被包围在由 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>
