HTML5学习笔记（二）：HTML基础学习之一

元素、属性和格式化

元素是指开始标签到结束标签之前的所有代码，如：

 <p>this is my page!</p>
 <!-- 下面的可以称为空元素 -->
 <br/>

大多数的HTML元素都是可以进行嵌套的。

属性是指为元素提供更多信息的以键值对的形式存在的数据，如：

 <!-- 下面的属性herf描述了超链接的去向，而target描述了超链接的打开方式 -->
 <a href="http://www.cnblogs.com/" target="_blank">博客园</a>

大多数的标签都存在通用的属性，如：

• class：元素的类名
• id：元素的唯一标识
• style：元素的样式
• title：元素的额外信息

格式化标签是用来修饰指定文本的标签，如下常用标签：

• <b>粗体字
• <em>着重文字
• <i>斜体字
• <sub>下标
• <sup>上标
• <ins>插入字
• <del>删除字

样式

样式有下面3种类型：

外部样式表

定义在外部css文件中，通过代码引入当前页面：

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

内部样式表

直接就在当前页面里写入样式代码：

<style type="text/css">
    h1 {
        color: blue;
    }
</style>

内联样式表

直接写在目标元素上仅针对当前元素的样式代码：

<h1 style="color: brown; font-size: 50px;">this is a title</h1>

更多的样式知识我们会在下一节进行学习。

连接

外部连接

<a href="http://www.baidu.com/" target="_blank">跳转到百度</a>

通过href来指定跳转到的地址，target指定跳转的类型，如下：

指定框架，当框架设定了名称时，如：

<frameset cols="100,*">
  <frame src="toc.html">
  <frame src="pref.html" name="view_frame">
</frameset> 

可以指定对应的框架载入对应的页面：

<h3>Table of Contents</h3>
<ul>
  <li><a href="pref.html" target="view_window">Preface</a></li>
  <li><a href="chap1.html" target="view_window">Chapter 1</a></li>
  <li><a href="chap2.html" target="view_window">Chapter 2</a></li>
  <li><a href="chap3.html" target="view_window">Chapter 3</a></li>
</ul>

另外有4个保留的目标名称用作特殊的文档重定向操作：

• _blank：浏览器总在一个新打开、未命名的窗口中载入目标文档。
• _self：这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
• _parent：这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
• _top：这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

内部连接

内部连接用来控制当前页面的滚动，可以使文档滚动到指定的锚点：

<a href="#tips">滚动到提示</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1><a name="tips">提示</a></h1>

表格

HTML中可以通过简单的标记来编写一个表格：

<table border="1">
    <caption>单元格标题</caption>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
</table>

列表

无序列表

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
</ul>

有序列表

<ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
</ol>

嵌套列表

<ul>
    <li>手机</li>
    <ul>
        <li>华为</li>
        <ul>
            <li>低端机</li>
            <li>高端机</li>
        </ul>
        <li>小米</li>
        <ul>
            <li>低端机</li>
            <li>高端机</li>
        </ul>
    </ul>
    <li>电脑</li>
    <ul>
        <li>联想</li>
        <ul>
            <li>低端机</li>
            <li>高端机</li>
        </ul>
        <li>东芝</li>
        <ul>
            <li>低端机</li>
            <li>高端机</li>
        </ul>
    </ul>
</ul>

需要注意的是，有序及无序列表也支持嵌套。

自定义列表

<dl>
    <dt>手机</dt>
        <dd>华为</dd>
        <dd>小米</dd>
    <dt>电脑</dt>
        <dd>联想</dd>
        <dd>东芝</dd>
</dl>

自定义列表没有额外的列表项装饰符号。

块

常用块标签

包括：<h1>~<h6>、<p>、<ul>等，通常会以新行开始；

内联块标签

<b>、<a>、<img>等，不会以新行开始；

div标签

通常称为块元素，用来组合其它元素的容器，该元素默认以新行开始。div元素本身不会对其包含的元素进行任何的格式化，需要配合样式表使用，默认的display属性是block。

span元素

span元素和div元素一致，唯一的不同是该元素是内联元素，不会以新行开始，默认的display属性是inline。