當前位置：首頁 > news >正文

聊天網(wǎng)站制作教程武漢seo廣告推廣

news 2025/7/4 3:26:31

聊天網(wǎng)站制作教程,武漢seo廣告推廣,從用戶旅程角度做網(wǎng)站分析,代理公司注冊網(wǎng)站文章目錄 1.什么是html？2.html文件基本結構3.htm常見標簽3.1 注釋標簽3.2 標題標簽3.3 段落標簽3.4 換行標簽3.5 格式化標簽3.6 圖片標簽3.7 超鏈接標簽希望讀者們多多三連支持小編會繼續(xù)更新你們的鼓勵就是我前進的動力！ 從本篇開始學習前端基礎之 htm…

文章目錄

1.什么是html？
2.html文件基本結構
3.htm常見標簽
- 3.1 注釋標簽
- 3.2 標題標簽
- 3.3 段落標簽
- 3.4 換行標簽
- 3.5 格式化標簽
- 3.6 圖片標簽
- 3.7 超鏈接標簽
希望讀者們多多三連支持
小編會繼續(xù)更新
你們的鼓勵就是我前進的動力！

從本篇開始學習前端基礎之 html 的搭建路程，實現(xiàn)一個基本的靜態(tài)網(wǎng)站框架，一般使用的軟件是 VSCODE，可以自行上網(wǎng)查詢下載配置教程

1.什么是html？

html 即超文本標記語言（HyperText Markup Language）
它是用于創(chuàng)建網(wǎng)頁的標準標記語言，html 借助各類標簽來對網(wǎng)頁的結構和內容加以描述

html 代碼是由標簽構成的

💻比如：

<body>hello</body>

標簽名 (body) 放到 < > 中
大部分標簽成對出現(xiàn)，<body> 為開始標簽，</body> 為結束標簽
少數(shù)標簽只有開始標簽，稱為 “單標簽”
開始標簽和結束標簽之間，寫的是標簽的內容(hello)
開始標簽中可能會帶有 “屬性”，id 屬性相當于給這個標簽設置了一個唯一的標識符(身份證號碼)

2.html文件基本結構

<html><head><title>第一個頁面</title></head><body>hello world</body>
</html>

html 標簽是整個 html 文件的根標簽(最頂層標簽)，所有代碼都是寫在這里面的
head 標簽中寫頁面的屬性
body 標簽中寫的是頁面上顯示的內容
title 標簽中寫的是頁面的標題

head 和 body 是 html 的子標簽(html 就是 head 和 body 的父標簽)，title 是 head 的子標簽，head 是 title 的父標簽，head 和 body 之間是兄弟關系

標簽之間的結構關系, 構成了一個 DOM 樹：
在這里插入圖片描述

🔥值得注意的是：

<!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></body>
</html>

按住 SHIFT + !，按 ENTER 鍵，此時能自動生成代碼的主體框架

<!DOCTYPE html> 稱為 DTD (文檔類型定義)，描述當前的文件是一個 HTML5 的文件
<html lang="en"> 其中 lang 屬性表示當前頁面是一個 “英語頁面”，這里暫時不用管(有些瀏覽器會根據(jù)此處的聲明提示是否進行自動翻譯)
<meta charset="UTF-8"> 描述頁面的字符編碼方式，沒有這一行可能會導致中文亂碼
<meta name="viewport" content="width=device-width, initial-scale=1.0">。name="viewport" 其中 viewport 指的是設備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域。content="width=device-width, initial-scale=1.0" 在設置可視區(qū)和設備寬度等寬，并設置初始縮放為不縮放(這個屬性對于移動端開發(fā)更重要一些)
記得每次修改代碼需要 CTRL + S 保存代碼才會在網(wǎng)頁上生效

??展示效果：

在這里插入圖片描述

可以在瀏覽器界面按 F12 打開開發(fā)者工具查看頁面結構，每個標簽相當于一個對象，程序員可以通過這些代碼對網(wǎng)頁進行增刪查改

3.htm常見標簽

3.1 注釋標簽

<!-- 我是注釋 -->

可以通過 CTRL + / 快捷鍵快速進行注釋/取消注釋

🔥值得注意的是： 可以 F12 查看注釋

3.2 標題標簽

??舉個例子：

<!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><h2>這是二級標簽</h2><h3>這是三級標簽</h3><h4>這是四級標簽</h4><h5>這是五級標簽</h5><h6>這是六級標簽</h6>
</body>
</html>

從 h1-h6，數(shù)字越大，則字體越小

??展示效果：

在這里插入圖片描述

3.3 段落標簽

??舉個例子：

<!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><p>最終還是敗給資本了</p><p>我?guī)缀趺總€星期四都在轉發(fā)，但是就是沒人V我50，不知道是不是有人在背后做局陰我</p><p>可能是我動了誰的漢堡 香辣雞腿堡 勁脆雞腿堡 新奧爾良烤雞腿堡 老北京雞肉卷 墨西哥雞肉卷 深海鱈魚堡 田園脆雞堡 川辣嫩牛五方 薯條（小/中/大） 土豆泥 香甜粟米棒 四季鮮蔬 玉米色拉 胡蘿卜餐包 深海鱈魚條 上校雞塊 雞米花 奧爾良烤翅 吮指原味雞 香辣雞翅 葡式蛋撻 草莓蛋撻 脆皮甜筒 草莓圣代 巧克力圣代 咖啡 果汁 冰爽茶 純牛奶 紅茶 蜂蜜茶 奶茶 百事可樂 七喜 美年達</p><p>資本你贏了！</p>
</body>
</html>

用 p 標簽表示一個段落，因為代碼里的換行在網(wǎng)頁里只會顯示為一個空格

p 標簽之間存在一個空隙
當前的 p 標簽描述的段落，前面還沒有縮進(未來 css 會學)
自動根據(jù)瀏覽器寬度來決定排版
html 內容首尾處的換行，空格均無效
在 html 中文字之間輸入的多個空格只相當于一個空格

??展示效果：

在這里插入圖片描述

3.4 換行標簽

??舉個例子：

<!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><p>最終還是敗給資本了</p><p>我?guī)缀趺總€星期四都在轉發(fā),但是就是沒人V我50,<br/>不知道是不是有人在背后做局陰我</p><p>可能是我動了誰的漢堡 香辣雞腿堡 勁脆雞腿堡 新奧爾良烤雞腿堡 老北京雞肉卷 墨西哥雞肉卷 深海鱈魚堡 田園脆雞堡 川辣嫩牛五方 薯條（小/中/大） 土豆泥 香甜粟米棒 四季鮮蔬 玉米色拉 胡蘿卜餐包 深海鱈魚條 上校雞塊 雞米花 奧爾良烤翅 吮指原味雞 香辣雞翅 葡式蛋撻 草莓蛋撻 脆皮甜筒 草莓圣代 巧克力圣代 咖啡 果汁 冰爽茶 純牛奶 紅茶 蜂蜜茶 奶茶 百事可樂 七喜 美年達</p><p>資本你贏了！</p>
</body>
</html>

br 是 break 的縮寫，表示換行

br 是一個單標簽(不需要結束標簽)
br 標簽比 p 標簽的間隔空隙小
<br/> 是規(guī)范寫法，不建議寫成 <br>

??展示效果：

在這里插入圖片描述

3.5 格式化標簽

??舉個例子：

<!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><strong>strong 加粗</strong><b>b 加粗</b><br><em>em 傾斜</em><i>i 傾斜</i><br><del>del 刪除線</del><s>s 刪除線</s><br><ins>ins 下劃線</ins><u>u 下劃線</u>
</body>
</html>

使用 css 也可以完成類似的效果，但是 html 里也有相關的實現(xiàn)，實際開發(fā)中以 css 方式為主

加粗： strong 標簽和 b 標簽
傾斜： em 標簽和 i 標簽
刪除線： del 標簽和 s 標簽
下劃線： ins 標簽和 u 標簽

🔥值得注意的是： strong 和 b 的區(qū)別在于強調的程度不同，比如在爬取網(wǎng)站的重要內容時，會優(yōu)先爬取 strong 的文本，其他標簽也是同理

3.6 圖片標簽

<img src=" ">

img 標簽必須帶有 src 屬性，表示圖片的路徑

這里圖片路徑分為兩種

絕對路徑：
磁盤路徑 C:\Users\ZHANGZHANHUA\Desktop\微信圖片_20250603234406.png
網(wǎng)絡路徑 https://blog.csdn.net/Zero_VPN?spm=1011.2415.3001.5343
相對路徑：
同級路徑直接寫文件名即可 (或者 ./)
下一級路徑 image/1.jpg
上一級路徑 ../image/1.jpg

圖片標簽的其他屬性：

alt：替換文本，當文本不能正確顯示的時候，會顯示一個替換的文字
title：提示文本，鼠標放到圖片上，就會有提示
width/height：控制寬度高度. 高度和寬度一般改一個就行，另外一個會等比例縮放，否則就會圖片失衡
border：邊框，參數(shù)是寬度的像素，但是一般使用 css 來設定

??舉個例子：

<!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><img src="C:\Users\ZHANGZHANHUA\Desktop\壁紙\微信圖片_20250603234406.png" alt="不能顯示" title="這是磁盤圖片鏈接" width="1200px" height="800px" border="4px">
</body>
</html>

??展示效果：

在這里插入圖片描述

3.7 超鏈接標簽

??舉個例子：

<!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><a href="https://blog.csdn.net/Zero_VPN?spm=1011.2415.3001.5343" target="_blank">我的博客</a><a href="#">空鏈接</a><a href="https://blog.csdn.net/Zero_VPN?spm=1011.2415.3001.5343"><img src="C:\Users\ZHANGZHANHUA\Desktop\壁紙\微信圖片_20250603234406.png" alt="不能顯示" title="這是磁盤圖片鏈接" width="120px" height="80px"></a><a href="test.zip">下載文件</a>
</body>
</html>