前端零基礎入門（四）：第一個HTML頁面
前面說到了html,css,js三者之間的關係
接下來我們就來看看html到底長什麼樣子。
隨便開啟一個編輯器，然後在檔案那裡點選新建html檔案，看到的程式碼大多如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>那麼在這一堆的程式碼裡面，我們就能夠很明顯的感受到html這個語言的一個特點：標記。頁面上哪哪都是標記，從這串程式碼的第一行到最後一行，全部都是標記。
第一行
<!doctype html> 這個是文件宣告，我們可以把裡面的單詞全都拆開 第一個，感嘆號，這沒什麼可說的，後面，DOCTYPE 這個單詞可以拆分成為DOC 和TYPE這兩個部分。DOC就是document的縮寫，文件的意思。這也和html最初的一個作用是相關的
後面，這個TYPE，其實就是type 型別的意思，整個連起來那就是文件型別，後面跟上了一個html 所以這整個標籤就指定了這個文件的型別是html
再往下，在程式碼的第二行有一個html標籤：<html lang="en">
裡面的這個lang叫做屬性，這個屬性可寫可不寫，這裡就指定了語言，en代表的就是英文的意思。那麼這裡就可以寫成這樣：<html>
在程式碼的最下面還有一個html標籤：</html>，但是這個標籤和前面的有一點點不一樣，前面多了一個斜槓，其實它們是一個整體：<html></html>，這個整體在html語言裡面叫做標籤對，一個代表開頭，一個代表結尾。既然有標籤對，那麼就有單身狗——單標籤，我們後面會說。
寫在標籤裡面的用一個空格和標籤名隔開的程式碼都叫做屬性。比如在html標籤裡面就有一個lang屬性，然後在第四行meta標籤裡面也有一個charset屬性，至於這個屬性有什麼用，我們一會再說
再看第三行，這裡有一個head標籤：<head>
</head>。那麼也就代表了head也是一個標籤對。在html語言裡，我們一般使用的絕大多數的標籤都是標籤對，所以大家在寫標籤的時候一定不要忘了加上結尾！
這時候可以看到在head標籤開頭和結尾中間夾雜著兩個標籤，分別是第四行的：<meta charset="UTF-8">和第五行的：<title>Document</title>。
這樣的一個包含關係我們稱之為巢狀關係，或者形象一點可以叫做父子級關係。然後meta標籤和title標籤兩個標籤是並列的，所以這時候它們兩個之間形成的一種關係叫做並列關係，也可以形象一點叫做兄弟級關係。描述這個關係可以用一個樹狀圖來表示：
在這個圖片裡面就能很清楚的看到每兩個標籤之間的一個關係鏈了。
這時候再來看看meta標籤：<meta charset="UTF-8"> 在這裡，可以看到頁面裡只有一個meta標籤，這也就代表了meta就是一個單標籤，它裡面有一個屬性:charset，字符集的意思，那麼字元，也就是我們的文字，然後字符集，也就相當於一個語言包，比如把裡面的UTF-8替換成gbk代表的就是中文字符集。在這裡使用的這個UTF-8代表的是世界通用字符集，裡面包含了全世界基本上所有的語言文字，那麼這時候我在頁面裡面隨便輸入什麼文字，瀏覽器都能精確的渲染出來，而不會出現把中文渲染成亂碼的情況。下圖估計很多同學都不陌生：
那麼utf-8的作用就體現於此了，當然，meta標籤裡面還可以放很多其他的屬性，不過這不在我們今天的討論範圍
再往下是一個title標籤，這個標籤裡面所包含的內容會顯示在瀏覽器的標籤頁裡，比如我在title裡面輸入“這是我輸入的標題”，它就會出現在瀏覽器的下圖位置
再接著往下看就只剩下一個body標籤了，裡面雖然沒有任何的內容，但是我們要呈現在頁面上的所有的內容都必須寫在body裡面，比如世界著名的“Hello world!”
把這句話寫在body裡面之後，我們就能在瀏覽器裡看到它了
那麼，到此為止，我們的第一個html頁面就已經完成了。是不是很簡單？
相關推薦
前端零基礎入門（四）：第一個HTML頁面
前面說到了html,css,js三者之間的關係 接下來我們就來看看html到底長什麼樣子。 隨便開啟一個編輯器，然後在檔案那裡點選新建html檔案，看到的程式碼大多如下： <!DOCTYPE html> <html lang="en"
前端零基礎入門（三）：HTML，CSS，Javascript三者之間的關係
每個人接觸前端的角度可能都不一樣 有些人是以前從事web相關行業的，比如後端，比如設計。從事這些行業的人因為工作需要，多多少少都會對前端有一定的瞭解，不一定是這個詞，但一定是這個職位 小白的話，可能更多的聽到的是h5，css3之類的名詞，其實無論從哪個角度接
Apache Flink 零基礎入門（一）：基礎概念解析
Apache Flink 的定義、架構及原理 Apache Flink 是一個
OpenGL入門（二）：第一個OpenGL程式
在上一篇中的環境配置沒有問題，估計程式出現了問題。 OpenGL實用庫函式：43個，以glu作為字首； OpenGL輔助庫函式：31個，以aux作為字首； Windows專用庫函式（WGL）：6個，以wgl作為字首； win32API函式（WGL）：5個
java程式設計師菜鳥進階（十六）linux基礎入門（四）linux下VIM文字編輯器使用
linux下編寫配置檔案最好的編輯工具莫過於vim了。Vim的功能實在太多太全，Vim的很多功能也許我們很少用得到，真正為大家常用的功能可能只佔到所有功能的冰山一角。Vim終歸只是一個編寫程式碼或編輯文件的工具，所以只要掌握一些足夠我們使用的功能即可。 做個廣告
Python中Flask基礎入門（四）
資料庫基本操作 在Flask-SQLAlchemy中，插入、修改、刪除操作，均由資料庫會話管理。會話用db.session表示。在準備把資料寫入資料庫前，要先將資料新增到會話中然後呼叫commit()方法提交會話。 資料庫會話是為了保證資料的一致性，避免因部分更新導致資料不一致。提交操作把會
linux基礎篇（四）：基於Redhat7系統的sshd服務
SSHD 服務簡介 ssh 協議:安全外殼協議。為 Secureshell 的縮寫。SSH 為建立在應用層和傳輸層基礎上的安全協議。 sshd 服務使用 SSH 協議可以用來進行遠端控制, 或在計算機之間傳送檔案。而實現此功能的傳統方式,如 telnet(終端模擬協議)都是極為不安全的,
人工智慧入門（四）：uncertainty&基於統計的學習
1.belief networks (indenpendence, collider，conditioning / marginalization，connection graph，independence in belief networks，D-separation，uncertain and unrel
JPA基礎知識（四）：對映關聯關係
JPA對映關聯關係 對映單項多對一的關聯關係（常用） 對映單項一對多的關聯關係 對映雙向多對一的關聯關係 對映雙向一對一的關聯關係 對映雙向多對多的關聯關係 一、單項多對一的關聯關係 客戶實體： Customer【一】 中沒有 Or
ADO.NET 快速入門（四）：從資料庫填充 DataSet
ADO.NET 快速入門（四）：從資料庫填充 DataSet 從資料庫獲取資料很容易，處理資料更容易。如果想要從資料庫獲取只進、只讀的資料流結果集，你可以使用 DataReader 執行命令並且檢索它。關於如何使用 DataReader，請參考：使用 OLE
Linux基礎命令（四）：高階鍵盤操作與許可權控制——history、自動補全、命令列快捷鍵、歷史命令展開、id、chmod、umask、su、sudo、chown、chgrp、passwd
高階鍵盤操作 Linux終端支援各種快捷鍵操作。掌握這些快捷鍵以及命令列互動式編輯特性，基本可以告別滑鼠操作了。 clear － 清空螢幕 history － 顯示歷史列表內容 小技巧：Linux的圖形使用者介面中，非最大化的視窗是預設隱藏頂部選項卡的，可以通過保持按
Unity Editor 基礎篇（四）：Handles
本文為本人學習上鍊接的筆記微有改動，請點選以上鍊接檢視原文，尊重樓主智慧財產權。 Unity Editor:Handles 最終效果： 準備： Scripts資料夾中建立C#指令碼”MyHandles”,在Editor資料夾中建立C#指令碼”HandleIns
SpringCloud零基礎上手（四）——服務發現以及Feign（宣告式RESTful服務呼叫）
接著上篇的內容，我們再建立一個專案充當服務消費者，命名為pf-font，如果pf-login視為後端，那麼pf-font 就是前端，達到前後端分離的目的。 一、pf-front目錄結構 pf-front同樣是一個多模組專案，儘管它目前只有一個模組——pf
Java入門（四）：運算子優先順序、關鍵字與保留字
上次介紹了Java的運算子，今天來介紹下運算子的優先順序，以及Java的關鍵字、保留字。 一、運算子優先順序 序號 運算子 名稱 目數 結合性 說明 1 [ ]
Spring Boot快速入門（四）：使用jpa進行資料庫操作
新增依賴 新建專案選擇web,JPA,MySQL三個依賴 對於已存在的專案可以在bulid.gradle加入，spring boot將會幫你自動配置好 compile('org.springframework.boot:spring-boot-starter
Spark入門（四）：RDD基本操作
1.RDD轉換 RDD的所有轉換操作都不會進行真正的計算 1.1單個RDD轉換操作 # 建立測試RDD val rdd = sc.parallelize(Array("hello world","java","scala easy")) # 1.
微信小程式基礎入門（一）：小程式介面介紹&創造自己的第一個小程式
承接小程式配置之後 ，先對小程式開發軟體的介面進行介紹： 然後進入第一個小程式的構造：獲取使用者登陸資訊 通過左上角的 “+”新增頁面 然後建立第一個功能頁面 然後頁面構造完成：各部分程式碼： app.
gulp前端自動化構建工具（四）：gulp檔案路徑處理模組
本篇前言 上一篇介紹了本工具的獨立配置檔案，歡迎閱讀 本篇還是先把gulpfile.js執行所用的一個方法模組展示出來，模組主要接收gulp.src()中檔案物件，對檔案自身所在的物理路徑及其內部資源引用的路徑進行處理，程式碼中我有做詳細的註釋，包括方法的單獨作用演示。 本
eXosip入門（四）：eXosip示例程式——註冊/認證 .
首先建議先看一下我翻譯的文章《eXoisp使用者手冊：1.3 如何傳送或者升級註冊》，先對eXosip的註冊/認證過程有一個大致的瞭解。 其次，在exosip\tools目錄下有官方提供的一個示例程式sip_reg.c，使用者可以仔細閱讀該原始碼，熟悉exo
JavaFX入門（四）：JavaFX佈局（一）
說道GUI程式設計一定要談到佈局，JavaFX內建了大量的佈局控制元件提供給我們使用。其實，JavaFX的佈局控制元件和介面元素控制元件都是繼承自javafx.scene.layout.Region類。我們這裡只看佈局控制元件類。佈局控制元件我們在介面上一般是看