图像、链接、网页布局

最新推荐文章于 2024-05-19 17:34:30 发布

秃头酱酱

最新推荐文章于 2024-05-19 17:34:30 发布

阅读量260

点赞数

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_59806308/article/details/123082146

版权

HTML 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

（一）图像标签

常见的图像格式：JPG、GIF、PNG、BMP（位图）......

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img标签
src：图片地址（必填）
     相对地址(推荐使用)，绝对地址
     ../ 表示上一级目录
alt：图片名字（必填）
-->
<img src="../resources/image/头像.jpg" alt="我的头像" title="悬停文字" width="300" height="300"/>
</body>
</html>

（二）超链接标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签学习</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a><br/>
<!--a标签
href：表示要跳转到哪个页面
target：表示窗口在哪里打开
       _blank：表示在新标签中打开
       _self：在自己的网页中打开
-->

<!--页面间链接-->
<a href="01-我的第一个网页.html"target="_blank">点击我跳转到页面一</a><br/>
<a href="https://www.baidu.com"target="_self">点击我跳转到百度</a>
<br/>
<a href="02-基本标签.html">
    <img src="../resources/image/头像.jpg" alt="我的头像" title="悬停文字" width="300" height="300"/>
</a>
<br/>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
3.#+标记的名字
-->
<a href="#top">回到顶部</a><br/>

<!--功能性链接
邮件链接：mailto：-->
<a href="mailto：473974673@qq.com">点击联系我</a>
<a href="https://user.qzone.qq.com/473974673/infocenter" target="_blank">QQ空间</a><br/>

<a name="down">底部</a><br/>
</body>
</html>

（三）页面布局

块元素

无论内容多少，该内容独占一行（p、h1-h6...）

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行（a、strong、em...）

页面结构分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主题</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架学习</title>
</head>
<body>

<iframe src="//player.bilibili.com/player.html?aid=253745107&bvid=BV1SY411t7ag&cid=498249735&page=1"scrolling="no" 
border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
<iframe src="//player.bilibili.com/player.html?aid=808680417&bvid=BV1B34y127H1&cid=498258121&page=1"scrolling="no" 
border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

<iframe src="" name="hello"  frameborder="0"></iframe>
<a href="01-我的第一个网页.html" target="hello">
    点击跳转出01页面</a>
<a href="https://blog.csdn.net/weixin_59806308?type=blog" target="CSDN" >
    点击跳转出CSDN页面</a>
<hr/>
<iframe src="" name="CSDN"  frameborder="0" width="1330px" height="555px"></iframe>

</body>
</html>