前端页面html开发案例入门实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html案例</title>
</head>
<body>
<h1>web前端开发</h1>
<h2>HTML</h2>
<p>超文本标记语言，用于构建网页结构，定义网页包含的内容</p>
<hr/>
<h2>CSS</h2>
<p>层叠样式表，用于构建网页布局，外观，美化页面</p>
<hr/>
<h2>JS</h2>
<p>javaScript，脚本语言，用来构建网页行为与用户进行交互，使用户获得更好的体验</p>
<hr/>
</body>
</html>
执行结果如下
超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻页面</title>
</head>
<body>
<h1>欢迎来到新闻标签</h1>
<!-- 超链接的本地链接 -->
<a href="test09.html">返回</a>
<!-- 虚拟链接 -->
<a href="#" title="点击这个链接不跳转">科技</a>
<!-- 跳转外部链接 -->
<a href="https://w3school.com.cn">w3School</a>
<!-- 跳转到百度 不会覆盖原页面，target打开了新窗口来打开百度-->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
执行结果
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签测试</title>
</head>
<body>
<!-- src source 源 alt alternative 二选一-->
<img src="images/测试python非文本文件复制.png" alt="这是一个要复制的图片" width="764">
<img src="images/测试python非文本文件复制11.png" alt="这是一个实际路径不存在的图片">
</body>
</html>
执行结果
调整width数值大小则会改变
还可以链接网页上的资源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签测试</title>
</head>
<body>
<!-- src source 源 alt alternative 二选一-->
<img src="images/测试python非文本文件复制.png" alt="这是一个要复制的图片" width="300px">
<img src="images/测试python非文本文件复制11.png" alt="这是一个实际路径不存在的图片">
<img src="https://img0.baidu.com/it/u=1305594389,4081374205&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="这是一只可可爱爱的小猫" width="300px">
</body>
</html>
执行结果
案例：梳理自己学习时候的常用网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用网址</title>
</head>
<body>
<h3>常用网址</h3>
<p>
<img src="https://g.csdnimg.cn/static/logo/favicon32.ico" width="100px">
<a href="https://blog.csdn.net/m0_55284524?spm=1010.2135.3001.5343" target="_blank">csdn</a>
</p>
<p>
<img src="images/图灵Python.png" width="100px">
<a href="https://vip.tulingpyton.cn/" target="_blank">图灵</a>
</p>
<p>
<img src="https://mdn.alipayobjects.com/huamei_0prmtq/afts/img/A*sRUdR543RjcAAAAAAAAAAAAADvuFAQ/original" width="100px">
<a href="https://www.yuque.com/dashboard" target="_blank">语雀</a>
</p>
</body>
</html>
执行结果如下：
