整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
.說說盒模型？ box-sizing常用的屬性有哪些？分別有什么作用？
答：css盒模型是css規范的一個模塊，每個元素由一個方形的盒子表示。 該盒子包含有內容區域（content）、內邊框區域(padding)、邊框區域(border)、外邊框區域(margin)
內容區域：元素真實內容，包含背景、顏色或圖片，大小為content-box
內邊距區域padding: 如果內容區域設置了背景、顏色或圖片，這些樣式為延伸到padding上
box-sizing的常用屬性：
2.居中的問題，是不經常碰到呢，哈哈
水平居中
垂直居中
3.如何確定選擇器優先級
答：內斂樣式 》 id選擇器（0100） 》 類選擇器（屬性選擇器，偽類） 》 類型選擇器（偽元素 0001） 》 通配符（0000）
但是!important會覆蓋上面所有
4.BFC是什么？（這個平時很少關注，但面試也不能遺漏）
答：BFC即為Block-formatting-context(塊級格式化上下文)，它是頁面的一塊渲染區域，這個區域與外部無關。它有自己的渲染規則，決定了子元素的位置以及和其它元素的關系和作用。
規則
哪些會生成BFC
其中，下面第5個問題就會涉及到BFC的相關知識
5.為什么清除浮動？如何清除浮動？
答：一個塊級元素的高度如果沒有設置height,那么其高度由子元素撐開，如果子元素設置float,它脫離了文檔流，父元素的高度會忽略。 為了使父元素高度撐起來，需要清除浮動。
清除浮動方法包括操作父元素和操作子元素：
6.頁面導入樣式時，使用link和@import有什么區別？
答：
7.CSS3哪些新特性? 新增偽類有那些？
答：css3新特性：圓角（border-radius）、陰影（box-shadow\text-shadow）、漸變（gradients）、過度與動畫（transition and animations）,新的布局方式：多列布局（column）、flex、grid。
8.說下行內元素和塊級元素的區別？行內塊元素的兼容性使用？
答：
行內塊元素的兼容性使用：
9.zoom的作用？
10.父容器width和height分別為200 * 100， 子元素設置margin:50%時(考點包括margin百分比都是針對寬度，內聯的上下都不起作用）
11.使用css重新定義checkbox(https://github.com/xiaosunJessica/summary/blob/master/html/css-checkbox.html)
a. 結合input[type='checkbox']和label
b.input[type='checkbox']隱藏掉, label添加偽元素放在input位置處
c.input狀態為checked時，將label的偽元素content進行修改
12.AB里面的容器不等高，如何做到使兩個背景等高？
13.position的理解
14.px、em、rem
答：px是相對于顯示器屏幕分辨率而言的。
em是相對于當前對象的文本的字體尺寸，如果當前對行內文本的字體尺寸未被設置，則依次向上查找直到相對于瀏覽器的默認字體
rem是相對于html根元素（比較推薦）
最后瀏覽器默認字體是16px,要設置一對一的對應關系，需要設置font-size：62.5%
最后的最后，歡迎大家吐槽和提建議和意見?。?！
整理不全忘補充?。?！
篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：
此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：
type 值 | 含義 |
text | 文字字段 |
password | 密碼域，用戶看不到明文，以*代替 |
radio | 單選按鈕 |
checkbox | 多選按鈕 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
image | 圖像域，用圖像作為背景的提交按鈕 |
hidden | 隱藏域，不可見的輸入框 |
file | 文本域，用于上傳文件等非文本數據 |
文本輸入框和密碼框
除了顯示形式不一樣，其它屬性一樣，有以下屬性：
如下是文本輸入框和密碼框制作一個登錄表單
html代碼：
<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
<label for="fname">用戶名:</label><br>
<input type="text" id="username" name="username" value=""><br>
<label for="lname">密碼:</label><br>
<input type="password" id="pwsd" name="pwsd" value=""><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>顯示效果：
HTML5 輸入類型
除了以上幾種類型，HTML5 還增加了多個新的輸入類型：
如下代碼：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
數字類型（1 到 5 之間）：
<input type="number" name="quantity" min="1" max="5">
IE9 及早期版本不支持 type="number"。<br>
color 選擇顏色：
<input type="color" name="color"><br>
生日:
<input type="date" name="bday"><br>
年月：
<input type="month" name="bdaymonth"><br>
年周：
<input type="week" name="week_year"><br>
時間：
<input type="time" name="usr_time"><br>
一定范圍
<input type="range" name="points" min="0" max="10"><br>
E-mail:
<input type="email" name="email">
能夠在被提交時自動對電子郵件地址進行驗證<br>
搜索：
<input type="search" name="googlesearch"><br>
電話：
<input type="tel" name="usrtel">
目前只有 Safari 8 支持 tel 類型。<br>
url：
<input type="url" name="url">
提交時能夠自動驗證 url 字段<br>
<input type="submit">
</form>
</body>
</html>效果如下：
單選和多選按鈕
使用 type=“radio” 和 type=“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個 checked屬性定義默認選擇的項，checked=“true”指選中那個選項，表單會將 checked=“true” 的選型值傳遞給后臺。
如下實例：
<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form>
</body>
</html>顯示效果：
單選和多選傳遞給后臺的數據是不一樣的，如下會看到地址欄中的數據，多選會發送多個值，后臺將會獲取一個數組形式的數據。
/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi普通按鈕、提交按鈕、重置按鈕
普通按鈕：type=“button”，一般配合腳本使用，語法如下：
<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時所進行的處理。
如下示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" value="普通按鈕">
<input type="button" value="打開窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
</form>
</body>
</html>
單擊您好按鈕
提交按鈕：type=“submit”，用于提交表單內容，是一種特殊按鈕。
如剛才的登錄表單，提交后會返回結果：
重置按鈕：type="reset"，用于清除表單數據，也是一種特殊按鈕。
輸入數據
點擊重置按鈕后，表單數據清空
重置清空數據
HTML5 按鈕
除了使用input定義按鈕，還可以使用 html5 新增的<button> 標簽定義按鈕，button 使用語法如下：
<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form> 其它輸入類控件
隱藏域 —— hidden
文件域 —— file
如下示例：
<form action="/demo/html/action_page.php">
<label for="fname">隱藏域:</label>
<input type="hidden" id="hidden" name="hidden" value=""><br>
<label for="lname">文件域:</label>
<input type="file" id="file" name="file" value=""><br>
<input type="submit" value="提交">
</form> 顯示效果
可以看到，隱藏域在頁面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實現文件上傳功能。
除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區別就是可以輸入多行文字，input 文本輸入框是單行的無法輸入多行文字。
如下示例：
<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>效果如下：
rows 屬性定義文本域的高度是幾行，cols 定義文本域寬度占幾列，比如上面定義了高10行寬30列的文本域。
下拉菜單作用和單選按鈕類似，只不過它更加節省空間，當要選擇的選型很多時，就不適合使用radio空間，所以當選項很多的時候，使用下拉菜單，語法如下：
<select name="名稱">
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>多選列表和多選按鈕類似，一樣為了節省空間，當數據選項比較多時，使用多選列表，語法如下：
<select name="名稱" size="可看見的列表項數" multiple>
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>多選比下拉菜單不同之處是多了一個multiple屬性，定義多選的，且表現形式也不一樣，不是下拉而是一個列表。
如下代碼：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>顯示效果：
這里需要注意的是，多選列表多選時需要按住ctrl鍵同時鼠標單擊選擇才能多選，效果如下：
到這里，已介紹了大部分的表單控件，現在你可以使用他們制作自己的表單，表單通常在動態網站中使用，這為以后制作動態網站打下基礎。
還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網站學習，感謝關注，學習愉快！
上篇 ： 前端入門——html 表單
下篇： 前端入門 —— 網頁中使用窗口框架
<form></form>
屬性 ：
action='接口地址'
method='get / post'
name='表單名稱'
<input>
屬性：
type='控件類型'
name：屬性標識表單域的名稱；
Value：屬性定義表單域的默認值，其他屬性根據type的不同而有所變化。
maxlength：控制最多輸入的字符數，
Size：控制框的寬度（以字符為單位）
1）文本框
<input type="text" value="默認值"/>
2)密碼框
<input type="password" />
3)提交按鈕
<input type="submit" value="按鈕內容" />
4)重置按鈕
<input type="reset" value="按鈕內容" />
5)空按鈕
<input type="button" value="按鈕內容" />
1）單選按鈕組
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral”
checked=“checked”/>(默認選中)女
2）復選框組
<input type="checkbox" name="" />
<input type="checkbox" name="" disabled="disabled" />
* disabled="disabled" (禁用)
* checked="checked" (默認選中)
3）下拉列表（菜單）：
<select >
<option>下拉選項1</option>
<option>下拉選項2</option>
…………
</select>
表示下拉列表，name屬性不是必須的
默認選擇項用selected屬性；
4）表單域多行文本定義：
語法: <textarea name="" cols="" rows="" ></textarea>
多行文本。rows屬性和cols屬性用來設置文本輸入窗口的高度和寬度，單位是字符。
阻止瀏覽器對窗口的拖動設置:{resize:none;}（css屬性）
5)上傳文件：
語法：<input type="file">
1）表單字段集
語法：<fieldset></fieldset>
說明：相當于一個方框，在字段集中可以包含文本和其他元素。該元素用于對表單中的元素進行分組并在文檔中區別標出文本。fieldset元素可以嵌套，在其內部可以在設置多個fieldset對象。disabled定義空間禁制可用；
?
2）字段級標題：
語法：<legend align="left/center/right/justify"></legend>
說明：legend元素可以在fieldset對象繪制的方框內插入一個標題。legend元素必須是fieldset內的唯一個元素。
3)提示信息標簽：
語法：<label for="綁定控件id名"></label>
?
說明：label元素用來定義標簽，為頁面上的其他元素指定提示信息。要將label元素綁定到其他的控件上，可以將label元素的for屬性設置為與該控件的id屬性值相同。
轉自：知乎Eric
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
