HTML5保留的常用标签(2)

5.超链接标签

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

超链接标签有如下两个重要属性:
href:目标内容的URL地址。
target:目标内容的打开方式,其属性值如表。

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

(1).外部链接

其基本格式如下:

 <a href="URL地址">链接文本或图片</a>

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

<!--文本示例--><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).内部链接

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

<a href="#指定区域名">链接文本或图像</a>

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

<a name="区域名">目标内容</a>

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

        <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>

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值