整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
、新建項目
1、新建===web項目===輸入項目名稱====完成
二、新建html文件
在新建項目中新建html模板
輸入文件名稱：
三、認(rèn)識基本格式
聯(lián)想出基本格式：
四、編輯html文件
運行html，選擇瀏覽器
五、html常用的快捷鍵
（1）ctrl+n+w web項目創(chuàng)建
（2）ctrl+n+h html文檔創(chuàng)建
（3）ctrl+s 保存html頁面（頁面上如果未保存會顯示*號）
（4）ctrl+r html運行
（5）ctrl+z 撤回
（6）！+tab鍵 聯(lián)想基本格式
（7）ctrl+/ 注釋和取消注釋
（8）ctrl+鼠標(biāo)滾輪， 字體方大和縮小
六、認(rèn)識標(biāo)簽
（1）H標(biāo)簽（標(biāo)題標(biāo)簽）
（2）p標(biāo)簽 （段落標(biāo)簽）
（3）img 標(biāo)簽（圖片標(biāo)簽）
兩種：第一種widows上傳圖片，第二種：網(wǎng)上圖片鏈接
第一種
img中顯示圖片
img中引入圖片
第二種：網(wǎng)上圖片的鏈接：
（4） 標(biāo)簽（空格）
（5）em 標(biāo)簽表示斜體
（6）i 標(biāo)簽表示斜體
（7）br 表示換行
（8）b 標(biāo)簽表示加粗
（9） strong 標(biāo)簽表示加粗
（10）s 標(biāo)簽（刪除線）
（11）u 標(biāo)簽 （下劃線）
（12）font 顏色
（13）sub下標(biāo)
（14）sup上標(biāo)
篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：
此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：
type 值 | 含義 |
text | 文字字段 |
password | 密碼域，用戶看不到明文，以*代替 |
radio | 單選按鈕 |
checkbox | 多選按鈕 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
image | 圖像域，用圖像作為背景的提交按鈕 |
hidden | 隱藏域，不可見的輸入框 |
file | 文本域，用于上傳文件等非文本數(shù)據(jù) |
文本輸入框和密碼框
除了顯示形式不一樣，其它屬性一樣，有以下屬性：
如下是文本輸入框和密碼框制作一個登錄表單
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">
數(shù)字類型（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">
能夠在被提交時自動對電子郵件地址進(jìn)行驗證<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屬性定義默認(rèn)選擇的項，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>顯示效果：
單選和多選傳遞給后臺的數(shù)據(jù)是不一樣的，如下會看到地址欄中的數(shù)據(jù)，多選會發(fā)送多個值，后臺將會獲取一個數(shù)組形式的數(shù)據(jù)。
/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi普通按鈕、提交按鈕、重置按鈕
普通按鈕：type = “button”，一般配合腳本使用，語法如下：
<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時所進(jìn)行的處理。
如下示例：
<!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”，用于提交表單內(nèi)容，是一種特殊按鈕。
如剛才的登錄表單，提交后會返回結(jié)果：
重置按鈕：type="reset"，用于清除表單數(shù)據(jù)，也是一種特殊按鈕。
輸入數(shù)據(jù)
點擊重置按鈕后，表單數(shù)據(jù)清空
重置清空數(shù)據(jù)
HTML5 按鈕
除了使用input定義按鈕，還可以使用 html5 新增的<button> 標(biāo)簽定義按鈕，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文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實現(xiàn)文件上傳功能。
除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區(qū)別就是可以輸入多行文字，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 定義文本域?qū)挾日紟琢校热缟厦娑x了高10行寬30列的文本域。
下拉菜單作用和單選按鈕類似，只不過它更加節(jié)省空間，當(dāng)要選擇的選型很多時，就不適合使用radio空間，所以當(dāng)選項很多的時候，使用下拉菜單，語法如下：
<select name="名稱">
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>多選列表和多選按鈕類似，一樣為了節(jié)省空間，當(dāng)數(shù)據(jù)選項比較多時，使用多選列表，語法如下：
<select name="名稱" size="可看見的列表項數(shù)" multiple>
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>多選比下拉菜單不同之處是多了一個multiple屬性，定義多選的，且表現(xiàn)形式也不一樣，不是下拉而是一個列表。
如下代碼：
<!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鍵同時鼠標(biāo)單擊選擇才能多選，效果如下：
到這里，已介紹了大部分的表單控件，現(xiàn)在你可以使用他們制作自己的表單，表單通常在動態(tài)網(wǎng)站中使用，這為以后制作動態(tài)網(wǎng)站打下基礎(chǔ)。
還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網(wǎng)站學(xué)習(xí)，感謝關(guān)注，學(xué)習(xí)愉快！
上篇 ： 前端入門——html 表單
下篇： 前端入門 —— 網(wǎng)頁中使用窗口框架
么是css的調(diào)用方式？
簡單來講，就是解決把css代碼寫在哪里的問題，這塊內(nèi)容之前在課堂上演示過，這里再用文字說明一下，權(quán)當(dāng)復(fù)習(xí)。
大體有以下四種方式：
1，外聯(lián)式樣式表
添加在HTML的頭部信息標(biāo)識符< head>里：
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>其中href是目標(biāo)文檔的URL， type則規(guī)定了目標(biāo)URL的MIME類型，而media規(guī)定了文檔將顯示在什么設(shè)備上。
2，內(nèi)嵌樣式表
添加在HTML的頭部信息標(biāo)識符< head>里：
<head>
<style type="text/css">
<!-- 樣式表的具體內(nèi)容 -->
</style>
</head>type=”text/css”表示樣式表采用MIME類型，幫助不支持CSS的瀏覽器過濾掉CSS代碼，避免在瀏覽器面前直接以源代碼的方式顯示我們設(shè)置的樣式表。但為了保證上述情況一定不要發(fā)生，還是有必要在樣式表里加上注釋標(biāo)識符“< !--注釋內(nèi)容-->”。
3，元素內(nèi)定
語法：
<Tag style="properties">網(wǎng)頁內(nèi)容</tag>舉個例子：
<p style="color: blue; font-size: 10px">CSS實例</p>上面例子的代碼說明：
用藍(lán)色顯示字體大小為10px的“CSS實例”。盡管使用簡單、顯示直觀，但是這種方法不怎么常用，因為這樣添加無法完全發(fā)揮樣式表的優(yōu)勢——即內(nèi)容結(jié)構(gòu)和格式控制分別保存。
4，導(dǎo)入樣式表(高級用法，暫時先放下）
語法：
<style type="text/css">
<!-- @import url("css/base.css"); -->
</style>其中外部引用CSS主要用到兩種方式link和@import
本質(zhì)上，這兩種方式都是為了加載CSS文件，但還是存在著細(xì)微的差別。
link和@import存在如下差別：
差別1：老祖宗的差別。link屬于HTML標(biāo)簽，而@import完全是CSS提供的一種方式。
link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
差別2：加載順序的差別。當(dāng)一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網(wǎng)速慢的時候還挺明顯。
差別3：兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標(biāo)簽無此問題。
差別4：當(dāng)使用javascript控制DOM去改變樣式的時候，只能使用link標(biāo)簽，因為@import不是DOM可以控制的。
從上面的分析來看，還是使用link標(biāo)簽比較好。
課后練習(xí)：
步驟一：新建一個名為index.html的網(wǎng)頁。
步驟二：在index.html網(wǎng)頁文檔里加入兩個p標(biāo)簽，分別在p標(biāo)簽中加入內(nèi)容（內(nèi)容隨意）
步驟三：嘗試用上面提到的前三種方式，用css代碼改變p標(biāo)簽內(nèi)容的顯示格式。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
