前端页面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>
执行结果如下：
