day04超链接&图片&表格

最新推荐文章于 2024-09-28 20:37:19 发布

Fend1

最新推荐文章于 2024-09-28 20:37:19 发布

阅读量139

点赞数

分类专栏：前端学习笔记-HTML 文章标签： html

本文链接：https://blog.csdn.net/Fend1/article/details/121183324

版权

前端学习笔记-HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的一些基本元素，包括超链接<a>标签的使用，如设置跳转地址、提示文本和禁用跳转；图片<img>标签的属性，如src、alt、title和尺寸调整；绝对路径与相对路径的概念及应用；div和span标签在布局中的作用；以及表格<table>的创建、样式设置、行列合并等。此外，还涵盖了表格的对齐方式和一些实用技巧。

摘要由CSDN通过智能技术生成

文章目录

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="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>