1. 链接元素

（1）链接元素的功能

代码	功能	用途
<a herf="url" target="self">目标名称</a>	跳转到指定链接地址，可以是本地地址/锚记标记/网络地址，target属性请看详解	网站内部导航、友情链接、站点导航
<a herf="tel:1008611">拨打电话</a>	调用电话功能拨打电话	常用于移动端网站24小时服务热线
<a herf="emillto:123456.qq.com">电子邮件</a>	调用邮箱工具发送电子邮件	常用于手机端网站在线反馈渠道
<a herf="css3参考文档.pdf" download="css3参考文档下载">css3参考文档下载</a>	下载存放在指定路径的文档/音频/视频等	下载文档与其他媒体文件

(a)herf元素的target属性

代码	属性	功能
target	_self	点击超链接后会在当前窗口打开页面，此模式为默认模式
	_blank	点击超链接后会打开新窗口网址
	_parent	点击超链接后在父窗口中打开（跟框架有关）
	_top	在当前浏览器中打开，而框架会消失（跟框架有关）

2.HTML表格

（1）表格标签详解

标签	功能
<table></table>	表格起始符
<thead></thead>	表格头部
<tbody></tbody>	表格主体
<tfoot></tfoot>	表格尾部
<tr></tr>	一组tr为表格的一行
<th></th>	表格标题,标题文本会附带加粗效果
<td></td>	一组td为一个表格内容，有多少个内容就有多少组td

（2）表格实操案例-产品详情表

html表格中合并单元格用表格的colspan和rowspan属性进行，colspan为跨列合并，rowspan为跨行合并，期基本语法为colspan=”3”,其中的3为合并的列数，rowspan同理。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>产品详情表</title>
  </head>
  <body>
    <table
      width="378px"
      height="500px"
      border="1px"
      cellspacing="0px"
      align="center"
      cellpadding="3px"
    >
      <thead>
        <td colspan="2">
          <a href="#" title="PLAYBOY/花花公子皮鞋"
            ><img
              src="E:\PHP中文网前端开发\作业\hhgz.jpg"
              width="378px"
              height="200px"
          /></a>
        </td>
      </tr>
      <tr>
        <th colspan="2">
          <a href="#">PLAYBOY/花花公子皮鞋</a>
        </th>
      </tr>
      <tr>
        <th colspan="2"><h3>产品参数</h3></th>
    </thead>
      <tbody>
        <td>品牌</td>
        <td>PLAYBOY/花花公子皮鞋</td>
      </tr>
      <tr>
        <td>功能</td>
        <td>透气</td>
      </tr>
      <tr>
        <td>图案</td>
        <td>纯色</td>
      </tr>
      <tr>
        <td>季节</td>
        <td>春秋</td>
      </tr>
      <tr>
        <td>尺码</td>
        <td>35 36 37 38 39 40 41 42 43 44 45 46</td>
      </tr>
      <tr>
        <td>场合</td>
        <td>办公室</td>
      </tr>
      <tr>
        <td>流行元素</td>
        <td>金属</td>
      </tr>
      <tr>
        <td>鞋头款式</td>
        <td>尖头</td>
      </tr>
      <tr>
        <td>细分风格</td>
        <td>商务正装</td>
      </tr>
        <td>颜色分类</td>
        <td>黑色 棕色 黑色镂空 黑色冬季</td>
    </tbody>
      <tfoot>
        <td>上市年份季节</td>
        <td>2016年秋季</td>
      </tfoot>
    </table>
  </body>
</html>

（3）表格实操案例-产品详情表效果图

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0929作业

2021-01-31 20:19:50