HTML思維導圖

標籤：需要   select   常用   下拉   講解   邏輯   不同   意圖   類比   

以下是HTML文檔的結構：

本文主要講解HTML當中的一些html標籤,css樣式,javascript方法

html

　　html的標籤有各式各樣的數不勝數，但是常用的並不多，總結下我目前最常用的html標籤有：div標籤,ul標籤,a標籤,span標籤,img標籤,button標籤,input標籤,select標籤。在網頁上這些標籤的主要功能都是通過css樣式以及js方法相結合才能實現的。

　　div標籤

　　這是一個塊狀元素，也是我們最常用的，可以毫不誇張的說，任何網頁都會用到它，它主要是搭配樣式以及方法使用，你可以把它看成一個箱子，它主要的作用就是用來包住其他標籤，限制其他標籤。

　　span標籤

　　這是一個行內元素，和div一樣，它也是一個箱子，和div的不同的是，一般我們會拿span標籤來包裹常值內容

　　ul標籤

　　ul標籤是列表標籤的一種，列表標籤包括有序列表ol，無序列表ul，自訂欄表dl。不過常用的還是ul標籤,我們比較少用到單純用html書寫的ul，一般我們都會結合css樣式以及js方法實現各種功能，比如：導覽列，輪播圖片等。

　　a標籤

　　超連結標籤，主要用於實現超連結功能

　　img標籤

　　用於插入圖片

　　button標籤

　　按鈕標籤，在網頁中多多少少都會出現一些按鈕，這就要用到我們的button標籤了，button標籤一般比較多用於表單裡面，但是也會有一些特殊的用法，比如按鈕式下拉式功能表。

　　input標籤

　　表單標籤的一種，主要用於輸入文字框，和密碼文字框，是表單中最常用到一種標籤

　　

　　select標籤

　　下拉選項，主要是做二級聯動和多級聯動使用

 

CSS樣式

　　對於樣式的理解，我是這樣理解的，一個網頁你想讓它是什麼樣子的，那它的樣子就是樣式，也就是說，我們要通過css樣式來美化我們的網頁以及通過css樣式結合js來實現我們想要的功能。

　　樣式對於html文檔來說還是很重要的，就像我我們學習HTML一樣，如果我們只學習了html標籤，我們是很難做出一個網頁來的，但是學習了css樣式之後，我們可以通過css樣式來製作靜態網頁，雖然少了js，但是不影響我網頁的製作。

　　在這我不會像html標籤一樣，給你們列舉一些常用的樣式，我更多的是講解如何知道自己要使用什麼樣式，即使樣式代碼忘記了，也可以通過百度查詢。

　　首先

　　我們要清楚我們要做的這個html文檔的整體結構，整個html文檔是由多少個部分構成的。

　　然後

　　在我們瞭解了整體結構之後，我們開始理解沒一部分它是要長什麼樣子的（也就是它的樣式是什麼），比如：寬高多少，是否要添加背景顏色或者背景圖片，文字顏色是什麼等等······

　　最後

　　我們在調試樣式的時候，最好給對象加個邊框，這樣會比較方便我們調試外邊距，內填充，以及整個的布局。

javascript方法

　　在html中我最喜歡的就是js了，原因很簡單，就是它的實現需要你運用你的邏輯思維，往往一個動作一個功能的實現都會讓你絞盡腦汁才會想出來。當然我就不是喜歡自虐，只是在平時書寫一些代碼的時候，往往最浪費我時間的就是css樣式的調試，因為我們現在才剛開始學不久，一些作業都是類比一些網站，把這個網站類比出來，所以在類比的過程中總是因為樣式的問題調試很久，不是說樣式很難，只是自己感覺很繁瑣，尤其最近一段時間讓自己寫傳智播客的新網頁，但是素材什麼的都沒有，有些圖片甚至要自己摳，這就繁瑣了。所以我還是更喜歡js簡單明了快捷

　　當然，js方法的邏輯思維還是有方法的，我一般使用的是逆向思維思考

　　1） 一般我書寫js的思路首先是先瞭解這個功能完成後會得到什麼結果?

　　2) 通過這個結果去考慮如何才能得到這個結果（這就是要思考有哪些方法可以實現這個方法），在這裡我給實現這個結果的動作稱為方法1，

　　3）然後思考要如何才能實現方法1，實現方法1的動作稱為方法2，

　　·················

　　n)中間省略了很多，因為這是一個逆向思維的方法，知道了要實現的功能然後一級一級往上推，直到最後，這一功能的方法就被你推出來了，當然前提是要對js方法比較熟悉，因為如果你都不熟悉，那你怎麼知道有哪些方法可以實現這個動作呢？

　　　　

　　

HTML思維導圖