ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2020-02-21 15:04:24  阅读:263  来源: 互联网

标签:表格 标签 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">

 

标签:表格,标签,Day35,HTML,相对路径,超链接,链接,锚点
来源: https://www.cnblogs.com/OFSHK/p/12341405.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有