端工作都是從創建一個網頁文件開始的,一個最小的網頁文件應該總是包含一些東西。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>標題</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="icon" href="images/favicon.png" />
</head>
<body>
<script src="js/scripts.js"></script>
</body>
</html>
其中,head 主要包含,提供有關頁面的元信息標簽 <meta>,比如 針對搜索引擎 ,關鍵詞和描述及編碼類型等,網頁標題,css樣式文件。
一般建議,script 標簽寫在body 結束之前。
是不是很簡單,這是一個網頁的基本框架,要想制作一個內容豐富,漂亮的網頁,還需要學習很多知識。
https://www.w3school.com.cn/tags/tag_meta.asp
https://www.haorooms.com/post/html_meta_ds
到此,你基本已經了解了如何制作一個網頁,建議能夠親手練習下,這樣加深理解。
接下來,我會大概講下,網頁如何布局并填充內容,感謝您的關注。
頁是一個包含HTML標簽的純文本文件
網頁制作離不開瀏覽器和制作網頁工具
瀏覽器推薦【谷歌瀏覽器】或【火狐瀏覽器】
制作網頁工具用電腦自帶的【記事本】即可
六步即可學會最基礎的網頁制作!
右擊桌面,選擇新建,選擇文本文檔
打開新建的文本文檔,輸入以下內容(建議照敲一遍)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
</body>
</html>
上面這些內容就是超文本標記語言,也稱為HTML,現在HTML已經發展到第五代——HTML5,上面這些HTML5代碼是幫助我們寫出網頁的基礎。
右擊文檔重命名,修改文件后綴,將文件擴展名修改為.html
什么瀏覽器打開就會出現什么瀏覽器圖標
如果你看不到文件的擴展名那么就打開此電腦(我的電腦),在菜單欄查看勾選文件擴展名即可。
雙擊打開它,你會發現一片空白。
但并不是什么都沒有,上圖中箭頭指的那一串字母就叫URL,也稱“統一資源定位器”。因為這個文件只是本地文件,所以它現在的作用是定位你的文件存放位置,顯示文檔地址,說明文檔放在什么地方。
忍受不了空空的感覺,那么就開始添加一些東西吧!
右擊選擇打開方式,選擇用記事本打開
點擊其他應用可以看到記事本
試試看把標題改成“這是一個標題”,按快捷鍵ctrl+s保存
刷新一下瀏覽器,于是標題就變成了“這是一個標題”
那么我們就可以知道,修改<title></title>里面的內容可以改變標題;同時<title>標簽是<head>標簽中唯一要求包含的東西。
一鼓作氣,再添加一些內容吧!
在<body></body>這一對標簽里面加上這樣一段話:
<p>Hello</p>
<p>World</p>
然后保存刷新
Hello World
恭喜你,你已經學會了最基礎的網頁制作了。
<p>這是什么意思呢?
這些被稱為標簽,上面出現尖括號的都屬于標簽,它們通常都是成對的,由開始標簽和結束標簽(結束標簽加上斜杠)構成一組標簽,例如<title></title>、<p></p>。
<p>標簽定義段落,我們寫文章一般是敲一下回車就換一行,但是網頁不一樣,你敲多少個回車都是不被識別的。
<p>有志者,事竟成,破釜沉舟,百二秦關終屬楚;
苦心人,天不負,臥薪嘗膽,三千越甲可吞吳!</p>
<p><p></p>
可以看到上面的一段話,敲多少個回車都沒有用,而下面的一段話,用兩個<p>標簽就換行了。
TML5是一種標記語言,用于創建和呈現網頁內容。與早期的HTML版本相比,HTML5具有許多新的功能和改進,可以更好地支持動態內容、多媒體、圖形和互動性。在本文中,我們將討論如何使用HTML5制作網頁,以及HTML5與舊版本HTML的區別。
首先,讓我們了解一下HTML5的一些主要功能和優勢。HTML5具有以下特點:
1. 語義化標簽:HTML5引入了一些新的語義化標簽,例如、、、等。這些標簽的使用可以增強網頁的結構并提高搜索引擎的可讀性。
2. 多媒體支持:HTML5內置了對多媒體的支持,例如和標簽,可以在網頁上直接播放視頻和音頻文件,而無需使用第三方插件。
3. Canvas繪圖:HTML5引入了元素,允許開發者通過JavaScript在網頁上繪制圖形和動畫。這對于創建復雜的圖表、可視化效果和游戲非常有用。
4. 本地存儲:HTML5提供了幾種本地存儲方法,例如localStorage和sessionStorage。這些方法可以在客戶端存儲數據,使得網頁可以更快地加載和響應用戶的操作。
5. 表單增強:HTML5為表單提供了許多新的輸入類型和屬性,例如日期、時間、顏色、URL等。這些功能減少了對JavaScript的依賴,在客戶端驗證和收集用戶輸入數據時更加方便。
現在,讓我們看看如何使用HTML5制作網頁的基本步驟。
步驟一:創建HTML文檔結構HTML5的網頁結構包括、和等標簽。在標簽中,可以設置網頁的語言屬性()和字符編碼()。在標簽中,可以添加網頁的標題()和其他元數據(標簽)。在標簽中,可以編寫網頁的內容。
步驟二:使用語義化標簽為了增強網頁的結構和可讀性,應盡量使用語義化標簽。例如,標簽用于網頁的標題和導航欄,標簽用于網頁的導航鏈接,和標簽用于劃分網頁的內容部分。
步驟三:插入多媒體使用、和
等標簽插入多媒體內容。例如,使用標簽可以插入視頻文件,并設置其屬性(例如src、width、height)來指定視頻的來源和尺寸。
步驟四:繪制圖形和動畫使用標簽和JavaScript繪制圖形和動畫。通過在標簽中指定寬度和高度,并調用JavaScript函數繪制圖形,可以在網頁上顯示自定義的圖形和動畫效果。
步驟五:使用本地存儲使用localStorage和sessionStorage等方法,在客戶端存儲數據。通過調用JavaScript的API,可以將數據存儲在瀏覽器中,并在需要時讀取和更新數據。
步驟六:優化網頁性能使用HTML5的新功能來優化網頁性能。例如,使用新的表單輸入類型和屬性可以在客戶端驗證和收集用戶輸入數據,減少對服務器的請求和響應時間。
現在,讓我們來了解一下HTML5和HTML的區別。
HTML5是HTML的第五個版本,是對以前的HTML版本進行的改進和擴展。與HTML4相比,HTML5具有許多新的功能和語義化標簽,使開發者能夠創建更現代、豐富和交互性的網頁。
以下是HTML5和HTML的一些區別:
1. 標簽語義化:HTML5引入了許多新的語義化標簽,如、、、等。這些標簽增強了網頁的結構和可讀性,有助于搜索引擎優化和可訪問性。
2. 多媒體支持:HTML5內置了對多媒體的支持,如和標簽,可以在網頁上直接播放視頻和音頻文件。而在HTML4中,需要使用第三方插件(如Flash)來實現相同的功能。
3. Canvas繪圖:HTML5引入了元素,允許在網頁上通過JavaScript繪制圖形和動畫。而在HTML4中,圖形和動畫的創建通常依賴于第三方插件或JavaScript庫。
4. 本地存儲:HTML5提供了localStorage和sessionStorage等方法,在客戶端存儲數據。這使得網頁可以更快地加載和響應用戶的操作。相比之下,HTML4需要通過服務器來存儲和獲取數據。
5. 表單增強:HTML5為表單提供了新的輸入類型和屬性,如日期、時間、顏色、URL等。這減少了對JavaScript和服務器的依賴,提高了用戶體驗。
總結起來,HTML5相對于HTML4具有更多的功能和改進,使得開發者可以創建更現代、豐富和互動性的網頁。它提供了語義化標簽、多媒體支持、Canvas繪圖、本地存儲和表單增強等功能,為網頁開發提供了更多的選擇和可能性。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。