前端页面html开发案例入门实践、超链接标签、图片标签、常用站点

前端页面html开发案例入门实践

css 复制代码

<!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>

执行结果如下

超链接标签

css 复制代码

<!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>

执行结果

图片标签

css 复制代码

<!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数值大小则会改变

还可以链接网页上的资源

css 复制代码

<!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>

执行结果

案例：梳理自己学习时候的常用网站

css 复制代码

<!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>

执行结果如下：