链接元素和列表

0929作业

1. 链接元素的功能,至少写出三种,必须包括锚点,并分析锚点的功能与用途
2. 表格中的行与列的合并涉及哪些属性, 并完成一个小案例,例如商品表, 购物车等…

一、链接元素的一些简单功能

链接元素a标签,超链接,可以点击跳转到某个链接或者某个路径。

1. href 链接

链接url地址
<a href="www.baidu.com">百度一下</a>
<a href="www.php.cn">php中文网</a>
打电话，发邮件
<a href="tel:18992711111">点击拨打电话</a>
<a href="mailto:1110@qq.com">点击发送邮件</a>

2. target 链接打开方式

<a href="www.baidu.com" target="_self">默认值，在当前窗口打开链接</a>
<a href="www.baidu.com" target="_blank">常用，在新窗口打开链接</a>
<a href="www.baidu.com" download="demo.html" target="_blank">点击下载此文件</a>

二、锚点

<a href="#md1">点击跳到蓝色</a>
<a href="#md2">点击跳到红色</a>

<div id="md1" style="height:200px;width:200px;margin-top: 1000px; background-color: turquoise;"> </div>
<div id="md2" style="height:200px;width:200px;margin-top: 1500px; background-color: #f00;"></div>
功能：点击跳转到页内指定位置
用途：可以通过定位作为标记或者书签，比如很长的网站页面，点击跳转到相应位置，省时省力。

三、表格中的常用属性和行与列的合并

<table>定义这是表格
<tbody>表格主体，一般不写也会自动生成
<hr>表格的行
<th>表头
<td>单元格
<caption>表格自带标题标签
<colspan>横向合并，行
<rowspan>竖向合并，列

<table border="1" width="600" cellspacing="0" cellpadding="3">
    <tbody>
        <caption style="font-size: 20px; margin-bottom: 10px">
            公司采购物品清单
        </caption>
    <tr>
        <th rowspan="6" width="20"> 电子设备</th>
        <th>排序</th>
        <th>名称</th>
        <th>数量</th>
        <th>单价</th>
        <th>总价</th>
    </tr>
    <tr>
        <td>1</td>
        <td>台式电脑</td>
        <td>10</td>
        <td>3000</td>
        <td>30000</td>
    </tr>
    <tr>
        <td>2</td>
        <td>打印机</td>
        <td>3</td>
        <td>4000</td>
        <td>12000</td>
    </tr>
    <tr>
        <td>3</td>
        <td>笔记本电脑</td>
        <td>5</td>
        <td>3000</td>
        <td>15000</td>
    </tr>
    <tr>
        <td>4</td>
        <td>投影仪</td>
        <td>1</td>
        <td>6000</td>
        <td>6000</td>
    </tr>
    <tr>
        <td>5</td>
        <td>座机</td>
        <td>10</td>
        <td>50</td>
        <td>500</td>
    </tr>
    <tr>
        <td colspan="6">合计：63500</td>
    </tr>
    </tbody>
</table>

案例截图