網(wǎng)站的欄目關(guān)鍵詞常用的網(wǎng)絡(luò)推廣方法
1、標(biāo)簽語(yǔ)法
HTML超文本標(biāo)記語(yǔ)言——HyperText Markup Language
- 超文本是鏈接
- 標(biāo)記也叫標(biāo)簽,帶尖括號(hào)的文本
2、HTML基本骨架
HTML基本骨架是網(wǎng)頁(yè)模板
- html:整個(gè)網(wǎng)頁(yè)
- head:網(wǎng)頁(yè)頭部,存放給瀏覽器看的代碼,例如CSS
- body:網(wǎng)頁(yè)主體,存放給用戶看的代碼,例如 圖片、文字
- title:網(wǎng)頁(yè)標(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ì)代碼的解釋和說(shuō)明,其目的是能夠更加輕松地了解代碼。注釋是編寫程序時(shí),寫程序的人給一個(gè)語(yǔ)句、程序段、函數(shù)等的解釋或提示,能提高程序代碼的可讀性。
<!-...->注釋標(biāo)簽用來(lái)在源文檔中插入注釋,注釋不會(huì)在瀏覽器中顯示
在VS Code中,添加/刪除注釋的快捷鍵:Ctrl + /
?5、標(biāo)題標(biāo)簽
一般用在新聞標(biāo)題、文章標(biāo)題、網(wǎng)頁(yè)區(qū)域名稱、產(chǎn)品名稱等等。
標(biāo)簽名:h1~h6(雙標(biāo)簽)
顯示特點(diǎn):
- 文字加粗
- 字號(hào)逐漸減小
- 獨(dú)占一行(換行)
經(jīng)驗(yàn)分析:
- h1標(biāo)簽在一個(gè)網(wǎng)頁(yè)中只能用一次,用來(lái)放新聞標(biāo)題或網(wǎng)頁(yè)的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)頁(yè)中插入圖片
src用于指定圖像的位置和名稱,是<img>的必須屬性。建議以./開頭,VS Code有提示功能
9.1 圖像標(biāo)簽-屬性
屬性 | 作用 | 說(shuō)明 |
alt | 替換文本 | 圖片無(wú)法顯示的時(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)到其他頁(yè)面
href屬性值是跳轉(zhuǎn)地址,是超鏈接的必須屬性。
不確定跳轉(zhuǎn)地址,可以使用 # 空鏈接
target="_blank"屬性作用:在新窗口打開頁(yè)面。?
12、音頻標(biāo)簽
常見屬性
屬性 | 作用 | 特殊說(shuō)明 |
src(必須屬性) | 音頻URL | 支持格式:MP3、Ogg、Wav |
controls | 顯示音頻控制面板 | |
loop | 循環(huán)播放 | |
autoplay | 自動(dòng)播放 | 為了提升用戶體驗(yàn),瀏覽器一般會(huì)禁用自動(dòng)播放功能 |
13、視頻標(biāo)簽
屬性 | 作用 | 特殊說(shuō)明 |
src(必須屬性) | 視頻URL | 支持格式:MP4、WebM、Ogg |
controls | 顯示視頻控制面板 | |
loop | 循環(huán)播放 | |
muted | 靜音播放 | |
autoplay | 自動(dòng)播放 | 為了提升用戶體驗(yàn),瀏覽器支持在靜音狀態(tài)自動(dòng)播放 |
綜合案例一
網(wǎng)頁(yè)制作思路:從上到下,先整體再局部,逐步分析制作
分析內(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 萬(wàn),輔以LPDDR5X 內(nèi)存,UFS 4.0 閃存,支持狂暴引擎 3.0、5000mm2 環(huán)形冷泵 VC 液冷散熱。<ins>我很喜歡,你喜歡不</ins></p><p>Redmi K70 擁有 Pro 版同款屏幕、影像、充電配置,具體來(lái)說(shuō),該機(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)聲器,通過(guò)雙 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 萬(wàn),輔以LPDDR5X 內(nèi)存,UFS 4.0 閃存,支持狂暴引擎 3.0、5000mm2 環(huán)形冷泵 VC 液冷散熱。<ins>我很喜歡,你喜歡不</ins></p><p>Redmi K70 擁有 Pro 版同款屏幕、影像、充電配置,具體來(lái)說(shuō),該機(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)聲器,通過(guò)雙 Hi-Res 認(rèn)證,搭載小米澎湃 OS 系統(tǒng)。</p>
</body>
</html>