整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端入門-先從制作一個簡單的html5網頁開始

          端工作都是從創建一個網頁文件開始的,一個最小的網頁文件應該總是包含一些東西。

          聲明文檔類型

          • <!doctype html>- HTML5。

          網頁標題

          • <title></title>-標題。

          定義字符編碼

          • <meta charset="utf-8">- UTF8。

          定義視口的寬度

          • <meta name="viewport" content="width=device-width, initial-scale=1"> 針對移動設備進行優化并防止縮放或水平滾動。

          包含指向自定義 CSS 和 JavaScript 的鏈接

          • css/style.css 樣式文件 和 js/scripts.js js文件。

          使用最新的 Internet Explorer 渲染模式(可選)

          • <meta http-equiv="x-ua-compatible" content="ie=edge">-不是強制性的,但可能會有所幫助。

          index.html

          <!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 結束之前。

          是不是很簡單,這是一個網頁的基本框架,要想制作一個內容豐富,漂亮的網頁,還需要學習很多知識。

          需要重點學習的幾個點

          • meta 標簽,這個標簽類型很多,可以參考這里以下:

          https://www.w3school.com.cn/tags/tag_meta.asp

          https://www.haorooms.com/post/html_meta_ds

          • 在HTML中使用css樣式的方法有:行內式、內嵌式、外聯式,而外聯式又分:鏈接式(link)和導入式(@import)
          • script 腳本文件

          到此,你基本已經了解了如何制作一個網頁,建議能夠親手練習下,這樣加深理解。

          接下來,我會大概講下,網頁如何布局并填充內容,感謝您的關注。

          頁是一個包含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繪圖、本地存儲和表單增強等功能,為網頁開發提供了更多的選擇和可能性。


          主站蜘蛛池模板: 国产精品高清一区二区三区不卡 | 精品欧美一区二区在线观看 | 国产微拍精品一区二区| 日韩毛片基地一区二区三区| 在线免费观看一区二区三区| 久久99精品国产一区二区三区| 久久精品成人一区二区三区| 国产熟女一区二区三区四区五区| 海角国精产品一区一区三区糖心| 国产激情无码一区二区app| 国产成人综合亚洲一区| 中文字幕一区二区三区在线观看 | 亚洲av日韩综合一区在线观看| 亚洲AⅤ视频一区二区三区| 中文字幕一区在线播放| 国产女人乱人伦精品一区二区 | 内射女校花一区二区三区| 亚洲AV本道一区二区三区四区| 久久精品免费一区二区| 一区二区三区在线|日本| 糖心vlog精品一区二区三区| 亚洲一区精品无码| 一区二区国产精品| 国产拳头交一区二区| 日本在线视频一区二区| 中文字幕一区日韩在线视频 | 在线日产精品一区| 精品视频一区二区三区在线播放 | 国产日韩精品一区二区三区在线 | 国产精品一区不卡| 亚洲一区二区三区久久| 亚洲国产成人久久综合一区77| 99国产精品欧美一区二区三区| 亚洲一区二区久久| 99无码人妻一区二区三区免费| 午夜福利av无码一区二区| 亚洲av综合av一区| 精品人妻码一区二区三区| 亚洲一区二区三区高清视频| 乱子伦一区二区三区| 色狠狠AV一区二区三区|