HTML5保留的常用标签（2）

• 5.超链接标签
• • (1).外部链接
  • (2).内部链接
• 6.表格标签
• • (1).表格标签 table
  • (2).表格行标签 tr
  • (3).单元格标签 td
  • (4).表头标签 th
  • (5).表格标题标签 caption
• 7.框架标签
• • 内联框架标签 iframe
• 8.容器标签
• • (1).div 标签
  • (2).span 标签

5.超链接标签

超链接标签<a>用于在网页中标记文本图像从而形成超链接，用户点击后将跳转
   另一个指定的页面，从而实现浏览空间的跨越。a指的是anchor（锚），因此超
   链接又被称作锚链接。
   
   超链接可以用于指向任何其他位置，包括Internet上的其他网页、本地其他文档甚至
   当前页面中其他位置。适用于制作网页的导航菜单或列表，也可以用于发送邮件或者
   下载文件等。默认状态下，未被访问的链接文本显示为带有下划线的蓝色字体，鼠标
   悬浮在上面会变成手形，点击访问后链接文本会变成带有下划线的紫色字体。
           

超链接标签有如下两个重要属性：

href：目标内容的URL地址。

target：目标内容的打开方式，其属性值如表。

target属性值	解释
_self	自身
_blank	新窗口
_top	顶层框架
_parent	父框架

(1).外部链接

其基本格式如下:

外部链接可包含文本内容或者图片内容：

<!--文本示例-->：
<a href="www.baidu.com">百度</a>
<!--图片示例-->
<a href="www.baidu.com"><img src="logo.png"/></a>
           

外部链接的简单应用代码和运行效果如下：

<h2>外部超链接的简单应用</h2>
        <hr/>
        图片超链接的效果：<a href="https://www.baidu.com"><img src="ch02HTML5基础\ch02HTML5\image\logo.png"alt="百度"width="188",hight="288"/></a>
        <br/>
        文字超链接的效果：<a href="https://www.csdn.net">CSDN</a>
           

(2).内部链接

超链接标签也可以通过点击跳转同一页面的指定区域，其语法格式如下：

这里的“指定区域名：可以自定义，但是同时目标区域也必须标记出对应的名称，其格式如下：

内部链接运用以及运行代码和效果如下：

<h2>内部链接的运用</h2>
        <hr/>
        <p>
            <h3>目录</h3>
            <ul>
                <li><a href="#一">1</a></li>
                <li><a href="#二">2</a></li>
                <li><a href="#三">3</a></li>
                <li><a href="#四">4</a></li>
                <li><a href="#五">5</a></li>
                <li><a href="#六">6</a></li>
                <li><a href="#七">7</a></li>
                <li><a href="#八">8</a></li>
            </ul>
        </p>
        <hr/>
        <h3><a name="一">第一章</a></h3>
        <p>HTML5概述</p>
        <h3><a name="二">第二章</a></h1>
        <p>HTML5基础</p>
        <h3><a name="三">第三章</a></h2>
        <p>CSS基础</p>
        <h3><a name="四">第四章</a></h3>
        <p>Javascript基础</p>
        <h3><a name="五">第五章</a></h3>
        <p>HTML5画布</p>
        <h3><a name="六">第六章</a></h3>
        <p>HTML5表单</p>
        <h3><a name="七">第七章</a></h3>
        <p>HTML5音频和视频</p>
        <h3><a name="八">第八章</a></h3>
        <p>HTML5地理定位</p>
           

6.表格标签

表格标签由<table>和</table>定义，每个表格中包含若干行（由单元行标签
   <tr>和</tr>表示），每一行又被分为若干单元格（由单元格标签<td>和</td>
   表示）。
           

(1).表格标签 table

表格标签<table>和</table>用于定义一个完整的表格
           

(2).表格行标签 tr

表格行标签<tr>和</tr>用于定义表格中的一行
           

(3).单元格标签 td

单元格标签<td>和</td>用于定义表格行中的一个数据单元格，td为table date
    的（表格数据）的简写。数据单元格中可以包含表单、文本、水平线、图片、
    列表、段落甚至新的表格内容。默认状态下，单元格的内容为向左对齐。
           

(4).表头标签 th

表头标签<th>和</th>用于定义表格的第一行表头，默认为粗体字、居中对齐。
           

(5).表格标题标签 caption

表格标题标签<caption>和</caption>可用于为表格添加标题，该标题默认为
    居中对齐并显示在表格顶部。
           

表格标签综合运行的代码和效果如下：

<table border="1">   <!--属性border表示表格边缘的像素-->
            <caption>成绩表</caption>
            <tr>                              <!--第一行是表头，用表头th标签修饰，默认粗体字，居中对齐-->
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
            </tr>
            <tr>                              <!--第二行开始，每一行每个单元格用单元格标签td修饰，默认向左对齐-->
                <td>张三</td>
                <td>89</td>
                <td>78</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>60</td>
                <td>100</td>
            </tr>
        </table>
           

7.框架标签

框架标签用于在网页的框架内自定义子窗口。由于框架标签对于网页的
 可用性由负面影响，在HTML5中不再支持HTML4.01中原有的框架标签
 <frame>和<frameset>。只保留了内联框架标签<iframe>。
           

内联框架标签 iframe

该标签在HTML5中仅支持src属性，用于指定框架内部的网页来源。
例如：<iframe src="news.html"></iframe>
           

内联框架标签iframe的应用代码和效果如下：

<h3>内联框架iframe的应用</h3>
        <hr/>
        <iframe src="测试1.html"></iframe>
           

8.容器标签

(1).div 标签

标签<div>可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或
   节。标签中的元素名div来源于英文单词division（区域）的简写。该标签是一个
   块级元素（block level element），浏览器会自动在<div>和</div>所标记的区
   域前后自动放置一个换行符。每个标签可以一个独立的id号。


   同样属于块级元素的还由段落标签<p>、表格标签<table>、标题标签<h1>~<h6>
   等。
           

div标签应用的代码和运行效果如下：

<h3>div标签的应用</h3>
        <hr/>
        <h5>这是第一段的标题（没有使用div标签）</h5>
        <p>这是第一段的内容（没有使用div标签）</p>
        <hr/>
        <div>
            <h5>这是第二段的标题（使用了无样式要求的div标签）</h5>
            <p>这是第二段的内容（使用了无样式要求的div标签）</p>
        </div>
        <hr/>
        <div style="color: blueviolet;background-color: chartreuse;">
            <h5>这是第三段的标题（使用了指定样式要求的div标签）</h5>
            <p>这是第三段的内容（使用了指定样式要求的div标签）</p>
        </div>
           

(2).span 标签

<span>标签通常作为文本的容器，它没有特定的含义和样式，只有与CSS同时
   使用时才可以为指定文本设置样式属性。该标签是一个内联元素（inline element），与块级元素想法，内联元素不会自动在前后自动放置换行符，因此内联
   元素会默认在同一行显示。
           

span标签的运用代码和运行效果如下：

<h3>span标签的应用</h3>
        <hr/>
        <p>本段落使用了<span>span标签</span>，但未设置任何样式。</p>
        <p>本段落使用了<span style="color: crimson;">span标签</span>，并设置了样式。</p>