前端頁面html開發案例入門實踐、超鏈接標簽、圖片標簽、常用站點

前端頁面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>

執行結果如下：
在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/85104.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/85104.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/85104.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！