黑馬程序員pink老師前端入門教程,零基礎必看的h5(html5)+css3+移

列表
列表分成{有序列表,無序列表和自定義列表}
3.1無序列表【重點】
無序列表:是沒有順序
語法規(guī)范
- <ul>標簽簽下只能放<li>標簽
- <li>可以放任何標簽
規(guī)則:

<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
- css可以去掉有序列表的小圓點
- 無序列表前面沒有順序
3.2有序列表(了解)
有序列表顧名思義有順序的列表
自動生成序號“1,2,3”,位置不能顛倒
<ol> 中只能嵌套<li>標簽
<li>可以放任何標簽


3.3自定義列表【重點】
- 自定義列表是對術語或名詞進行解釋和描述,自定義列表前面沒有任何符號。
語法格式:
<dl>
<dt> 名詞</dt>
<dd>解釋</dd>
<dd>解釋2</dd>
</dl>
*css可以修飾前面空格,可以重復dt。dt和dd屬于同級關系。
dt、dd以內 不允許出現(xiàn)其他標簽。
一個dt引領多個dd標簽
總結:常用列表只有無序列表和自定義列表。
表單
4.1表單的組成
4.1.1需要表單的原因 收集用戶信息
4.1.2.表單的組成 表單域 表單控件(表單元素) 提示信息
- 表單域 包含單元元素的區(qū)域
- 表單控件(表單元素) 每一個小方塊和圓點
- 提示信息 在控件旁邊的信息

4.2表單域
- 表單域 <form> 包含單元元素的區(qū)域
實現(xiàn)用戶信息的收集和傳遞;即把表單域范圍內的表單元素提交給服務器。
<form action="url地址" method="提交方式" name="表單域名稱">
常用屬性:
- 屬性 屬性值 作用
- action url地址 用于指定接收并處理表單數(shù)據(jù)的服務器程序的url地址
- method get、post 用于設置表單數(shù)據(jù)的提交方式,其取值為get或post
- name 名稱 用于指定表單的名稱,以區(qū)分同一個頁面中的多個表單域
4.3表單控件
表單控件:允許用戶在表單中輸入或者選擇內容的控件
4.3.1文本框 & 密碼框之input輸入表單元素
1.input輸入表單元素
.input 是輸入的意思,用戶輸入內容
語法規(guī)范:
<input tape="屬性值"/> 這是一個單標簽
type 屬性設置不同的屬性值用來指定不同控件的類型
附圖:

text 文本框 用戶可以輸入文字
password 密碼框
eg:
- <from>
- 用戶名:<input type="text"> <br>
- 密碼:<input type="password"> <br>
- </from>
4.3.2單選框和復選框
- <!--單選框-->
- <from>
- 性別:男<input type="radio> 女<input type="radio> (4.3.2)
- 性別:男<input type="radio name="sex"> 女<input type="radio" name="sex"> (4.3.3)
- </from>
- <!--多選框-->
- <from>
- 愛好:吃飯<input type="checkbook"> 睡覺<input type="checkbook"> 打豆豆<input type="checkbook">
- </from>
4.3.3 name屬性&value屬性
其他常見屬性

4.3.4name 取表單名
- <from>
- 用戶名:<input type="text" name="usename"> <br>
- 密碼:<input type="password" name="pwd"> <br>
- </from>
- <!--單選框-->
- <from>
- 性別:男<input type="radio name="sex"> 女<input type="radio" name="sex">
- </from >
- <!--多選框-->
- <from>
- 愛好:吃飯<input type="checkbook" name="hobyy"> 睡覺<input type="checkbook" name="hobyy"> 打豆豆<input type="checkbook" name="hobyy">
- </from>
4.3.5value 值
- <from>
- 用戶名:<input type="text" name="usename" value= "請輸入姓名"> <br>
- </from>
* 注釋:name和value是每一個表單元素都有的屬性值,主要給后臺人員提供。
*name 取表單名,單選框和復選框要有相同的name值
4.3.6checked 默認值 當頁面打開默認選擇
- <from>
- 性別:男<input type="radio name="sex" checked="checked"> 女<input type="radio" name="sex">
- </from >
4.3.7maxlength (最大長度值)
- <from>
- 用戶名:<input type="text" name="usename" value= "請輸入姓名" maxlength ="6"> <br>
- </from>
//正擇表達式
4.3.8 submit 提交按鈕 發(fā)送數(shù)據(jù)道服務器
- <input type="submit" value="免費注冊"> <br>
提交按鈕的作用是把表單域from的表單元素的值提交給后臺服務器
4.3.9 reset 重新設置
- <input type="reset" value="重填"> <br>
4.3.10 button 按鈕
普通按鈕
- <input type="button" value="發(fā)短信"> <br>
4.3.11 file 文件域 上傳文件
- 上傳頭像<input type="file" value="發(fā)短信"> <br>
4.4<label>標簽
點擊label文本瀏覽器自動轉跳到對應表單元素
- <label for="nan">男</label>
- <input type="radio name="sex" id="nan" name=sex/>

4.5.select下拉表單元素
.select下拉表單元素
語法:
- <select>
- <option>選項</option>
- <option>選項</option>
- <option>選項</option>
- …
- </select>
<option selected="selected">選項</option>
4.6.textarea 文本域元素
文本域元素多行文字
<textarea row="3" cols="20">
文本內容
</textarea>
了解一下:
cols=“每行中的字符數(shù)”
rows=“顯示的行數(shù)”
在實際開發(fā)中通常使用css來結局顯示大小,屬于這里可以不用記。
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
- css可以去掉有序列表的小圓點
- 無序列表前面沒有順序
3.2有序列表(了解)
有序列表顧名思義有順序的列表
自動生成序號“1,2,3”,位置不能顛倒
<ol> 中只能嵌套<li>標簽
<li>可以放任何標簽


3.3自定義列表【重點】
- 自定義列表是對術語或名詞進行解釋和描述,自定義列表前面沒有任何符號。
語法格式:
<dl>
<dt> 名詞</dt>
<dd>解釋</dd>
<dd>解釋2</dd>
</dl>
*css可以修飾前面空格,可以重復dt。dt和dd屬于同級關系。
dt、dd以內 不允許出現(xiàn)其他標簽。
一個dt引領多個dd標簽
總結:常用列表只有無序列表和自定義列表。
表單
4.1表單的組成
4.1.1需要表單的原因 收集用戶信息
4.1.2.表單的組成 表單域 表單控件(表單元素) 提示信息
- 表單域 包含單元元素的區(qū)域
- 表單控件(表單元素) 每一個小方塊和圓點
- 提示信息 在控件旁邊的信息

4.2表單域
- 表單域 <form> 包含單元元素的區(qū)域
實現(xiàn)用戶信息的收集和傳遞;即把表單域范圍內的表單元素提交給服務器。
語法格式:
<form action="url地址" method="提交方式" name="表單域名稱">
常用屬性:
- 屬性 屬性值 作用
- action url地址 用于指定接收并處理表單數(shù)據(jù)的服務器程序的url地址
- method get、post 用于設置表單數(shù)據(jù)的提交方式,其取值為get或post
- name 名稱 用于指定表單的名稱,以區(qū)分同一個頁面中的多個表單域
4.3表單控件
表單控件:允許用戶在表單中輸入或者選擇內容的控件
4.3.1文本框 & 密碼框之input輸入表單元素
1.input輸入表單元素
.input 是輸入的意思,用戶輸入內容
語法規(guī)范:
<input tape="屬性值"/> 這是一個單標簽
type 屬性設置不同的屬性值用來指定不同控件的類型
附圖:

text 文本框 用戶可以輸入文字
password 密碼框
eg:
- <from>
- 用戶名:<input type="text"> <br>
- 密碼:<input type="password"> <br>
- </from>
4.3.2單選框和復選框
- <!--單選框-->
- <from>
- 性別:男<input type="radio> 女<input type="radio> (4.3.2)
- 性別:男<input type="radio name="sex"> 女<input type="radio" name="sex"> (4.3.3)
- </from>
- <!--多選框-->
- <from>
- 愛好:吃飯<input type="checkbook"> 睡覺<input type="checkbook"> 打豆豆<input type="checkbook">
- </from>
4.3.3 name屬性&value屬性
其他常見屬性

4.3.4name 取表單名
- <from>
- 用戶名:<input type="text" name="usename"> <br>
- 密碼:<input type="password" name="pwd"> <br>
- </from>
- <!--單選框-->
- <from>
- 性別:男<input type="radio name="sex"> 女<input type="radio" name="sex">
- </from >
- <!--多選框-->
- <from>
- 愛好:吃飯<input type="checkbook" name="hobyy"> 睡覺<input type="checkbook" name="hobyy"> 打豆豆<input type="checkbook" name="hobyy">
- </from>
4.3.5value 值
- <from>
- 用戶名:<input type="text" name="usename" value= "請輸入姓名"> <br>
- </from>
* 注釋:name和value是每一個表單元素都有的屬性值,主要給后臺人員提供。
*name 取表單名,單選框和復選框要有相同的name值
4.3.6checked 默認值 當頁面打開默認選擇
- <from>
- 性別:男<input type="radio name="sex" checked="checked"> 女<input type="radio" name="sex">
- </from >
4.3.7maxlength (最大長度值)
- <from>
- 用戶名:<input type="text" name="usename" value= "請輸入姓名" maxlength ="6"> <br>
- </from>
//正擇表達式
4.3.8 submit 提交按鈕 發(fā)送數(shù)據(jù)道服務器
- <input type="submit" value="免費注冊"> <br>
提交按鈕的作用是把表單域from的表單元素的值提交給后臺服務器
4.3.9 reset 重新設置
- <input type="reset" value="重填"> <br>
4.3.10 button 按鈕
普通按鈕
- <input type="button" value="發(fā)短信"> <br>
4.3.11 file 文件域 上傳文件
- 上傳頭像<input type="file" value="發(fā)短信"> <br>
4.4<label>標簽
點擊label文本瀏覽器自動轉跳到對應表單元素
- <label for="nan">男</label>
- <input type="radio name="sex" id="nan" name=sex/>

4.5.select下拉表單元素
.select下拉表單元素
語法:
- <select>
- <option>選項</option>
- <option>選項</option>
- <option>選項</option>
- …
- </select>
<option selected="selected">選項</option>
4.6.textarea 文本域元素
文本域元素多行文字
<textarea row="3" cols="20">
文本內容
</textarea>
了解一下:
cols=“每行中的字符數(shù)”
rows=“顯示的行數(shù)”
在實際開發(fā)中通常使用css來結局顯示大小,屬于這里可以不用記。