寒假Day35:HTML表格+图像+超链接

表格

表格的基本标签:(必须要有)

  • table标签(表格)
  • tr标签(行)
  • td标签(单元格)

另外:

表格标题<caption>

单元格内部的表头<th> ,默认样式:粗体和居中

此外:

写了和没写在浏览器中没有区别,但是对于逻辑性是有的是这三个标签,用以区别表头表身和表脚。

<thead>  <tbody>  <tfoot>

具体格式:

<table>
  <caption>表格标题</caption>   <thead>     <tr>       <th>one</th>       <th>two</th>     </tr>   </thead>    <tbody>     <tr>       <td>1111</td>       <td>2222</td>     </tr>     <tr>       <td>3333</td>       <td>4444</td>     </tr>   </tbody>   <tfoot>     <!-- 这边往往用于统计数据-->   </tfoot>

</table>

浏览器显示如图:

合并行:

在tr之间和td并列的地方插入

<td rowspan="需要合并的行数">内容</td>

注意:需要合并的行数是指该行(包括该行)往下计算

和并列同理:

<td colspan="需要合并的列数">内容</td>

图像

使用标签<img/>(自闭合标签)

该标签的三个属性

src:图像源文件所在路径(不可少)

<img src="路径"/>

alt:图片无法显示时候的提示文字(不可少),设置图片描述信息,给搜索引擎看

title:鼠标移动到图片上的提示文字(值一般=alt),给用户看

<img src="路径" alt="描述(给搜索引擎看)" title="描述(给用户看)">

绝对路径:完整路径

相对路径:相当于当前网页定位到的图片位置;系统自动生成的都是相对路径;对于一个网站来说,外部文件或图片的引用都是使用相对路径,几乎不用绝对路径。

../ :表示上一级目录(但是mac里面好像使用\+空格形成转义符来用的,忘了???)

网页图片分成:

位图:放大缩小会失真,jpg、png、gif,组成单位像素

矢量图:放大缩小不会失真,ai、cdf、fh、swf,组成单位数学向量。

超链接

超链接两种方式:外部链接、内部链接(内部页面链接、锚点链接)

外部链接

<a>标签

<a href="链接地址" target="目标窗口的打开方式">超链接文字</a>

打开方式:(即<a>标签的target属性)

_self:当前窗口打开

_blank:新窗口打开

内部链接:

与自身网站有关的链接,链接地址直接输出相对路径即可

锚点链接:

链接对象:当前页面的某一个部分。

就类似于博客的右边有一个小方框导航栏,按到哪一个就会滑动到当前页面的哪一块中

需要设置:目标锚点的id名称和超链接部分。

超连接部分放在开头即可:

<div>
        <a href="#book">文档</a><br />
        <a href="#pic">图片</a><br />
        <a href="#article">文章</a><br />
</div>

目标锚点:

<div id="目标锚点id名称">

例如:

<div id="book">
原文地址:https://www.cnblogs.com/OFSHK/p/12341405.html