寫在前面

想了很久不知道該怎麼開始這個專欄，怎麼算簡單，怎麼算有趣，生怕一不小心就難了，如果直接講一個整的小工具的開發吧，又需要閱讀者需要一定的基礎，如果講某一個好玩的技巧，又與編程違背，思來想去決定從web開始做這個專欄，一點一點做起一個完整的個人博客會更有成就感。這個系列完成後還會有硬體上的教程，基於我參加機器人比賽和一些專利小發明的經驗。

為了做到簡單和不乏味，我盡量縮短每篇文章的長度，講最重要的一些部分，如果想要深入研究，還需讀者搜索更多的資料。

什麼是HTML

  • HTML 是用來描述網頁的一種語言。
  • HTML 指的是超文本標記語言 (Hyper Text Markup Language)
  • HTML 不是一種編程語言，而是一種標記語言 (markup language)
  • 標記語言是一套標記標籤 (markup tag)
  • HTML 使用標記標籤來描述網頁

簡單來講，html就是用一套通用的標記來表示網頁中的元素

html中的標籤

  • HTML 標籤是由尖括弧包圍的關鍵詞，比如
  • HTML 標籤通常是成對出現的，比如 和
  • 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
  • 開始和結束標籤也被稱為開放標籤和閉合標籤

html長什麼樣

<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

一個簡單的例子就是上面這樣，其中，這樣即是標籤,被尖括弧括起來的即是內容，title中的內容即是該頁面的標題

一個基本的html至少應該包括html,head,title,body,即頭尾，標題

  • html 中的文本描述網頁
  • body 中的文本是可見的頁面內容
  • h1 中的文本被顯示為標題
  • p 中的文本被顯示為段落

你可以新建一個文本文檔，複製這段內容進來，另存為hello.html用瀏覽器打開即可看到效果

工具

通過上面這個txt開發不難發現，windows自帶的notepad編寫代碼不太好用，這裡我推薦一下microft的visual studio code 40多Mb的體積，智能提示，代碼高亮

官方主頁 雙擊打開按照提示即可完成安裝

插件

vscode 自帶的插件機制使得擴展功能非常方便，在此推薦一些好用的html開發插件

  • open defaut broserVSCode 不能通過內置界面來直接在瀏覽器中打開文件。此擴展將添加一個 [Open With Default Browser] 選項到右鍵菜單，使您在客戶端（Firefox，Chrome，IE）中打開命令面板選項。
  • TODO Highlight此工具可以在你的代碼中的標記出所有的 TODO 注釋，以便在推送到生產環境之前輕鬆跟蹤任何未完成的業務。默認情況下，它會查找 TODO 和 FIXME 關鍵字，當然，您也可以添加自定義表達式。
  • Prettier

    Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就能夠自動應用 Prettier，並將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式

  • Color Info這個便捷的插件，將為你提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停游標，就可以預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了。

打開的vscode左側找到插件搜索你想用的插件，點擊安裝就可以使用了。

推薦閱讀：

相关文章