軟件開(kāi)發(fā)過(guò)程五個(gè)步驟網(wǎng)站seo優(yōu)化總結(jié)
HTML定義
HTML超文本標(biāo)記語(yǔ)言——HyperText Markup Language。
- 超文本是什么？ 鏈接
- 標(biāo)記是什么？ 標(biāo)記也叫標(biāo)簽，帶尖括號(hào)的文本
標(biāo)簽分類
- 單標(biāo)簽:只有開(kāi)始標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽(<br>換行 <hr>水平線 <img> 圖像標(biāo)簽)
- 雙標(biāo)簽:成對(duì)出現(xiàn)的標(biāo)簽(但凡需要包裹內(nèi)容的都是雙標(biāo)簽 因?yàn)樾?span style="color:#fe2c24;">要包裹內(nèi)容需要開(kāi)頭和結(jié)束 )
- 標(biāo)簽成對(duì)出現(xiàn)，中間包裹內(nèi)容
- <>里面放英文字母(標(biāo)簽名)
- 結(jié)束標(biāo)簽比開(kāi)始標(biāo)簽多/
HTML基本骨架
- html：整個(gè)網(wǎng)頁(yè)
- head：網(wǎng)頁(yè)頭部，用來(lái)存放給瀏覽器看的信息，例如CSS
-
- title：網(wǎng)頁(yè)標(biāo)題
- body：網(wǎng)頁(yè)主體，用來(lái)存放給用戶看的信息，例如圖片、文字
VS Code快速生成骨架：
在HTML文件(.html)中，!(英文)配合Enter/Tab鍵
標(biāo)簽關(guān)系
作用：明確標(biāo)簽的書寫位置；讓代碼格式更整齊
- 父子關(guān)系（嵌套關(guān)系）
- 兄弟關(guān)系（并列關(guān)系)
- * 代碼格式
-
- 父子關(guān)系：子級(jí)標(biāo)簽換行且縮進(jìn)（Tab鍵）
- 兄弟關(guān)系：兄弟標(biāo)簽換行要對(duì)齊
注釋
作用:對(duì)代碼的解釋說(shuō)明,能提高代碼的可讀性.(學(xué)習(xí)和工作中,關(guān)鍵代碼都需要加注釋)
<!-- 這是注釋，不顯示在瀏覽器 -->在 VS Code 中，添加 / 刪除注釋的快捷鍵：Ctrl + / .
標(biāo)題標(biāo)簽
一般用在新聞標(biāo)題、文章標(biāo)題、網(wǎng)頁(yè)區(qū)域名稱、產(chǎn)品名稱等等。
標(biāo)簽名:h1~h6(雙標(biāo)簽)
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- h1標(biāo)簽在一個(gè)網(wǎng)頁(yè)中只能使用一次，用來(lái)放新聞標(biāo)題或者網(wǎng)頁(yè)logo --><!-- h2~h6沒(méi)有使用次數(shù)限制 --><h1>一級(jí)標(biāo)題</h1><h2>二級(jí)標(biāo)題</h2><h3>三級(jí)標(biāo)題</h3><h4>四級(jí)標(biāo)題</h4><h5>五級(jí)標(biāo)題</h5><h6>六級(jí)標(biāo)題</h6>
</body>
</html>顯示特點(diǎn)：
? 文字加粗
? 字號(hào)逐漸減小
? 獨(dú)占一行（換行）
tips:
- h1 標(biāo)簽在一個(gè)網(wǎng)頁(yè)中只能用一次，用來(lái)放新聞標(biāo)題或網(wǎng)頁(yè)的 logo
- h2 ~ h6 沒(méi)有使用次數(shù)的限制
段落標(biāo)簽
一般用在新聞段落、文章段落、產(chǎn)品描述信息等等
標(biāo)簽名：p（雙標(biāo)簽）
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 段落之間有空隙 --><!-- p標(biāo)簽 段落的意思 --><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
</body></html>顯示特點(diǎn)：
? 獨(dú)占一行
? 段落之間存在間隙
換行和水平線
換行：<br>（單標(biāo)簽）
瀏覽器不識(shí)別代碼中的 Enter 鍵換行
水平線：<hr>（單標(biāo)簽）
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- br強(qiáng)制換行 --><p>天蒼蒼野茫茫， <br>我是隔壁的老王</p><!-- hr 水平線 了解即可 --><hr>
</body></html>文本格式化標(biāo)簽
作用：為文本添加特殊格式，以突出重點(diǎn)。常見(jiàn)的文本格式：加粗、傾斜、下劃線、刪除線等。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- strong 加粗 --><!-- i經(jīng)常用于制作小圖標(biāo) icon--><!-- del 刪除線 --><strong>加粗</strong><b>加粗</b><em>傾斜</em><i>傾斜</i><ins>下劃線</ins><u>下劃線</u><del>刪除線</del><s>刪除線</s>
</body>
</html>strong、em、ins、del 標(biāo)簽自帶強(qiáng)調(diào)含義（語(yǔ)義）。
important:
- strong 加粗
- i經(jīng)常用于制作小圖標(biāo) ?icon
- del 刪除線
*圖像標(biāo)簽
作用：在網(wǎng)頁(yè)中插入圖片.
<img src="圖片的URL">src用于指定圖像的位置和名稱，是 <img> 的必須屬性。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 元素>>>標(biāo)簽 --><!-- 屬性alt src... --><!-- 屬性值 引號(hào)里面的內(nèi)容 --><!-- 屬性='屬性值' 鍵值對(duì) --><!-- src 圖片的路徑 --><img src="tupian.jpg">
</body></html>圖片標(biāo)簽的其他屬性
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圖片其他屬性</title>
</head><body><!-- src 圖片路徑 --><!-- alt圖片加載失敗時(shí)，替換的文本 --><!-- title 鼠標(biāo)懸停在圖片上顯示的文本 --><!-- width 寬度，當(dāng)寫一個(gè)值的時(shí)候，另一個(gè)會(huì)等比縮放 --><!-- height高度，當(dāng)寫一個(gè)值的時(shí)候，另一個(gè)會(huì)等比縮放 --><img title='圖片' src="tupian.jpg" alt="這是一張圖片" width="500" height="500"><h1 title="真不錯(cuò)">我</h1><!-- title是屬性時(shí)，屬性值是：鼠標(biāo)懸停在圖片上顯示的文本 --><!-- title是標(biāo)簽/元素時(shí)，title是網(wǎng)頁(yè)名 -->
</body></html>
- 屬性名="屬性值"
- 屬性寫在尖括號(hào)里面，標(biāo)簽名后面，標(biāo)簽名和屬性之間用空格隔開(kāi)，不區(qū)分先后順序
路徑
路徑指的是查找文件時(shí)，從起點(diǎn)到終點(diǎn)經(jīng)歷的路線
路徑分類：
相對(duì)路徑：從當(dāng)前文件位置出發(fā)查找目標(biāo)文件
絕對(duì)路徑：從盤符出發(fā)查找目標(biāo)文件(Windows 電腦從盤符出發(fā) Mac 電腦從根目錄出發(fā))
*相對(duì)路徑---從當(dāng)前文件位置出發(fā)查找目標(biāo)文件
- . /表示當(dāng)前文件所在文件夾
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="./images/tupian.jpg" alt="">
</body></html>- .. /表示當(dāng)前文件的上一級(jí)文件夾
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="../images/tupian.jpg" alt="">
</body></html>- 不能跨盤符找文件
絕對(duì)路徑 -從盤符出發(fā)查找目標(biāo)文件
應(yīng)用場(chǎng)景:友情鏈接
- Windows 電腦從盤符出發(fā)
- Mac 電腦從根目錄（/）出發(fā)
<img src="C:\images\tupian.jpg">- Windows 默認(rèn)是 \ ，其他系統(tǒng)是 /，建議統(tǒng)一寫為 /
- 文件的在線網(wǎng)址：https://www.itheima.com/images/logo.png
*超鏈接
作用：點(diǎn)擊跳轉(zhuǎn)到其他頁(yè)面。
href 屬性值是跳轉(zhuǎn)地址，是超鏈接的必須屬性。
超鏈接默認(rèn)是在當(dāng)前窗口跳轉(zhuǎn)頁(yè)面，添加 target="_blank" 實(shí)現(xiàn)新窗口打開(kāi)頁(yè)面
鏈接分類:
- 外部鏈接,注意要添加協(xié)議(https://等)
<!-- 跳轉(zhuǎn)到百度 -->
<a href="https://www.baidu.com">百度</a>- 內(nèi)部鏈接,注意路徑問(wèn)題
<a href="./04.段落標(biāo)簽.html">跳轉(zhuǎn)到段落標(biāo)簽</a>- 空鏈接?#(或者空格) 點(diǎn)擊完會(huì)回到頁(yè)面頂部(不確定跳轉(zhuǎn)地址)
<a href="#">空鏈接</a><h1>跳轉(zhuǎn)</h1><h2>跳轉(zhuǎn)</h2><h2>跳轉(zhuǎn)</h2><h2>跳轉(zhuǎn)</h2><h2>跳轉(zhuǎn)</h2><h2>跳轉(zhuǎn)</h2><h2>跳轉(zhuǎn)</h2><h2>跳轉(zhuǎn)</h2><h2>跳轉(zhuǎn)</h2><h2>跳轉(zhuǎn)</h2><h2>跳轉(zhuǎn)</h2><h2>跳轉(zhuǎn)</h2><h2>跳轉(zhuǎn)</h2><h2>跳轉(zhuǎn)</h2>- 死鏈接 點(diǎn)擊后沒(méi)有任何效果(適用于不確定跳轉(zhuǎn)地址)
<a href="javascript:;">死鏈接</a>- *圖片標(biāo)簽
<a href="https://www.baidu.com"><img src="./tupian.jpg" alt="">
</a>- 下載
<a href="下載文件路徑">下載</a>- 在新窗口打開(kāi)頁(yè)面
<a href="https://www.itcast.cn" target="_blank">傳智播客</a><a href="圖片路徑" target="_blank">圖片標(biāo)簽</a>音頻標(biāo)簽
<audio src="音頻的 URL"></audio>常見(jiàn)屬性:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- src 路徑 --><!-- controls 控制面板--><!-- loop 循環(huán)播放 --><!-- autoplay 自動(dòng)播放 一般瀏覽器會(huì)禁止自動(dòng)播放 --><!-- 書寫 HTML5 屬性時(shí)，如果屬性名和屬性值相同，可以簡(jiǎn)寫為一個(gè)單詞 --><audio src="./media/music.mp3" controls loop autoplay></audio><!-- 以下是為了以前照顧兼容性寫法 現(xiàn)在不需要了 --><audio><source src="./media/music.mp3"><source src="./media/music.ogg"><source src="./media/music.wav">你的瀏覽器版本也太low了，趕緊更新一個(gè)吧 <a href="">點(diǎn)我啊</a></audio>
</body></html>視頻標(biāo)簽
<video src="視頻的 URL"></video>常見(jiàn)屬性:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- muted 靜音 可以用來(lái)設(shè)置視頻的自動(dòng)播放 搭配 autoplay --><video src="./media/vue.mp4" controls loop autoplay muted width="500"></video>
</body></html>案例一:
目的:制作如下網(wǎng)頁(yè)(tips:網(wǎng)頁(yè)制作思路：從上到下，先整體再局部，逐步分析制作
分析內(nèi)容 → 寫代碼 → 保存 → 刷新瀏覽器，看效果)
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>尤雨溪</h1><hr><p>尤雨溪，前端框架<a href="javascript:;">Vue.js</a>的作者，<a href="javascript:;">HTML5</a>版Clear的打造人，獨(dú)立開(kāi)源開(kāi)發(fā)者。曾就職于GoogleCreative Labs和MeteorDevelopmentGroup。由于工作中大量接觸開(kāi)源的項(xiàng)目<a href=" ">JavaScript</a>，最后自己也走上了開(kāi)源之路，現(xiàn)全職開(kāi)發(fā)和維護(hù)<a href="javascript:;">Vue.js</a>。</p><img src="./photo.jpg" alt=""><h2> 學(xué)習(xí)經(jīng)歷</h2><p>尤雨溪畢業(yè)于上海復(fù)旦附中，在美國(guó)完成大學(xué)學(xué)業(yè)，本科畢業(yè)于Colgate University，后在Parsons設(shè)計(jì)學(xué)院獲得Design & Technology藝術(shù)碩士學(xué)位，任職于紐約Google Creative Lab。</p><h2>主要成就</h2><p>尤雨溪<strong>大學(xué)專業(yè)并非是計(jì)算機(jī)專業(yè)</strong>，在大學(xué)期間他學(xué)習(xí)專業(yè)是室內(nèi)藝術(shù)和藝術(shù)史，后來(lái)讀了美術(shù)設(shè)計(jì)和技術(shù)的碩士， <ins>正是在讀碩士期間，他偶然接觸到了JavaScript，從此被這門編程語(yǔ)言深深吸引，開(kāi)啟了自己的前端生涯 。</ins></p><p>2014年2月，開(kāi)發(fā)了一個(gè)前端開(kāi)發(fā)庫(kù)Vue.js。Vue.js 是構(gòu)建 Web 界面的 JavaScript 框架，是一個(gè)通過(guò)簡(jiǎn)潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。</p><h2>社會(huì)任職</h2><p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex團(tuán)隊(duì)，尤雨溪稱他將以技術(shù)顧問(wèn)的身份加入Weex團(tuán)隊(duì)來(lái)做 Vue 和 Weex 的 JavaScript runtime整合，目標(biāo)是讓大家能用Vue 的語(yǔ)法跨三端。</p>
</body></html>案例二
目的:實(shí)現(xiàn)圖片頁(yè)面跳轉(zhuǎn)(tips:實(shí)現(xiàn)圖片頁(yè)面跳轉(zhuǎn)需要用到img標(biāo)簽和a標(biāo)簽 兩者結(jié)合即可完成)
解答詳情步驟:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 可以先建一個(gè)超鏈接頁(yè)面,里面先放空鏈接(因?yàn)榇藭r(shí)我們還不確定跳轉(zhuǎn)地址) --><a href="#">搜索</a><a href="#">目錄</a><a href="#">詳情</a><a href="#">登錄</a>
</body></html>- 先建一個(gè)超鏈接頁(yè)面,里面先放空鏈接(因?yàn)榇藭r(shí)我們還不確定跳轉(zhuǎn)地址,瀏覽器顯示畫面如下,此時(shí)我們點(diǎn)擊鏈接沒(méi)有任何變化
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#"><img src="圖片路徑"></a><a href="#"></a><a href="#"></a><a href="#"></a>
</body></html>2. 再建一個(gè)搜索圖片界面,之后我們返回第一個(gè)建的頁(yè)面,將圖片界面文件路徑加到剛才我們填的空鏈接(<a href="#">搜索</a>),點(diǎn)擊發(fā)現(xiàn)能夠?qū)嵭刑D(zhuǎn)
3.再建一個(gè)目錄圖片界面,之后我們返回第一個(gè)建的頁(yè)面,將目錄圖片文件路徑加到剛才我們填的空鏈接(<a href="#">目錄</a>),點(diǎn)擊發(fā)現(xiàn)能夠?qū)嵭刑D(zhuǎn)(剩下兩個(gè)界面也是如此)
- 完整代碼如下(需要分為五個(gè)文件,第一個(gè)文件用來(lái)做跳轉(zhuǎn)頁(yè)面首頁(yè),剩下四個(gè)分別是各自的超鏈接圖片標(biāo)簽):
文件一:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="./work2.html" target="_blank">搜索</a><a href="./work3.html" target="_blank">目錄</a><a href="./work4.html" target="_blank">詳情</a><a href="./work5.html" target="_blank">登錄</a>
</body></html>文件二:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#"><img src="../images/index.png"></a><a href="#"></a><a href="#"></a><a href="#"></a>
</body></html>文件三:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#"></a><a href="#"><img src="../images/list.png"></a><a href="#"></a><a href="#"></a></html>文件四:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#"></a><a href="#"></a><a href="#"><img src="../images/details.png"></a><a href="#"></a></body></html>文件五:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"><img src="../images/login.png"></a></body></html>大家快去試試吧!