簡單地認識一下 HTML

時間 2019-12-08

標籤簡單認識一下 html 欄目 HTML 简体版

原文原文鏈接

簡單覆盤一下 HTML。css

一、HTML

什麼是 HTML？HTML 是 Hyper Text Markup Language 的簡寫，譯成中文是「超文本標記語言」。html

顧名思義，超文本，就是不止於文本，視頻、音頻、圖片等等均可以，說到底就是一種特殊的文檔。HTML 構建了一個網頁的基本骨架，TA 是用來描述網頁的一種語言。瀏覽器

二、HTML 有多簡單？

HTML 簡單到只須要一個記事本就能編寫。新建一個 msunh.txt 文檔，輸入「我是玖柒後」保存，將擴展名改成 .html ，瀏覽器打開就能直接看到左側內容，F12 進入 Elements 看到如右側內容：安全

紅框內的 html、head、body 標籤都是瀏覽器自動加上的，右鍵查看源代碼或者編輯 msunh.html 文檔，你會發現除了「我是玖柒後」這五個字以外並無其餘內容。bash

固然，這裏是不建議用記事本進行開發的，這是爲了你的生命安全考慮（人生苦短）。建議使用 Visual Studio Code，舒服的一批。學習

三、HTML 的基本組成

一個簡單的網頁組成以下：網站

<!Doctype html>
<html>
  <head>
      <title>我是玖柒後</title>
  </head>
  <body>
    「我是玖柒後」
  </body>
</html>
複製代碼

四、各類各樣的零件

上面說的 html、head、title、body 被稱之爲 HTML 元素，也就是各類各樣的零件、器官。ui

除了 <br/> 、<hr/>、<img/>、<input/> 等少部分自閉合標籤外，元素的開始標籤和結束標籤必須成對出現，例如：<html></html>。搜索引擎

這些元素能夠互相嵌套，這個「人」的全部部位都是嵌套而成，要想長得好，先把架子搭好。編碼

關於 HTML 更多的介紹，能夠去看一下網上的文檔。這裏給你們介紹一個網站：MDN。不吹不擂，看了你就知道了。

MDN 傳送門：

HTML（超文本標記語言）

五、head 標籤

標籤被看作是網頁的頭。

TA 裏面一般會有 title、meta、style、link、script 這幾種標籤，title 比較簡單，就是在窗口處顯示網頁的名稱。

meta 是比較重要的一個輔助標籤，有點相似於我的檔案，正常瀏覽咱們是不會在網頁中看到的，一塊兒瞭解一下 meta 標籤常見形式：

// 定義頁面的編碼方式，國內一般都是用 UTF-8
<meta charset="UTF-8">
// 向搜索引擎說明網頁的關鍵詞
<meta name="keywords" content="我是玖柒後">
// 向搜索引擎說明站點的主要內容
<meta name="description" content="我是玖柒後">
// 表示頁面的可見區域
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
// 說明主頁製做所使用的文字以及語言
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
還有一些其餘的屬性，這裏就不一一贅述了。
複製代碼

style 和 link 同樣，都是在在網頁中引入 CSS 樣式，後續會詳細寫 CSS，這裏簡單帶過。

// 引入外部的 css 文件
<link href="style.css">
// 直接在網頁中定義
<style>
    body {
        color: red;
    }
</style>
複製代碼

script 是引入 JavaScript 的方式，和 CSS 同樣，能夠引入，也能夠直接在網頁中定義，引入的話後綴名爲 .js，但不論是引入仍是直接定義都是用 script 元素。

// 引入外部 js 文件
<script src="index.js"></script>
// 直接定義
<script>
  console.log("我是玖柒後");
</script>
複製代碼

六、其餘標籤

除了在 head 中的這些標籤外，HTML 中還有不少其餘標籤，好比 div、span、img、table、a、p 等等。

這些標籤能夠用來展現文字、圖片、表格等，TA 們之間還能夠相互嵌套，例如：

<a class="title"><img src="photo.jpg" /></a>
複製代碼

其中 a 標籤是成對存在，因此是，而 img 是自閉和標籤，結尾用上 / 便可，不寫也沒多大事，只是更規範一點。class 是 CSS 選擇器，這個後面再說，src 表示引用的圖片路徑。

有些標籤是自帶樣式的，上面那些標籤可能看不出來，以 h1~h6 爲例。（表示標題）

你會發現 TA 們的大小是不一樣的，這個能夠看作是「天賦」，就好用一樣的力氣比打屁股和打臉，感覺到的疼痛是不同的（好像這麼形容有點牽強），反正是說不少標籤是具備「語義」的。

七、H5 語義化標籤

在 HTML5 當中新增了不少語義化的標籤，例如：header、footer、nav、article、address 等等，是否是一看就大概知道是用來描述哪些部分了？

HTMl 標籤語義化，簡單來講，就是讓標籤有含義，就比如直接告訴你這是個什麼器官、什麼部位，而不用再去用其餘標籤拼湊。

給某塊內容用上一個恰當合適的標籤，能使頁面有良好的結構，也更容易看懂這塊的內容是什麼，且利於搜索引擎收錄。

在之後的頁面設計中，慢慢地將使用語義化標籤養成習慣，方便本身也方便他人。

八、總結

這篇文章看完確定不能掌握 HTML，但瞭解 HTML 應該是沒什麼問題的，HTML 相比 CSS 和 JavaScript 來講比較簡單。

想要繼續深刻學習 HTML，多看文檔，重要的是還得多寫，這個和抄書有點相似，抄的多了，肚子裏天然多多少少會有點墨水。

最後就是實踐了，實踐是的最好的學習方式之一，也能更好地理解使用學到的知識。

本文爲我的覆盤，若有錯誤或者不完善的地方，歡迎留言批評指正!

公衆號「我是玖柒後」首發，分享即學習！

1. 簡單地認識一下 HTML
2. 簡單認識一下ACL
3. 12-簡單認識下margin
4. HTML認識一
5. JVM-簡單認識(一)
6. jsp 簡單認識
7. RabbitMQ簡單認識
8. 來認識一下HTML中的標籤~
9. CopyOnWriteArrayList簡單認識
10. 簡單認識JAVA
更多相關文章...
• ASP.NET Web Pages - HTML 表單 - ASP.NET 教程
• ASP.NET Web Forms - HTML 表單 - ASP.NET 教程
• Github 簡明教程
• RxJava操作符（一）Creating Observables

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。