網(wǎng)站的欄目關(guān)鍵詞常用的網(wǎng)絡(luò)推廣方法
1、標(biāo)簽語法
HTML超文本標(biāo)記語言——HyperText Markup Language
- 超文本是鏈接
- 標(biāo)記也叫標(biāo)簽，帶尖括號(hào)的文本
2、HTML基本骨架
HTML基本骨架是網(wǎng)頁模板
- html：整個(gè)網(wǎng)頁
- head：網(wǎng)頁頭部，存放給瀏覽器看的代碼，例如CSS
- body：網(wǎng)頁主體，存放給用戶看的代碼，例如 圖片、文字
- title：網(wǎng)頁標(biāo)題
VS Code快速生成骨架：在HTML文件（.html）中，!（英文）配合Enter/Tab鍵
3、標(biāo)簽的關(guān)系
作用：明確代碼的書寫位置
- 父子關(guān)系（嵌套關(guān)系）
- 兄弟關(guān)系（并列）
向后縮進(jìn)：Tab
向前縮進(jìn)：Shift+Tab
4、注釋
注釋就是對(duì)代碼的解釋和說明，其目的是能夠更加輕松地了解代碼。注釋是編寫程序時(shí)，寫程序的人給一個(gè)語句、程序段、函數(shù)等的解釋或提示，能提高程序代碼的可讀性。
<!-...->注釋標(biāo)簽用來在源文檔中插入注釋，注釋不會(huì)在瀏覽器中顯示
在VS Code中，添加/刪除注釋的快捷鍵：Ctrl + /
?5、標(biāo)題標(biāo)簽
一般用在新聞標(biāo)題、文章標(biāo)題、網(wǎng)頁區(qū)域名稱、產(chǎn)品名稱等等。
標(biāo)簽名：h1~h6（雙標(biāo)簽）
顯示特點(diǎn)：
- 文字加粗
- 字號(hào)逐漸減小
- 獨(dú)占一行（換行）
經(jīng)驗(yàn)分析：
- h1標(biāo)簽在一個(gè)網(wǎng)頁中只能用一次，用來放新聞標(biāo)題或網(wǎng)頁的logo
- h2~h6沒有使用次數(shù)的限制
6、段落標(biāo)簽
一般用在新聞段落、文章段落、產(chǎn)品描述信息等等。
標(biāo)簽名：p（雙標(biāo)簽）
如上圖，有三個(gè)段落?
顯示特點(diǎn)：
- 獨(dú)占一行
- 段落之間存在間隙
7、換行與水平線標(biāo)簽
- 換行：<br> （單標(biāo)簽）
- 水平線：<hr> （單標(biāo)簽）
8、文本格式化標(biāo)簽
作用：為文本添加特殊格式，以突出重點(diǎn)。常見的文本格式：加粗、傾斜、下劃線、刪除線等。
都是雙標(biāo)簽
9、圖形標(biāo)簽
作用：在網(wǎng)頁中插入圖片
src用于指定圖像的位置和名稱，是<img>的必須屬性。建議以./開頭，VS Code有提示功能
9.1 圖像標(biāo)簽-屬性
| 屬性 | 作用 | 說明 |
| alt | 替換文本 | 圖片無法顯示的時(shí)候顯示的文字 |
| title | 提示文本 | 鼠標(biāo)懸停在圖片上面的時(shí)候顯示的文字 |
| width | 圖片的寬度 | 值為數(shù)字，沒有單位 |
| height | 圖片的高度 | 值為數(shù)字，沒有單位 |
- 屬性名=“屬性值”
- 屬性寫在尖括號(hào)里面，標(biāo)簽名后面，標(biāo)簽名和屬性之間用空格隔開，不區(qū)分先后順序
10、路徑
路徑是指查找文件時(shí)，從起點(diǎn)到終點(diǎn)經(jīng)歷的路線。
- 相對(duì)路徑：從當(dāng)前文件位置出發(fā)查找目標(biāo)文件
- 絕對(duì)路徑：從盤符出發(fā)查找目標(biāo)文件
- windows電腦從盤符出發(fā)
- Mac電腦從根目錄出發(fā)
10.1 相對(duì)路徑
10.2 絕對(duì)路徑
- Windows電腦從盤符出發(fā)
- Mac電腦從根目錄（/）出發(fā)
- Windows默認(rèn)是 \，其他系統(tǒng)是 /，建議統(tǒng)一寫為 /
- 文件的在線網(wǎng)址：https://www.itheima.com/images/logo.png
- 絕對(duì)路徑的應(yīng)用場(chǎng)景：友情鏈接
11、超鏈接?
作用：點(diǎn)擊跳轉(zhuǎn)到其他頁面
href屬性值是跳轉(zhuǎn)地址，是超鏈接的必須屬性。
不確定跳轉(zhuǎn)地址，可以使用 # 空鏈接
target="_blank"屬性作用：在新窗口打開頁面。?
12、音頻標(biāo)簽
常見屬性
| 屬性 | 作用 | 特殊說明 |
| src（必須屬性） | 音頻URL | 支持格式：MP3、Ogg、Wav |
| controls | 顯示音頻控制面板 | |
| loop | 循環(huán)播放 | |
| autoplay | 自動(dòng)播放 | 為了提升用戶體驗(yàn)，瀏覽器一般會(huì)禁用自動(dòng)播放功能 |
13、視頻標(biāo)簽
| 屬性 | 作用 | 特殊說明 |
| src（必須屬性） | 視頻URL | 支持格式：MP4、WebM、Ogg |
| controls | 顯示視頻控制面板 | |
| loop | 循環(huán)播放 | |
| muted | 靜音播放 | |
| autoplay | 自動(dòng)播放 | 為了提升用戶體驗(yàn)，瀏覽器支持在靜音狀態(tài)自動(dòng)播放 |
綜合案例一
網(wǎng)頁制作思路：從上到下，先整體再局部，逐步分析制作
分析內(nèi)容 ---> 寫代碼 ---> 保存?--->刷新瀏覽器，看效果
<!DOCTYPE html>
<html lang="en">
<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>IT之家 11 月 29 日消息，在今日晚間的 Redmi 十周年暨 K70 系列手機(jī)新品發(fā)布會(huì)上，Redmi K70 系列新機(jī)正式發(fā)布，本文主要介紹標(biāo)準(zhǔn)版機(jī)型，該機(jī)定位“新一代旗艦性能新標(biāo)桿”，售價(jià) 2499 元起<a href="./綜合案例二.html">vue</a>，<a href="https://item.jd.com/100078020142.html?cu=true&utm_source=www.ithome.com&utm_medium=jingfen&utm_campaign=t_236375426_RV_kuIDkuZY&utm_term=7fabefaf6b9746d4ba0aeb4a43e67255">查看詳情</a> </p><img src="https://img.ithome.com/newsuploadfiles/2023/11/65fc0457-6d41-4b83-b863-041587971b95.jpg?x-bce-process=image/format,f_auto" alt="這是Redmi K70系列手機(jī)圖片" title="Redmi K70" height="300"><h2>性能方面</h2><p>Redmi K70 <strong>搭載第二代驍龍 8</strong>，綜合跑分超 171 萬，輔以LPDDR5X 內(nèi)存，UFS 4.0 閃存，支持狂暴引擎 3.0、5000mm2 環(huán)形冷泵 VC 液冷散熱。<ins>我很喜歡，你喜歡不</ins></p><p>Redmi K70 擁有 Pro 版同款屏幕、影像、充電配置，具體來說，該機(jī)采用 6.67 英寸 3200×1400 華星光電 C8 OLED 柔性直屏，手動(dòng)最高亮度 700nit、全屏激發(fā) 1200nit、局部峰值亮度 4000nit，支持 120Hz 刷新率，480Hz 觸控采樣率（瞬時(shí) 2160Hz），3840Hz 高頻 PWM 調(diào)光，12bit 色深，JNCD ≈ 0.35；</p><h2>影像方面</h2><p>該機(jī)前置 16MP（豪威 OV16A1Q），后置 50MP 主攝（光影獵人 800，1/1.55"，OIS）+8MP 超廣角（豪威 OV08D10）+2MP 微距（思特威 SC202PCS）三攝；續(xù)航方面，Redmi K70 搭載 5000mAh 電池，支持120W 快充，搭載自研快充芯片澎湃 P2 + 自研電源管理芯片澎湃 G1。</p><h2>其它方面</h2><p>該機(jī)支持 NFC、紅外遙控、屏幕光學(xué)指紋、0809 X 軸線性馬達(dá)，搭載 1012+1216 立體聲雙揚(yáng)聲器，通過雙 Hi-Res 認(rèn)證，搭載小米澎湃 OS 系統(tǒng)。</p>
</body>
</html>綜合案例二
<!DOCTYPE html>
<html lang="en">
<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>IT之家 11 月 29 日消息，在今日晚間的 Redmi 十周年暨 K70 系列手機(jī)新品發(fā)布會(huì)上，Redmi K70 系列新機(jī)正式發(fā)布，本文主要介紹標(biāo)準(zhǔn)版機(jī)型，該機(jī)定位“新一代旗艦性能新標(biāo)桿”，售價(jià) 2499 元起<a href="./綜合案例二.html">vue</a>，<a href="https://item.jd.com/100078020142.html?cu=true&utm_source=www.ithome.com&utm_medium=jingfen&utm_campaign=t_236375426_RV_kuIDkuZY&utm_term=7fabefaf6b9746d4ba0aeb4a43e67255">查看詳情</a> </p><img src="https://img.ithome.com/newsuploadfiles/2023/11/65fc0457-6d41-4b83-b863-041587971b95.jpg?x-bce-process=image/format,f_auto" alt="這是Redmi K70系列手機(jī)圖片" title="Redmi K70" height="300"><h2>性能方面</h2><p>Redmi K70 <strong>搭載第二代驍龍 8</strong>，綜合跑分超 171 萬，輔以LPDDR5X 內(nèi)存，UFS 4.0 閃存，支持狂暴引擎 3.0、5000mm2 環(huán)形冷泵 VC 液冷散熱。<ins>我很喜歡，你喜歡不</ins></p><p>Redmi K70 擁有 Pro 版同款屏幕、影像、充電配置，具體來說，該機(jī)采用 6.67 英寸 3200×1400 華星光電 C8 OLED 柔性直屏，手動(dòng)最高亮度 700nit、全屏激發(fā) 1200nit、局部峰值亮度 4000nit，支持 120Hz 刷新率，480Hz 觸控采樣率（瞬時(shí) 2160Hz），3840Hz 高頻 PWM 調(diào)光，12bit 色深，JNCD ≈ 0.35；</p><h2>影像方面</h2><p>該機(jī)前置 16MP（豪威 OV16A1Q），后置 50MP 主攝（光影獵人 800，1/1.55"，OIS）+8MP 超廣角（豪威 OV08D10）+2MP 微距（思特威 SC202PCS）三攝；續(xù)航方面，Redmi K70 搭載 5000mAh 電池，支持120W 快充，搭載自研快充芯片澎湃 P2 + 自研電源管理芯片澎湃 G1。</p><h2>其它方面</h2><p>該機(jī)支持 NFC、紅外遙控、屏幕光學(xué)指紋、0809 X 軸線性馬達(dá)，搭載 1012+1216 立體聲雙揚(yáng)聲器，通過雙 Hi-Res 認(rèn)證，搭載小米澎湃 OS 系統(tǒng)。</p>
</body>
</html>