「小白，你知道文字框麼？」
「知道，就是網頁裡面輸入文字的地方！」
「哦，那你知道表單麼？」
「不知道，表單是什麼啊？」
「文字框就是乙個表單元素，在html語言裡面表單主要用來收集使用者輸入。比如文字框、單選框、核取方塊等等。其他的表單你目前學了也用不到，文字框是表單中最重要的乙個，今天咱聊一聊文字框吧，文字框以後會成為你練習的常用元素。」
「首先文字框是乙個行內元素，行內元素跟塊級元素不同之處在於它前後沒有換行。現在我們在乙個div中寫上幾個文字再放乙個文字框看看它的效果」
「input標籤的type為text的時候它就是乙個文字框，這裡的type還可以換成password密碼文字框、tel**文字框(tel型別的文字框在手機上獲得焦點進行輸入的時候，預設彈出的撥號鍵盤，對於輸入數字非常方便)。在input上給它乙個id屬性，方便我們通過jquery進行操作，placeholder是文字框提示文字的屬性。」
小白看了這個文字框說道：「文字框可以通過css更改樣式麼？看著好醜啊~」
「當然可以了！對於文字框的樣式我們注意兩點，乙個文字框文字大小(font-size)，乙個是文字框的內間距(padding)，這兩個屬性對文字框的視覺舒適度起很大作用。注意：input不會繼承父容器設定的文字大小，因此我們需要針對input單獨設定他的文字大小。」
「小白，你知道**分割定律麼？」
「知道啊！0.618。怎麼了？」
「嗯！如果你的文字大小是14畫素，你就用14*0.618四捨五入取整，得到的結果設定為文字框的padding，這樣看起來文字框會很舒服，比如文字大小是20個畫素，20*0.618=12.36~12。所以padding設定成12px，就是這個樣子！」
「如果美工給你提供乙個文字框樣式，你一定要按照美工的樣式去設計，這時候就需要用到css控制樣式了，你對照css樣式表自己除錯就可以了，比如我隨便設定乙個樣式：」
「說完樣式，我們還得提jquery對文字框的值操作。jquery對文字框的值操作用到的是val方法。比如我現在要獲取id為username的文字框的值可以這樣來獲取：」
「通過jquery改變文字框的值通過val傳遞字串引數就可以了：$("#username").val("新的名字");」
「小白，jquery對文字框的操作除了val之外，也可以通過jquery更改文字框的樣式。當然還有滑鼠事件、焦點事件、文字內容發生變化等事件，這些你有時間可以自己練習練習，如果沒時間咱後面再專門做討論，今天就這樣吧！」
想學h5的朋友可以關注老爐，您的關注是我持續更新《小白h5成長之路》的動力！
小白H5成長之路3 做H5之前我該準備什麼工具？
早晨上班時候，小白來的很早，他已經迫不及待的開始學習html5了，老朱剛來他就湊了過來，朱哥，我應該從哪兒開始學？你不用著急，先把做html5的工具準備好吧！然後安裝谷歌chrome瀏覽器 小白 為何要安裝chrome瀏覽器呢？ie不能用麼？老朱跟小白說 知道乙個網頁的結構吧？不太清楚，我只知道一般...
小白H5成長之路5 CSS需要全學麼？
小白，css樣式看的怎麼樣了？第二天老朱找到小白問道。小白鬱悶的說道 過了一遍，不過css樣式太多了，看的有點暈。嗯，過一遍就可以了，我來跟你說一下css怎麼用吧！你還是開啟昨天的文件。檢視原始碼 開啟了！好的！css樣式最常見的就是控制乙個容器 div p span li等這些都是容器 的文字樣式...
《小白H5成長之路23》彈層與浮動導航是怎麼實現的
小白，你最近看css的時候碰到position屬性了麼？碰到了，通過position可以改變容器的定位，我記得官方描述是這樣的 這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成乙個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。...