2023面试高手

这个屌丝很懒，什么也没留下！

热门标签

HTML/CSS1

作者：2023面试高手 | 2024-05-06 10:41:06

踩

HTML/CSS1

1.前置说明

请点这里

2.img元素

格式：

<img src="图片地址" alt="占位文字" width="图片宽度" height="图片高度">
1

其中alt是当图片加载失败时显示的文字而且不同内核的浏览器显示出来的占位文字的效果也是不尽相同的
而如果同时设置了图片宽度和图片高度的话可能会导致图片比例失调为了保持原图片的比例我们可以只设置width/height 浏览器会自动根据比例来计算出另外一个属性
还有就是alt是html5中img元素的必要属性

接下来是一个小小的演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片路径失败">
</body>
</html>
1
2
3
4
5
6
7
8
9
10

在这里插入图片描述

img元素的src属性值可以通过绝对路径或者相对路径进行表示
绝对路径：完整的图片路径表现形式
相对路径：不完整的图片路径表现形式(其中 .表示当前文件所在的路径可以省略而…则表示当前文件的上一级路径)
接下来分别通过绝对路径和相对路径来演示一下两种的区别
绝对路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片路径失败">
</body>
</html>
1
2
3
4
5
6
7
8
9
10

在这里插入图片描述
相对路径
先展示一下文件结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="./img.png" alt="图片路径失败">
</body>
</html>
1
2
3
4
5
6
7
8
9
10

当然以上写法也可以省略./

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="img.png" alt="图片路径失败">
</body>
</html>
1
2
3
4
5
6
7
8
9
10

当然我也可以获取当前路径下的images文件夹下的image图片同样可以有两种方式表达图片的获取路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="images/img.png" alt="图片路径失败">
</body>
</html>
1
2
3
4
5
6
7
8
9
10

假设我们的文件结构如下图所示依然是想要获取image图片的话那么可以通过…的方式进行图片的获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="../img.png" alt="图片路径失败">
</body>
</html>
1
2
3
4
5
6
7
8
9
10

然后我们html文件中的路径分隔符都是以/表示不管针对的是什么操作系统都是如此(要和Windows操作系统中的路径分隔符\以示区别)

1.常用的图片格式

.png：静态图片支持透明(不代表一定要透明效果)
.jpg：静态图片不支持透明
.gif：静态图片、动态图片支持透明
所谓透明效果其实指的就是图片的某些部分可以让背景透过显示

图片后缀名的修改并不会影响图片的本质(.jpg改成.gif 仍然保持不支持透明的特点)

2.像素

计算机所显示的图片其实就是由一堆像素(小正方块)组成的
而像素是图片显示的最小单位(图片是由一个个小正方块组合而成的这些小正方块就是像素)
每个像素都只能显示一种颜色
组成图片的像素越多那么图片就越清晰
我们平时所说的屏幕分辨率其实都是以像素作为单位的

3.a元素

基本格式：

<a href=""></a>
1

href是hyper reference的简称即超文本链接的意思
这个元素的作用在于点击超链接打开新的url
以下案例中点击百度字样就可以跳转到百度搜索引擎的界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://baidu.com">百度</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10

1.target属性

a元素除了上述所讲的href属性以外还可以设置target属性通过该属性我们可以控制url的打开方式
_self：默认值在当前窗口打开url
_blank：在一个新窗口打开url
_parent：在父窗口打开url
_top：在顶层窗口打开url
某个frame的name值：在某个frame中打开url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--默认打开方式-->
<a href="http://baidu.com">百度</a>
<!--_self-->
<a href="http://baidu.com" target="_self">百度(_self)</a>
<!--_blank-->
<a href="http://baidu.com" target="_blank">百度(_blank)</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2._parent、_top属性值以及某个frame的name值

这三个属性值和iframe元素有关所以先学会iframe元素再来看就容易多了
_parent：在父窗口中打开url
_top：在顶层窗口中打开url
某个frame的name值：在某个frame中打开url
接下来我们来演示一下这三个属性的使用
我们的文件结构如下所示
在这里插入图片描述
演示代码如下
page_a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我是页面page_a
<iframe src="page_b.html" frameborder="1" width="500" height="500" name="page_a"></iframe>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

page_b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我是页面page_b
<iframe src="page_c.html" frameborder="1"></iframe>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

page_c.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我是页面page_c
<br><a href="http://taobao.com" target="_parent">淘宝(_parent)</a>
<br><a href="http://taobao.com" target="_top">淘宝(_top)</a>
<br><a href="http://taobao.com" target="qq">淘宝</a>
<br><iframe src="http://qq.com" frameborder="1" name="qq">腾讯网</iframe>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果如下显示
在这里插入图片描述

4.iframe元素

基本格式

<iframe href="" frameborder=""></iframe>
1

其中href用于指定嵌套网页的url 而frameborder用于是否设置嵌套网页的边框(0表示不设置 1则表示需要设置) 当然除了这两个属性以外还可以为iframe元素设置width、height两种属性该元素旨在在网页中嵌套另一个网页
以下案例中演示了网页嵌套淘宝网页并且设置了边框的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="http://taobao.com" frameborder="1"></iframe>
</body>
</html>
1
2
3
4
5
6
7
8
9
10

5.base元素

基本格式：

<base href="" target="">
1

通过该元素你可以通过target属性统一设置a元素的url打开方式也可以通过href属性统一设置img元素中src的基地址(针对img元素中src为相对路径的情况基地址和相对路径进行拼接)
当然如果我们的a元素和base元素同时设置了url的打开方式的话那么根据就近原则就会采纳a元素中的url打开方式
注意：base元素是嵌套在head元素之中的
以下案例中我们通过base元素可以解决频繁设置同一个属性值的弊端(比如我们的多个a元素的url打开方式(target)的属性值都是_self的话那么我们就可以通过base元素的target来统一设置多个a元素的相同target)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base target="_blank" href="https://www.baidu.com">
</head>
<body>
<!--百度页面将会在当前页面中打开-->
<a href="http://baidu.com" target="_self">百度</a>
<br><a href="http://jd.com">京东</a>
<br><a href="http://taobao.com">淘宝</a>
<br><a href="http://qq.com">腾讯</a>
<br><img src="img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度搜索">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

6.锚点链接

页面的跳转可以分成两种：页面外跳转和页面内跳转
页面外跳转：不同页面之间的跳转
页面内跳转：同一页面内不同部分之间的跳转
我们的锚点链接完成的就是页面内跳转

锚点链接的格式主要有两种分别是所有元素的id属性、a元素的name属性但是均要以#开头
同时这要和iframe的name属性以示区别(我们通过iframe的name属性可以在指定iframe中打开新的url 对比之下我们通过所有元素的id属性或者a元素的name属性来完成页面内的跳转操作)

<a href="#first">第一章</a>
<a href="#goBackTop">找到回到顶部元素</a>
<h1 id="first">第一章</h1>
<a name="goBackTop">回到顶部</a>
1
2
3
4

接下来我们完成一个需求(其中涉及到跳转到其他页面的某个部分格式类似于：其他页面路径#某个部分id值)
文件结构如下
在这里插入图片描述
test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>小说</h1>
<p><a href="#first">第一章</a></p>
<p><a href="#second">第二章</a></p>
<p><a href="#third">第三章</a></p>
<p><a href="#goBackTop">找到回到顶部元素</a></p>
<h2 id="first">第一章</h2>
第一章<br>第一章<br>第一章<br>第一章<br>第一章<br>
第一章<br>第一章<br>第一章<br>第一章<br>第一章<br>
第一章<br>第一章<br>第一章<br>第一章<br>第一章<br>
第一章<br>第一章<br>第一章<br>第一章<br>第一章<br>
第一章<br>第一章<br>第一章<br>第一章<br>第一章<br>
<h2 id="second">第二章</h2>
第二章<br>第二章<br>第二章<br>第二章<br>第二章<br>
第二章<br>第二章<br>第二章<br>第二章<br>第二章<br>
第二章<br>第二章<br>第二章<br>第二章<br>第二章<br>
第二章<br>第二章<br>第二章<br>第二章<br>第二章<br>
第二章<br>第二章<br>第二章<br>第二章<br>第二章<br>
<h2 id="third">第三章</h2>
第三章<br>第三章<br>第三章<br>第三章<br>第三章<br>
第三章<br>第三章<br>第三章<br>第三章<br>第三章<br>
第三章<br>第三章<br>第三章<br>第三章<br>第三章<br>
第三章<br>第三章<br>第三章<br>第三章<br>第三章<br>
第三章<br>第三章<br>第三章<br>第三章<br>第三章<br>
<a href="#" name="goBackTop">回到顶部</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

test2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="test.html#second">打开小说</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10

该需求实现了锚点链接的功能

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/543802