前序
HTML與CSS對於剛入門的小菜鳥可能會多臉懵逼，不知道代表什麼含義，但是每天我們上網的時候都有遇到，網頁就是html，網頁上面的樣式、排版、圖標都是由CSS所繪製。
本系列文章就帶大家快速的入門HTML與CSS，通過幾個小時的閱讀與思考自己就可以編寫一個簡單的網頁，介紹一些常用到的知識點。
本文適合對象
- 零基礎的同學
- 想在短時間入門
編輯器推薦
- vscode（免費）
- webstorm（收費，但有試用，百度也有很多你懂的東西存在）
如果已經有熟練的編輯器就用自己順手的，寫代碼最重要的還是順手。沒有編輯器的同學則可以使用上面的推薦。
vscode是微軟家的東西，截止到2017年6月，功能已經很強大了。如果還想要更屌的東西，就用Microsoft Visual Studio 2016，被別人尊稱爲銀河系最好用的編輯器，嘿嘿嘿，自己去感受吧。
WebStorm也不錯，界面親民，用的不多，有興趣的同學先百度一下看看
特別說明
想要系統的學習的話，還是要自己去閱讀一些官方文檔
這裏推薦：MDN HTML
本系列文章還是適合當Tips用
目錄
- HTML的定義、概念、發展簡史
- 常用HTML標籤的含義、用法
- HTML語義化
1，HTML的定義與概念
HTML是英文HyperText Markup Language的縮寫，中文意思是超文本標記語言
HTML是一個把所有東西包含起來的外殼：HTML是一個國際化的標準，由萬維網聯盟（W3C）和網頁超文本技術工作小組 (WHATWG)維護。
HTML沒有描述內容的樣式和格式，只是內容本身和其意義。如果你想要在網站中加入樣式和格式，需要通過層疊樣式表（CSS）來定義和控制。
2，HTML的發明原因
HTML是由蒂姆·伯納斯-李，一名CERN（歐洲核子研究組織）的物理學家發明，他發明HTML的原因是以前的網絡交流方式太不方便了，於是自己弄了一個標記語言出來。但現在的版本跟以前已經大不相同了。
3，怎麼編寫HTML
基礎的HTML編碼結構如下：
<html>
<head>
<title>這是標題</title>
</head>
<body>
這是示例文本...
<!-- 我們使用這種寫法來標記註釋 -->
<!-- 頁面標籤和其他的內容都在這裏.... -->
<!-- 這是在瀏覽器中顯示的實際區域 -->
</body>
</html>通過上面的代碼片段可以很輕鬆的看出來，HTML是由一對一對的Tag標記組成的。標記利用尖括號表示，而結束標記（用來指示內容尾端）則在前面加上斜線。
<html></html>html主體，相當於整個人。
<head></head>head頭部，相當於人的腦袋，裏面放一些CSS外部引用、標題、一些規則等等，簡而言之head裏面放的都是html的一些靈魂
<body></body>body身體，相當於人的軀幹部門，放置的都是一些html的內容結構，就跟人身體裏面的骨架一樣。
打開你的編輯器，複製上面的代碼到編輯器裏，保存文件，名字隨意，文件後綴名爲.html，雙擊文件則該html文件會在瀏覽器裏打開。
恭喜你，你已經編寫了第一個HTML文件
4，常用標籤
Html裏面的標籤有很多個，上面已經講了三個html、head、body，我下面再列幾個我經常用的標籤：
最常用的標籤
<h1></h1> 標題,範圍可以從h1～h6
<div></div>div具有分割內容作用,可能在一個網頁用的最多的就是他
<a href="URL"></a> 創建超文本鏈接
<img src="" />圖片標籤，用這個就可以網頁里加圖片了
<span></span>文本標籤
<p></p> 創建一個段落
<br> 換行 插入換行符
<nobr>強制不換行
<u></u>文字下劃線
<s></s>文字刪除線
<sup></sup>上標
<sub></sub>下標
<form> 表單區域標籤元素
<label>點擊單選按鈕或多選框前文字對應選項就能被選中，這個就是對文字加了該標籤實現。
<textarea>多文字標籤
<select>下拉菜單標籤
<base>超鏈接（錨文本）默認打開方式與默認鏈接URL地址標籤元素
<meta>被用做網頁自適應設置、網頁關鍵字、網頁介紹、作者、網頁編碼、robots、自動跳轉等聲明及說明標籤
<script></script>鏈接外部js，外部資源
<style />鏈接外部樣式表，外部資源。
<input type="" />有四種type，見下面說明type四種類型
type=text 文本框，用於輸入用戶名，密碼
type=submit 提交按鈕，用於提交表單
type=checkbox 多選框，常見於選擇多個內容
type=radio 單選框，多選一，例如選擇男女性別
看完上面的東西是不是有點暈，都什麼跟什麼嘛，下面一章節我將用圖文結合的方式，讓大家更加清楚每個標籤的作用。
記住上面的標籤的話，你就可以隨意發揮了，你已經具備基本功去寫網頁頁面。學習編程語言還是要動手去寫，看是記不牢靠的，只有靠自己多寫幾次。
（待續）