什麼是HTML？
HTML是網頁本身。您現在正在查看的文章也是用HTML編寫的。如果您選擇一個項目，如「查看原始碼」從通過右鍵單擊瀏覽器窗口出來的菜單，你可以看到如下圖所示的圖正在瀏覽的網頁的HTML原始碼。每個網頁都包含這樣的HTML原始碼。
（左）此瀏覽器中的實際外觀/（右）此網頁的HTML原始碼
我該如何編寫這樣的HTML原始碼？在這篇文章中，對於那些誰被認為在未來的HTML寫的，叫什麼標籤，什么元素，如東西...... CSS（樣式表）之間的關係，可以對HTML消除問題我會解釋一下。
什麼是HTML標記
使用HTML標記添加含義
您可能已經看過「HTML標籤」這個表達式。HTML是一種數據格式（語言），它使用稱為「標記」的描述方法為字母和句子添加含義和角色。如果您知道如何編寫此「標記」，則可以輕鬆編輯HTML。例如，在以下HTML原始碼中，它表示「all about」一詞是標題。
<title>All About </ title>
此外，在以下HTML原始碼中，它意味著強調「重要」一詞。
這尤其是<strong>重要</ strong>。
如<title>和<strong>中所述，「<」和「>」符號之間的描述稱為「tag」。在這種情況下，由於它們包含英文單詞「title」和「strong」，因此它們也分別稱為「標題標籤」和「強標籤」。在類似的表達中，有一個短語「title element」或「strong element」，但含義略有不同。標籤和元素之間的區別將在下一頁介紹。■ 備註：HTML代表「超文本標記語言」
HTML的縮寫
首先，HTML代表「超文本標記語言」。超文本（Hypertext）是可以從一個文檔連結到另一個文檔的數據。標記（Markup）用於標記文檔。換句話說，HTML是「用於連接多個文檔的標記語言」。「標記」也稱為「標記」。該標準已逐步擴展，現在已成為可以製作各種表達的規範。
■ 註：它是由PHP或CGI生成，最終成為HTML形式或網頁，或在PHP已經作出，並利用程式語言如Perl和C語言中的CGI由我也這樣做。然而，這兩種也可在端部是HTML箱子的形式輸出時，瀏覽器將不被顯示在屏幕上讀出的HTML原始碼。
如何編寫HTML原始碼（如何編輯）
有很多軟體可以創建HTML
HTML可以自己描述源，也可以使用創建軟體生成。由於HTML文件是文本格式，可以說可以使用可以編輯文本數據的軟體創建任何內容。但是，如果沒有任何先驗知識或技能，很難從1開始編寫。由於有許多方便的軟體支持HTML的描述，因此首先使用它們進行編寫是很容易和可取的。它也在以下文章中介紹。■ 顯示結果和軟體是方便，而比較寫的HTML源通過創建軟體對於初學者來說，不必編輯任何HTML原始碼您還可以創建網頁。但是，為了自由地創建網頁，能夠在某種程度上直接編寫HTML源是有利的。最初，使用可以在將HTML源與實際顯示進行比較時編輯的軟體，將會特別容易理解。下圖顯示了一個名為Microsoft Expression Web 4的創建軟體的示例，該軟體是免費分發的。
您可以編寫HTML原始碼，可以編輯顯示結果側，相互反映編輯結果的軟體示例
■ 如果是文本編輯器，讓我們使用可以著色HTML標籤並處理UTF-8的軟體
如果HTML源是彩色編碼的文本編輯器，則易於編輯
HTML原始碼也可以使用文本編輯器編寫。如果您稍微修改現有HTML原始碼，則文本編輯器非常方便。具有著色HTML標記功能的編輯器更易於閱讀，更容易防止編輯錯誤。日語中有多種字符代碼選擇。有許多由SHIFT-JIS代碼編寫的網站已經使用了很長時間，但如果你打算這樣做，最好用UTF-8代碼編寫。UTF-8是推薦用於HTML 5的字符代碼（稍後描述），並且諸如象形圖之類的特殊符號可以原樣包含在HTML源中。
HTML和CSS之間的關係是什麼（樣式表）
您可以使用HTML創建網頁，但是您需要一起使用CSS（樣式表）來創建布局並裝飾它們。如下圖所示，HTML主要描述句子結構，並通過CSS向CSS添加色彩和布局等裝飾信息。
用CSS（樣式表）=網頁描述HTML +裝飾中的文本結構
■ 所有的裝修是寫在CSS（樣式表）在舊的HTML標準，您可以指定在HTML本身的文字顏色和背景顏色，卻能或創建布局，比如左，右拉和居中。但是現在用CSS而不是HTML編寫這樣的裝飾是標準的。如果您想要將「文檔結構完全分離為HTML·裝飾為CSS」，則更容易管理，這樣可以更輕鬆地將設計與多個頁面統一起來。有關詳細信息，請參閱CSS評論。
什麼是HTML5？什麼是XHTML？
您經常會看到帶有數字後跟HTML的「HTML 5」表達式。此外，您可能已經看到了名稱「XHTML」。我將簡要介紹它們。■ HTML有版本
HTML版本的過渡（W3C推薦的年份）
HTML規範（語法）中有一個版本，它在「HTML」之後用數字值表示，如HTML 5.1，HTML 5，HTML 4.1等。HTML規範分階段發布，從第一個「草案」到最終決定「推薦」有幾個步驟。此表是推薦每個HTML版本的年份（=規範最終確定的年份）。撰寫本文時推薦的最新版本是HTML 5.1。如果你現在說「HTML 5」，你可以認為它是5.0和5.1的組合。當HTML達到5.0時，規範發生了顯著變化。使用創建軟體時，最好注意是否可以使用HTML 5生成。■ 什麼是XHTML？
雖然XHTML的配方在HTML 4.01之後有所提升，但它在2009年停止使用，最終HTML 5成為標準
從HTML4.01在1999年建議，也一直空缺15年HTML5.0在2014年建議。實際上，在這段時間裡，有一個名為XHTML的標準。即使是現在，也有許多用XHTML編寫的網頁。XHTML是基於標準稱為XML語言，在一段時間內還當我被告知「網絡的未來是寫在代替HTML XHTML」。但是，後來的XHTML配方被中止，HTML 5被標準化了。如果你現在做網頁，你可能想在HTML5編寫，而不必擔心的是，XHTML的。
好了，現在你有HTML的概述，接下來的頁面和HTML，差的「元素」，如寫的屬性和特殊符號的「標籤」的基本結構將解釋。
HTML的基本結構是什麼
首先，我們簡要介紹一下HTML原始碼的基本結構。沒有必要認真思考。正如上頁解釋了一下，只是去周圍的字符通過使用標籤。在任何情況下，整個HTML源被封閉在。在這裡面，有大約兩個區域分為和。
HTML源大致具有頭部區域和身體區域
■ 描述頁面的信息的網絡到接近HTML源的中，頂部寫諸如文件被讀取的頁的標題和分開，所述網頁的顯示寫相關的信息。■ 描述文本在下面的中，描述網頁的主體。在瀏覽器的繪圖區域內繪製的內容主要是本主題中描述的內容。
HTML「tag」和「element」之間的區別
在HTML的解釋中，使用兩種術語「標籤」和「元素」。人們普遍認為兩者具有相同的含義，但其含義完全不同，如下所示。
HTML標記和元素之間的區別（元素由開始標記內容結束標記組成）
■ 什麼是標籤？標籤是夾在「<」和「>」之間的一條信息。有代表開頭的開始標記，例如和，以及代表結尾的結束標記，例如和。■ 什麼是元素？元素是以「開始標記」開頭並以「結束標記」結尾的整體。它還包括開始和結束標記之間的內容。但是，根據元素的類型，還有沒有結束標記的「空元素」（稍後描述）。例如，「使用強元素強調」和「強調，用標籤和標籤括起來」的解釋具有相同的含義。■什麼是沒有結束標記的「空元素」
有些元素沒有結束標記
某些元素只有一個開始標記而沒有結束標記。這些元素被稱為「空元素」。最常用的空元素可能是一個br元素，這意味著換行。由於這只是表示換行位置的元素，因此沒有結束標記，因為沒有內容（=開始標記和結束標記之間的內容字符串）。這樣一個空元素將在HTML中以HTML格式編寫開始標記，但在XHTML中，它使用特殊方式以「/>」結尾，如。任何一種寫作方式都可以在HTML 5的規範中使用，但額外的描述是浪費容量，所以只需將其寫為「」。
HTML的各種元素以及如何編寫它
現在我們知道標籤和元素之間的區別，我將簡要解釋這些元素。■ 元素逐個具有角色（含義）
每個元素都有意義（作用）
HTML元素各有角色和含義。例如，p元素表示段落，a元素表示連結，strong元素表示強調。此外，雖然沒有像div元素和span元素這樣的特殊含義，但是有一些元素用於「分組特定範圍」。
■ Element採用嵌套（嵌套）結構
描述元素中的元素
HTML的元素可以用嵌套結構（元素包含在元素中的結構）來描述。例如，在圖中，p元素內部有一個span元素，它有一個三元結構，span元素內部還有一個元素。這樣，在HTML中，我們根據需要將元素描述為嵌套多次。在以下來源中，表示「標題」的h1元素包括表示「強調」的強元素。
主頁創建簡介
請注意不要寫如下。
主頁使用入門
在上面，標記寫在標記之前，它沒有正確的嵌套結構。這種嵌套結構經常在HTML源中使用。要使源儘可能易於閱讀，您需要使用縮進方法，例如制表符和空格。另外，為了掌握現有頁面的結構，使用可以很好地格式化和顯示HTML源的工具是很方便的。■ 有時「寫入位置」在每個元素中受到限制HTML元素不能隨意寫在任何地方，而是寫作良好的立場是用語法規定的。例如，不可能在表示段落的p元素內包含其他p元素。即使它違反了語法，許多瀏覽器也會適當地解釋並顯示頁面。然而，由於與語法相反的解釋因瀏覽器而異，如果它不遵循語法，則取決於瀏覽器，它將成為不同的外觀因素。
可以通過輸入URL或上傳HTML文件來檢查語法的服務
已經制定HTML語法的W3C組織有一個服務「 W3C標記驗證服務 」，可以檢查HTML源的語法。讓我們使用這樣的語法檢查器將其描述為正確的語法。
什麼是屬性？
可以將屬性和屬性值添加到HTML的開始標記中，具有以下感覺。
<標籤名稱屬性名稱=「屬性值」>到
在編寫HTML原始碼時，您可以單獨編寫開始標記，但在許多情況下，您還可以使用屬性進行編寫。除非您編寫屬性，否則某些元素沒有意義。■ 示例1 /創建連結元素屬性：創建連結元素具有指示連結目標的herf屬性。
href="http://allabout.co.jp/"> All About
■ 示例2 /顯示圖像的img元素的屬性：img元素顯示圖像：指示圖像位置的src屬性，指示圖像寬度的width屬性，指示高度的height屬性，替換字符alt屬性等。
src =「photo.jpg」 width = 「300」 height = 「120」 alt = 「Sea photo」>
■編寫指定為屬性值的文件路徑如上例所述，在指定圖像文件或連結頁時，需要描述目標文件的位置（=文件路徑）。要指定此類外部文件，請使用以下描述方法。
只寫文件名（例如href =「target.html」）用相對路徑描述（例如href =「../ orange / target.html」）用絕對路徑描述（例如href =「/ fruits / orange / target.html」）在URL中描述（例如href =「https://www.example.com/fruits/orange/」）有關如何編寫每個文檔的詳細信息，請參閱文章「 如何在HTML / CSS中描述文件路徑 」。■ 不僅特定元素的屬性，全局屬性也將被施加到任何元件href屬性，用於指定連結目的地，和一個元件創建連結，在有限的元件，例如作為表示一個特定的文件之間的關聯的連結元件只使用它。相比之下，每個HTML元素都添加了一個通用的「全局屬性」。例如，global屬性是應用CSS時使用的class屬性，用於添加唯一名稱的id屬性，以此類推。
class =「surprise」>主頁
在上面的原始碼中，我們將class屬性添加到strong元素，並將「surprise」指定為屬性值。class屬性通常用於使用CSS添加裝飾。
字符實體引用·可以編寫特殊符號的數字字符引用
如果在HTML原始碼中使用特殊描述方法，則可以發布各種象形圖
在網絡上，您可以使用許多符號，如「」或「」或許多象形圖，如「」。如果他們採用UTF-8等Unicode作為字符代碼，則可以直接在HTML原始碼中編寫。但是，如果您使用SHIFT-JIS代碼等，則可能無法直接在HTML原始碼中編寫特殊符號。對於這種情況，有一些特殊的編寫方式，稱為字符實體引用或數字字符引用。
版權所有
＆copy;2017，All About Inc ..
如果您在HTML原始碼中編寫「＆copy;」，如上所述，「」符號將顯示在瀏覽器中。在HTML中，標籤是使用「<」和「>」符號創建的，因此您無法在HTML原始碼中自行編寫「<」或「>」符號。在這種情況下，您還可以使用字符實體引用通過寫「<」或「>」來顯示它。有關詳細信息，請參閱以下文章。
最小的HTML模板
最後，我將介紹一個模板，用於從我自己的1中描述HTML原始碼。您可以根據需要在body元素中寫入主體元素，但head元素中的內容描述了網頁上的各種信息，例如「請寫下此內容」。
<！DOCTYPE html><html lang =「ja」><HEAD> <meta charset =「utf - 8」> <meta name =「description」content =「本頁的摘要句子」> <meta name =「viewport」content =「initial-scale = 1」> <title> title </ title> <link type =「text / css」rel =「stylesheet」href =「style.css」> <link rel =「快捷圖標」href =「/ favicon.ico」></ head><BODY> <h1>標題</ h1> <P> 文本 </ p> <script type =「text / javascript」src =「script.js」> </ script></ body></ html>
以下是上述來源中描述的每條線的含義的簡要說明。1. DOCTYPE聲明<！DOCTYPE html> 在HTML源的第一行寫下DOCTYPE聲明。在HTML 5之前，有一個角色顯示「使用HTML描述的是什麼類型的HTML」，但在HTML 5中，沒有具體指定版本號。如果您按照上述說明編寫它，則可以表明它是用標準規範HTML編寫的。2. html元素（lang屬性） <html lang =「ja」>在HTML原始碼中，將html元素描述為最外層元素。對於該開始標記<html>，您可以使用lang屬性指定語言類型。在日語的情況下，寫「ja」。3. head element <head></ head>在這個head元素中，描述網頁上的各種信息。例如，寫下4中列出的內容。4.元元素（字符代碼規範） <meta charset =「utf - 8」> 指定HTML原始碼的字符代碼。如果使用SHIFT-JIS而不是UTF-8編寫「charset =」shift-jis「 我寫了。字符代碼名稱不區分大小寫，因此您可以用大寫字母書寫它們。即使省略了這種描述，也會顯示，但也要避免出現亂碼的可能性。由於元元素是空元素，因此沒有結束標記。5.元元素（摘要聲明的規範）<meta name =「description」content =「... summary sentence ...」> 用句子描述這個網頁的大綱。它不會影響網頁的實際顯示，但可以作為摘要句使用，以顯示在搜索網站的搜索結果中。寫110個字符通常很好。如果要在SNS而不是搜索站點上顯示摘要，請參閱下面的相關文章。
如何描述OGP在引用SNS時輸出所需的信息和圖像6.使用元元素（指定視口） <meta name =「viewport」content =「initial-scale = 1」> 使用此說明可以使您的網站更易於在行動裝置上查看。有關詳細信息，請參閱以下相關文章。
使用Mobile First進行設計時如何編寫CSS如何使智慧型手機兼容網站和6點記住防止自動減少智慧型手機的頁面
7. title元素<title> title </ title> 描述網頁的標題。它顯示在瀏覽器的標題區域（選項卡和窗口標題）以及搜索站點的搜索結果中。8. link element（加載CSS） <link type =「text / css」rel =「stylesheet」href =「...」>如果單獨準備CSS（樣式表），請在此處加載。有關詳細信息，請參閱以下相關文章。
什麼是CSS？樣本表編寫方法的介紹甚至初學者都能理解如何通過媒體查詢按屏幕大小切換CSS創建一個允許查看者切換樣式表的功能9. link元素（favicon的名稱） <link rel =「快捷圖標」href =「...」> 如果你有一個圖標，請在此處指定。有關詳細信息，請參閱以下相關文章。
如何在選項卡和書籤上顯示自己的圖標輕鬆製作圖標和安裝方法10. body元素 <body></ body> 在這裡寫文字。由於您可以在文本中編寫任何內容，因此無需顯示任何模板。在這個例子中，我們只編寫構成標題的h1元素和創建段落的p元素作為示例。11. script element <script type =「text / javascript」src =「...」> </ script> 讀取腳本的腳本元素不僅可以在head元素中編寫，也可以在body元素中編寫。由於需要一段時間的外部文件的閱讀「的劇本是推遲讀書沒問題」，以更快地顯示網頁的最後一個（= </ body>的標記之前）讀成你最好寫。這樣做可以防止因等待腳本加載而導致網頁呈現延遲。另請參閱以下相關文章。
使用外部CSS和外部JavaScript防止顯示速度下降
讓我們學習如何編寫HTML
通過使用網站創建軟體，您可以創建各種網頁而無需直接編寫HTML原始碼。但是，如果您可以自己編寫HTML原始碼，則可以更自由地創建Web頁面。請準備一個環境，您可以在其中直接編輯HTML原始碼並嘗試許多技術。