day04超链接图片表格

文章目录

1.超链接标签
- 1）标签名称：a（双标签）
- - ①特点
  - ②属性
  - ③设置a标签禁止跳转（占坑）
2.图片标签的使用
- 1）标签名称img（单标签）
- 2）属性
- 3）了解
- 4）设置
3.绝对路径和相对路径的使用
- 1）绝对路径
- 2）相对路径
- - ①同级找同级:目标文件的文件名称.后缀名
  - ②上级找下级：目标文件的文件名称/目标文件的名称.后缀名
  - ③下级找上级：../目标文件的文件名称.后缀名
  - ④相对路径链接（双标签/在当前页面跳转到另一个网页的链接按钮）
4.div和span标签的使用（双标签）
- 1）div
- 2）span
- 3）div标签在HTML中的定位，就是用来布局
5.表格标签的使用（展示数据）
- 1）标签名称
- 2）属性
- - ①width/height 宽/高
  - ②border 边框
  - ③bordercolor/bgcolor 边框颜色/背景颜色
  - ④cellspacing/cellpadding 单元格与单元格之间的间距/单元格与单元格中内容的间距
- 3）常用：表格的水平和垂直方向的位置
- - ①水平方向 align:left、right、center
  - ②垂直方向 valign:top、bottom（底部）、middle
- 3）重点难点：colspan、rowspan（一般用在td）

1.超链接标签

1）标签名称：a（双标签）

①特点

超链接标签有颜色，没有写网址时默认是已点击过的紫色

有下划线

鼠标移入超链接范围内，鼠标会变为手（引导用户去点击超链接）

点击超链接可以跳转到相应位置，浏览器默认刷新一次

 <!-- http 协议 合同 -->
<!-- 浏览器作为客户端请求服务器 -->
<a href="http://www.baidu.com" title="点击这个标签就会跳转到百度首页"
target="_blank">百度首页
</a>

②属性

href 表示点击跳转之后的地址

title 提示文本就是会在鼠标的右下角有小文字提示增加用户体验

target 控制窗口打开方式

默认值 _slef 覆盖

_blank 在新页面打开

③设置a标签禁止跳转（占坑）

#例如：a href="###"

javastcript：；

<a href="###"></a>
<a href=" javastcript：；"></a>

2.图片标签的使用

可下载image preview 在编写时可以自动加载目标图片供选择

1）标签名称img（单标签）

<img src="http://图片地址 alt="您的网络状态不佳请稍后再试..." title="这张图片是什么"  width="200" height="300" border="1">

2）属性

src 引入图片的地址

alt 当图片加载失败的提示文本

title 提示文本

3）了解

width/height 宽度/高度

border 边框
- 数字
- 宽度、样式、颜色（bordercolor）

4）设置

表示宽度的数值（属性值中像素单位 px 是可以省略的）

3.绝对路径和相对路径的使用

1）绝对路径

<img src="C:\Users\某某文件中\tupianmingcheng.jpg" alt="">

相对简单，可以获取到文件的盘符路径
不推荐使用

2）相对路径

①同级找同级:目标文件的文件名称.后缀名

<img src="tupianmingcheng.jpg" alt="">

②上级找下级：目标文件的文件名称/目标文件的名称.后缀名

<img src="data:images/tupianmingcheng.jpg" alt="">

③下级找上级：…/目标文件的文件名称.后缀名

…/ 表示跳出当前文件夹

<img src="../home/tupianmingcheng.jpg" alt="">

④相对路径链接（双标签/在当前页面跳转到另一个网页的链接按钮）

注意：
在页面跳转的同时，要注意跳转的目标网页中的其他相关内容的连带性，比如图片是否能够加载
1.同级找同级

<a href="new.html">跳转到new</a>

2.上级找下级

<a href="new/new.html">跳转到new</a>

3.下级找上级

<a href="../new/new.html">跳转到new</a>

4.链接到其他站点

<a href="http://www.baidu.com">跳转到百度</a>

5.链接到Email

<a href="mailto:1366387076@qq.com">邮箱</a>

6.下载链接

<a href="aa.zip">文件下载</a>

4.div和span标签的使用（双标签）

1）div

<div></div>

没有实际含义，相当于一个盒子，做布局用

2）span

<span></span>

没有实际含义，包裹文本，或是一个字

3）div标签在HTML中的定位，就是用来布局

html+css => div+css

html 布局

css 美化

p 、 ul 、 li 、 i …都有自己的作用

5.表格标签的使用（展示数据）

表格在以前使用来做布局的，但它含有计算属性会影响布局，不方便，所有现在不用表格做布局了
计算属性：检查每个单元格中的内容，如果单元格中的内容较多的时候，会把更多的宽度分配给当前这个单元格
作用：展示数据
快速写法：(table>tr3>td3)*2

1）标签名称

text 在body处使用，给字体加颜色，body中的表格字体颜色也会随着改变

最外层 table 表格
tr 行

列

<body text="red">
<table width="500" height="500" border="1" bordercolor="green" bgcolor="pink" cellspacing="0" cellpadding="10" align="center" valign="bottom"><tr align="center"><td align="center"></td></tr></table>
</body>

2）属性

①width/height 宽/高

②border 边框

③bordercolor/bgcolor 边框颜色/背景颜色

④cellspacing/cellpadding 单元格与单元格之间的间距/单元格与单元格中内容的间距

cell 细胞、单元格

space 空间

padding 内边距

3）常用：表格的水平和垂直方向的位置

①水平方向 align:left、right、center

table：控制整个表格在水平方向移动

tr：控制表格中的一行文本在水平方向移动

td：控制单个单元格内容在水平方向移动

②垂直方向 valign:top、bottom（底部）、middle

table：没有效果

tr：控制表格中的一行文本在垂直方向移动

td：控制单个单元格内容在垂直方向移动

3）重点难点：colspan、rowspan（一般用在td）

colspan 列合并（意思是去掉列与列之间的竖线）
rowspan 行合并（去掉行与行之间的横线）
注意：
- col/row 列/行
- span 选择到第几列/行
- 要合并的行或者列，去掉时可以用注释占位，不用完全删除

day04超链接图片表格相关推荐

WEBBASIC Unit01 Web概述、 HTML概述、文本处理、图像和超链接、表格、表单
转载:https://blog.csdn.net/qq_38131668/article/details/73505925 参考:https://www.cnblogs.com/xiaziteng/p ...
JavaWeb——超链接及表格练习题
超链接一.内容跳转代码实现: 主页面代码: <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
怎么快速将图片表格转换为Excel表格？
今天跟大家分享一下怎么快速将图片表格转换为Excel表格? 1.我们想要将下面的图片表格转换为Excel表格. 2.首先打开Excel软件,点击[DIY工具箱] 3.鼠标点击[文字识别] 4.点击[选 ...
如何将图片表格转换为excel表格？
1.如下图要求将图片表格转换为Excel文件. 2.首先我们打开Excel软件,然后我们点击[DIY工具箱] 3.鼠标点击[文字识别] 4.点击[选择]添加图片文件 5.接着我们勾选表格图片 6. ...
怎么识别图片表格并提取？这个办法可以试试
很多时候我们都需要识别提取图片表格,比如在学术研究中,我们需要快速准确地识别图片表格,从而节省大量的时间,更加高效地完成研究工作.而在商业环境中,也可以通过快速识别图片表格,更快速准确地完成商业文件的 ...
freemarker模板导出word循环图片表格详细教程
前言:表哥之前已经过一篇freemarker模板导出带表格word详细教程 freemarker模板导出带表格word详细教程_Java大表哥的博客-CSDN博客,为什么现在又要写一篇呢. 因为我这 ...
如何识别图片表格？在线扫描识别表格的方法分享
如何识别图片表格?小伙伴们应该都知道,我们在装修的时候需要购买许多材料.我们在购买材料的时候则会留存许多纸质版的采购单.随着材料购买越来越多,我们在纸质单子上统计装修费用多有不便.其实我们完全可以识别 ...
word排版之图片表格的自动化编号及引用
毕业论文中公式图片表格的出现频率很高,如果手动输入他们的编号和引用,繁琐且容易出错,修改起来更麻烦.本文针对这一问题,给出图片.表格的自动化编号及引用方法. 目标: 实现插入删除图片自动按章节标号.效 ...

day04超链接图片表格

文章目录

1.超链接标签

1）标签名称：a（双标签）

①特点

②属性

③设置a标签禁止跳转（占坑）

2.图片标签的使用

1）标签名称img（单标签）

2）属性

3）了解

4）设置

3.绝对路径和相对路径的使用

1）绝对路径

2）相对路径

①同级找同级:目标文件的文件名称.后缀名

②上级找下级：目标文件的文件名称/目标文件的名称.后缀名

③下级找上级：…/目标文件的文件名称.后缀名

④相对路径链接（双标签/在当前页面跳转到另一个网页的链接按钮）

4.div和span标签的使用（双标签）

1）div

2）span

3）div标签在HTML中的定位，就是用来布局

5.表格标签的使用（展示数据）

1）标签名称

2）属性

①width/height 宽/高

②border 边框

③bordercolor/bgcolor 边框颜色/背景颜色

④cellspacing/cellpadding 单元格与单元格之间的间距/单元格与单元格中内容的间距

3）常用：表格的水平和垂直方向的位置

①水平方向 align:left、right、center

②垂直方向 valign:top、bottom（底部）、middle

3）重点难点：colspan、rowspan（一般用在td）

day04超链接图片表格相关推荐

最新文章

热门文章