HTML-超链接,图像标签,列表及表格

超链接标签

HTML使用标签 <a>来设置超文本链接,是可以从一个页面指向另一个目的端的链接。

超链接的使用:

使用href属性----创建指向另一个文档的链接

<a href=”http://www.baidu.com”>百度</a>

 

 

 

 

 

 

 

 

 

 

 

 

 

锚点设置:

 

通过a标签的两个属性来制作锚点:

 

1)使用name属性或者id属性创建文档内的书签

 

2) 通过href属性来跳转到对应书签的网页位置

 

例如:设置书签:

  <a name=”tips”>书签</a>

      <a href=”#tips”>跳转</a>

 

文档的打开方式:

通过target属性来规定在何处打开链接文档

1) _blank-------新窗口打开

2) _self--------目标文档载入并显示在相同的框架或者窗口中作为源文档

3) _parent------使得文档载入父窗口或者包含来超链接引用的框架的框架集

4) _top------使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口

 

图像标签:

 

使用img标签来引入外部图片:

 

<img src=”1.jpg” alt=”图片丢失”>

 

外部文件路径引入问题:

外部文件:相对路径 和 绝对路径;

./:代表文件所在的目录;

../: 代表文件所在的父级目录;

/: 代表文件所在的根目录;

 

使用alt属性来规定在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息。

 

 

 

 

列表:

 

列表有三种:有序列表、无序列表和自定义列表

有序列表:

type值:1、a、A、i、I

<ol type=””>

     <li>coffee</li>

     <li>milk</li>

</ol>

 

 

 

 无序列表:

type值:disc(实心小圆点)、circle(空心小圆点)、square(方形实心小圆点)

<ul type=””>

     <li></li>

     <li></li>

</ul>

 

 

 

 

 

 自定义列表:

<dl>

      <dt>Coffee</dt>

      <dd>- black hot drink</dd>

      <dt>Milk</dt>

      <dd>- white cold drink</dd>

 </dl>

 

 

 

列表之间的嵌套需要注意一定要加上 ol、ul外层标签;

 

 

表格:

表格使用table标签

 

<table>

 

        <tr>

 

            <td></td>

 

            <td></td>

 

            <td></td>

 

        </tr>

 

        <tr>

 

            <td></td>

 

            <td></td>

 

            <td></td>

 

        </tr>

 

</table>

完整的写法:

<table>

        <thead>

            <tr>

                <th></th>

                <th></th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td></td>

                <td></td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td></td>

                <td></td>

            </tr>

        </tfoot>

    </table>

table标签常用的几个属性:

align:表格相对周围元素对齐方式;

Cellpadding:规定单元边沿与其内容之间的空白

Cellspacing:规定单元格之间的空白;

Border:规定表格边框的宽度

 td中的属性:

水平对齐:align=”center”(中心)left(左侧)、right(右侧)

垂直对齐:valign=”top”、middle(中间)、bottom(底部)、baseline

跨行:rowspan=”2”

跨列:colspan=”2”

宽、高:width height

表格嵌套:注意td中嵌套完整的表格结构

 

posted @ 2021-07-02 16:42  sam-zh  阅读(312)  评论(0编辑  收藏  举报