(一)图像标签
常见的图像格式: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>