李洪強和你一塊兒學習前端之(2)表格、表單、標籤語義化

你們早上好!新的一天開始了,學如逆水行舟,不進則退,一塊兒加油吧!

在學習的過程當中有任何問題想與我交流的,加我QQ: 990625403

好了,讓咱們開始今天的學習吧!

 

溫故而知新

1 複習昨天的知識

1.1 單標籤  (單標籤是隻有開始標籤,沒有結束標籤)

<!--文本內容--> 文本註釋標籤  快捷鍵是: Ctrl +/

<br>　　　　　　換行標籤

<hr>　　　　　　橫線標籤

1.2 雙標籤

<p></p>　　　　　　段落標籤

<hn></hn>　　　　  標題標籤　　n的取值是1-6  

<font　　size = "10"/*設置文字大小*/ color = "red"/*設置文字顏色*/></font>　　文字標籤

<strong></strong>　　<b></b>　　文本加粗

<em></em>  i　　　　　文本斜體

<ins></ins>  u　　　　　文本下橫線

<del></del>  s　　　　　刪除線　　　　

1.3 Img 標籤以及屬性

 Src屬性

Alt屬性: 圖片沒法顯示對圖片的描述

Title  : 鼠標放在圖片上顯示的文字

Width: 寬度

Height: 高度

1.4 超連接a以及屬性

<a href = "02.html"  title = "描述">跳轉</a>錨連接

<p id = "db"></p>

<a href = "#db">返回頂部</a

下載:(在a標籤中放一個壓縮文件)

<a href = "1.rar">下載</a>

 

給a標籤設置跳轉到新的頁面:(默認是跳轉到當前頁面)

<a href = "02.html"  target ="_blank"  title = "描述" ></a>

若是設置全局的屬性是跳轉到新的頁面: 

在head中: 

<base target = "_blank">

錨連接: 

是a標籤的另外一種用法

<p id = "db"></p> /*id屬性與js配合使用*/

<a href = "#db">返回頂部</a>

 

1.5列表

第一類: 無序列表

<ul>

　　<li></li>

　　<li></li>

　　<li></li>

　　<li></li>

</ul>

第二類:有序列表

<ol>

　　<li></li>

　　<li></li>

　　<li></li>

　　<li></li>

</ol>

第三類: 自定義列表

 

<dl>

　　<dt></dt>

　　<dd></dd>

　　<dd></dd>

　　<dd></dd>

 </dl>

1.6特殊字符

 &lt;　　　　<　　小於號

&gt;　　　　>　　大於號

&nbsp;　　　　　  空格

以上是昨天的內容

 

---

 

 

2 新知識

2.1 Meta標籤介紹[本次四種用法均在head標籤裏面]

<meta charset = "utf-8">

Charset:字符集

ASCII

ANSI

Unicode

Gbk

Gb2312

utf-8: 編碼格式

1:<meta name = "keywords"  content = "前端培訓">關鍵字

做用: 對網站進行優化的做用 (SEO)對搜索的時候比較好

不推薦寫太多的字

一方面: 經過技術,另外去百度買

2:<meta name = "descroption" content = ""> 對網站的描述

 

3:<meta http-equiv = refresh content = "5"; url ="http://www.baidu.com">

這是網頁重定向 

一秒或者幾秒鐘跳轉到另外一個頁面

4:<meta name = "Author" content = "李洪強">告訴走索引擎你的站點的製做的做者

5:

 

2.2Link標籤介紹[本次兩種用法均在head裏面]

 

1:<link rel = "stylesheet" href = "1.css">

 

引入外部樣式表

 

2: <link rel = "icon" href = "favicon.ico">

給網頁title中放置小圖標

注意: 只能放置"ico"格式的圖片,其餘格式的不能夠

 

2.3表格 (table)

做用: 顯示數據(原來是網頁佈局用的)

 

組成

　　table　　　　定義表格(告訴瀏覽器,我要定義一個表格)

　　tr　　　　　　行

　　td　　　　　  列(單元格)

 

給你們舉個例子:

 

<table>

　　<tr>

　　　　<td>姓名</td>

　　　　<td>班級</td>

　　　　<td>職業</td>

　　　　<td>籍貫</td>

 

　　</tr>

</table>

屬性介紹:

border: 設置表格邊框

width : 設置表格寬度

Height: 設置高度

cellspacing 設置單元格之間的距離

cellpadding: 文字距離單元格之間的距離

bgcolor = "red"設置背景顏色

align = center/left/right  讓表格中的文字居中

這個屬性若是給 td設置的話就是讓文字居中,若是給表格設置的話是讓表格居中

 

<th></th>　　設置表格標題,用法和td同樣

 

<table border = "1"　　width = "400"　　height = "300"　　cellspacing = "0"　　cellpadding = "20"

bgcolor = "red">

　　<tr>

　　　　<td>姓名</td>

　　　　<td>年齡</td>

　　　　<td>職業</td>

　　　　<td>籍貫</td>

　　<tr>

 

　　<tr>

　　　　<td>小紅</td>

 

　　　　<td>28</td>

 

　　　　<td>挖掘機</td>

 

　　　　<td>山東</td>

 

　　<tr>

 

設置表格表頭居中

<caption><h3>人員信息表</h3></caption>

 

caption標籤是放在table裏面的

注意: h系列的標籤不能嵌套!

表格結構

<table>

　　<thead></thead>　　頭

　　<tbody><tbody>　　身體

　　<tfoot><tfoot>　　   腳

</table>

表格結構的練習

 

補充知識

單元格的合併

橫向和合並

<tr>

　　<td></td>

　　<td　　colspan = "2"></td>

　　<td></td>

</tr>

縱向合併:

<tr>

　　<td></td>

　　<td　　rowspan = "2"></td>

　　<td></td>

　　<td　　rowspan = "2"></td>

</tr>

回顧上午知識:

mata:

01瀏覽器對文檔進行解析,不會出現亂碼 

02解決網站優化

03 description 對整個網站進行描述

04 網頁重定向

link標籤

引用外部樣式表

給網站設置小圖標

 

table

屬性: border:邊框

width

height

cellsspacing

cellpadding

 

3 表單 (form)

3.1做用

表單的做用是用來收集信息

3.2組成

->1-提示信息

->2-表單控件

表單域

表單介紹:

<form　　action = "">

 

</form>

屬性:

action: 處理用戶數據信息

Method :get / post

 

Get數據提交:

　　經過地址欄的方式進行數據提交,將用戶輸入的信息顯示出來

　　Get提交安全性差

 

Post提交

　　數據經過後臺進行提交,不會將用戶信息顯示出來,安全性比較好

 

3.3 表單控件

<!--文本輸入框-->

用戶名: <input　　type  = "text"　　maxlength = "6">

屬性:

maxlength: 　　　　　　設置文本輸入框最多能輸入多少字符

readonly = "readonly"   設置文本輸入框爲只讀(只能讀不能編輯)

disabled = "disabled"     控件屬於非激活的狀態

name = "username"　　給輸入框設置名稱

Value = ""　　　　　　　設置或者顯示輸入的值(名字不能取相同的)

 

密碼輸入框:

<!--密碼輸入框-->　　　

密碼: <input　　type = "possword">

屬性用法與文本輸入框的用法同樣

 

單選按鈕

<!--單選按鈕-->

性別: <input　　type = "radio"　　name = "xb">男<input　　type = "radio"　　name "xb">女

注意: 實現單選按鈕效果必定要給控件設置相同的名稱

屬性:

checked = "checked"　　設置默認選中項

性別: <input　　type "radio"　　name = "xb"　　checked = "checked">男

 

注意: 若是給男和女兩個按鈕都設置了checked的話,那麼會顯示第二個

下拉列表

<select>

　　<option>山東</option>

　　<option>山西</option>

　　<option>河南</option>

　　<option>河北</option>

　　<option>北京</option>

</select>

 

屬性:

設置默認選中項

<option　　selected = "selected">北京</option>

multiple = "multiple"　　能夠實現多選效果

省: <select　　multiple = "multiple">

 

多選控件:

<input　　type = "checkbox"　　checked = "checked">抽菸

<input　　type = "checkbox"　　checked = "checked">喝酒

<input　　type = "checkbox"　　checked = "checked">燙頭

設置默認選中項: checked = checked

 

多行文本輸入框

<textarea>

 

 

</textarea>

 

圖片上傳控件

<input　　type = "file">

按鈕系列:

<!--表單提交按鈕-->

<input　　type = "submit">

<!--普通按鈕-->

<input　　type = "button"　　value = "普通按鈕">

注意: 該按鈕不能進行表單提交,一般和js代碼配合使用

<!--重置按鈕>

<input　　type = "reset">

將控件中的值恢復到默認值狀態

<!--圖片按鈕-->

<input　　type = "image"　　src = "按鈕.jpg">

該控件也能夠進行表單的提交

 

表單分組控件

<fieldset>

　　　　<legend>用戶註冊</legend>

 

</fieldset>

 

 

 

Emmet縮寫語法

http://www.cnblogs.com/cnjava/archive/2013/07/30/3225174.html

 

表單補充:

<!--網址判斷-->

<input　　type = "url">

<!--郵箱判斷-->

<input　　type = "email">

<!--判斷日期-->

<input　　type = "date">

<!--判斷時間-->

<input　　type = "time">

<!--判斷輸入數字-->

<input　　type = "number">

<input　　type = "range"　　max = "100"　　step = "5">

 

4 標籤語義化

　　4.1　　概念: 什麼樣的標籤幹什麼樣的事

　　4.2　　意義: 

　　　　　　

　　

4.3什麼樣的網頁語義化比較好

　　讓網頁裸奔(css樣式去掉),結構依然清除

4.4作法

　　1.儘量少的使用無語義的標籤div和span

　　網頁佈局

　　2.在語義不明顯時,既可使用div或者p時,儘可能使用有語義的標籤

　　3.不要使用純樣式標籤,如:b,font,u等,改用css設置

　　4.須要強調的文本,能夠包含在strong或者em標籤中strong默認樣式是加粗(不要用b),em是斜體(不用i)

 

之後你們在寫代碼的過程當中,儘可能使用有語義的標籤

　　本節知識點到這裏就結束了,你們掌握的怎麼樣,讓咱們一塊兒進步吧!

　　　　　　　　　　　　　　　　　　　　　　2017年3月14日

　　　　　　　　　　　　　　　　　　　　　　李洪強於北京