HTML基本語法

這是我的第一篇博客，都說大佬也是從菜鳥一步一步起來的嘛，所以我這第一篇博客的技術也不一定很高。但是，這應該是一篇絕大多數零基礎入門的同學都能夠看得懂的博客。跟著本篇博客的內容慢慢來，把實驗都一個個的過一遍，相信你也能受益匪淺。

閑話敘完了，開始介紹我們今天的主角：html語言。

什么是 HTML？

HTML 是用來描述網頁的一種語言。

HTML 指的是超文本標記語言 (Hyper?Text?Markup?Language)

HTML 不是一種編程語言，而是一種標記語言?(markup language)

標記語言是一套標記標簽?(markup tag)

HTML 使用標記標簽來描述網頁

就是說，我們常見的百度啊，谷歌啊，搜狗瀏覽器等等啊，他們背后的語言都是基于html的語言。

還不懂？接下來就讓我們進入本片博客的第一個例子。

我們需要：

1.一臺網絡良好的個人電腦

2.任何一種常見瀏覽器(比如百度、谷歌等)

就這么簡單！

然后，我們打開瀏覽器主界面，筆者的界面如下所示：

然后就是最關鍵的一步。讓我們在任意一個合適的地方(就是鼠標停留是箭頭的地方)點擊鼠標右鍵 ，在彈出的選擇框中選擇“查看源代碼”一項：

關鍵一步？哈哈哈，就是用鼠標點一下指定的選項而已。菜鳥的操作就是這么簡單。然鵝，接下來彈出的東西就不簡單了。。。

點擊進去了之后，一般都會彈出構成網頁的源代碼。以下是筆者所看到的源代碼：

很復雜對不對？沒關系，羅馬不是一天建成的，大神也不是一天就能練就的。筆者現在也是個零基礎的學生。如果老鐵們足夠信得過筆者，筆者很榮幸和大家一起學習交流和進步。

接下來讓我們注意看，我們先不要看中間的代碼部分，因為現在我們也看不懂qwq，先去粗看一下他的主體結構。

就拿我所看到的這段代碼為例吧，不同瀏覽器可能略有不同，但大體上是差不多的。

首先，大家先看到我上面所標注出來的三個箭頭。我來對他們分別給出解釋：

1.：這相當于是一個網頁的聲明。原先的是一串很長的字符串,現在是這個簡潔形式,支持html5標準的主流瀏覽器都認識這個聲明。在這里我可以舉個例子幫助大家理解。比如在春秋戰國時期兩個國家打仗，齊國的軍隊和魏國的軍隊短兵相接，兩個國家的士兵就會混在一起。那么齊國的士兵怎么知道自己殺的是魏國士兵而不是自己人呢？原因就在他們的盔甲上面。為了便于分辨是敵還是友，兩個國家盔甲的顏色是不一樣的，身披黃色盔甲的齊國士兵看到身披紅色盔甲的魏國士兵，就知道啊 這就是我要殺的敵人，所以在理論上就不會出錯。所以這個網頁的前綴也相當于起一個標記的作用，讓編譯器知道我是html，就按照html的語法規則來進行編譯就好了。相關的內容可以在w3school官方網站上查看：

2.這是有關html語言中html lang和dir的內容。相關的內容可以在w3school官方網站上查看：

3. 元素可提供有關頁面的元信息(meta-information)，比如針對搜索引擎和更新頻度的描述和關鍵詞。 標簽位于文檔的頭部，不包含任何內容。 標簽的屬性定義了與文檔相關聯的名稱/值對。然后name 屬性提供了名稱/值對中的名稱。HTML 和 XHTML 標簽都沒有指定任何預先定義的 名稱。通常情況下，您可以自由使用對自己和源文檔的讀者來說富有意義的名稱。相關的內容可以在w3school官方網站上查看：

如果上面的代碼對于讀者來說還是難于理解，也沒關系。下面我們可以自己動手編一段代碼來加深自己對于html這門語言的認知。

實驗

在這個實驗中，我們需要：

文本編輯器(種類寬泛，可以是記事本、Notepad (PC) 或 TextEdit (Mac)等等。)

接下來就動手吧。首先，打開自己的編輯工具(筆者是記事本)并且編輯如下代碼：

如何啟動記事本：

開始

所有程序

附件

記事本

或者：

搜索

記事本

打開

點擊保存，記住存儲的路徑哦，不然后期會找不到。在這里我教大家，保存界面的下方會有編碼方式供大家選擇，如果待會兒編譯出了問題，可以換一種編碼方式再進行嘗試，如圖：

保存之后還不能直接運行，因為后綴名不對。網頁文件的后綴名應該是htm或者html，而文本文件保存的默認格式是txt。所以我們通過重命名來改變文件的后綴名。右鍵點擊選中的文件，選擇重命名，或者直接選中文件后f2來進行重命名：

手動更改后綴名html：

enter后彈出的對話框點確定即可。

然后直接雙擊文件，這就是我們自己手編的一個簡陋的網頁：

哈哈哈！是不是很有成就感，雖然這只是一個很簡單，簡單到無以復加的網頁，離自己心中的網頁，自己所見到的眼花繚亂，有特效有動圖的網站還差得遠。但路是一步一步走完的，而我們現在就走完了第一步，實現了零的突破，初步了解了網頁的構成。

今天的內容就到這里，如果想更加深入的學習，歡迎關注happyleo后續的課程！拜拜！

總結

以上是生活随笔為你收集整理的html新人入门代码,HTML入门(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。