HTML视频教程|HTML超文本(上)-大灰牛博客

第3章HTML超文本(上)

HTML链接
HTML超链接打开方式
HTML超链接提示文字
HTML超链接书签
HTML表格
HTML图像

HTML链接

1.给文字添加超链接;2.给图像添加超链接

HTML超链接打开方式

打开方式分为本页打开和新浏览器窗口打开,其中_self为默认当前窗口打开，_blank创建新窗口打开访问

<a href="#" target="_self"></a>
<a href="#" target="_blank"></a>

HTML超链接提示文字

<a href="#" target="_self" title="提示文本"></a>

释义：有时候超链接文字不足以说明点击后要链接的内容，所以这个时候，我们需要给超链接添加提示文字，进行描述；

HTML超链接书签

<a href="#ceshi">跳转文本一</a>
<p id="ceshi">文本一</p>

锚文本？锚（书签）用于在某个页面内不同位置的跳转，锚文本a标签，链接标签的name属性，一个页面可以定义多个锚，通过超链接的href属性跳转到对应的锚点

<a href="#ceshi">跳转文本二</a>
<a name="ceshi">文本二</a>

HTML表格

表格均有若干行(tr标签定义),每行被分为若干个单元格(td标签定义)，单元格cell可以包含文本、图片、列表、段落、表单、表格等

<table>
    <tbody>
        <tr>
            <th>一行一列</th>
            <th>一行二列</th>
        </tr>
        <tr>
            <td>二行二列</td>
            <td>二行二列</td>
        </tr>
    </tbody>
</table>

其中border=”1”，定义的是表格最外面的边框粗细，当border=0，不显示边框

<table width="850" border="1" bordercolor="red" cellspacing="0" cellpadding="10">
    <tbody>
        <tr>
            <th rowspan="2">跨行合并</th>
            <th colspan="2">跨列合并</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>二行二列</td>
            <th>二行三列</th>
            <th>二行四列</th>
        </tr>
    </tbody>
</table>

小结:colspan为跨列合并，rowspan为跨行合并，其他如表头可以通过标签th，标题通过标签caption,单元格边距为cellpadding，表格背景颜色标签bgcolor，标签thead定义头部，标签tbody定义表格主体，标签tfoot定义…

HTML图像

a.插入背景图像/设置一张图片为网页背景色

<body background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587218922930&di=6d3b3554789d7c01fa748f6fcd172088&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F559e3cb5ceb30.jpg"></body>

b.img插入图像/定义图片的width宽与height高属性,对齐方式align=”center”或bottom,top,left与right

<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1589034782&di=ecd57e9b20732cf9c482f26448bd41bb&src=http://dpic.tiankong.com/dd/uj/QJ6345888966.jpg" width="200px" height="200px" alt="天空之城">

转载请注明：大灰牛博客 » HTML视频教程|HTML超文本(上)