Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 日本亚洲精品色婷婷在线影院,欧美多人换爱交换乱理伦片,综合精品在线 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          HTML從入門到放棄04講“列表滾滾”
          
        
           
          
	
	
          
		HTML從入門到放棄04講“列表滾滾”
          
                        
          介：列表大家都應(yīng)該都多少有點了解，列表是什么呢？你像課本目錄，大家都看過那就是最熟悉的列表了，各位原諒我智商有限，我只能舉這么一個不是例子的例子！好，話不多說，切入正題了！
          工具軟件：大家平常有什么好的工具軟件可在下面評論下！新手的話我推薦1.dreamever 2.notepad++ 3.HBuilder 這3個里的任意一個！
          需求：任務(wù)1.在網(wǎng)頁上顯示：
          任務(wù)一效果圖
          任務(wù)2.在網(wǎng)頁上顯示：
          任務(wù)二效果圖
          代碼截圖：
          代碼截圖
          知識點分析：在html中，網(wǎng)頁列表分為：1.有序列表2.無序列表！
          有序列表用<ol>標(biāo)簽一般格式為<ol> <li>列表</li> </ol>,在<ol>標(biāo)簽中有一個重要屬性為type，可改變列表樣式大家可以自己試驗一下！
          無序列表用<ul>標(biāo)簽一般格式為<ul> <li>列表</li> </ul>,在<ul>標(biāo)簽中也有一個重要屬性type，同樣也是改變列表樣式，他跟<ol>標(biāo)簽的區(qū)別是一個按順序排列，一個無順序排列！
          好的，今天的課程就講到這里，大家想學(xué)什么在評論下方評論，有什么不會的不懂得也可評論，我會一一給大家回復(fù)，歡迎大家訂閱收藏點贊，想要了解更多的可以關(guān)注微信公眾號“武訊科技”！
          有下拉列表的表單
          題目只能有30個字，不能寫全，其實今天我們要學(xué)習(xí)的內(nèi)容有三個，第一，下拉列表表單，第二，多行文字輸入表單，第三，數(shù)據(jù)集表單。
          開始學(xué)習(xí)吧！
          前天和昨天我們在《HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作》和《HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作》中基本上把<input/>標(biāo)簽的type屬性里不同的值進(jìn)行了講解與實踐，今天我們來學(xué)習(xí)其他包含在<form></form>之間的元素。
          帶有下拉列表的表單
          我們在一些網(wǎng)站填寫注冊信息時，經(jīng)常會遇到選擇"生活所在地"的操作，因為中國的地名是固定的，因此頁面會為我們提供一個下拉列表選項，我們直接點選即可，就不需要輸入文字了，這樣操作的好處在于不會出現(xiàn)拼寫錯誤。例如：
          寫這個功能我們需要介紹一組新標(biāo)簽<select></select>。"select"（選擇）。在這個標(biāo)簽中再添加<option></option>。"option"（選項）。這樣就可以寫出帶有下拉列表的表單了，示例代碼如下：
          <select><option></option></select>
          這段代碼我們繼續(xù)在昨天的"表單.html"文件中添加即可，在<input type="image" src="img/示例圖片/submit.jpg"/><br>這段代碼之前即可！與這個圖片提交按鈕共用一個<form></form>標(biāo)簽！
          下面我們?yōu)槎噙x表單添加名稱，示例代碼如下：
          請選擇省份<select><option></option></select>
          下面我們添加不同選項，示例代碼如下：
          請選擇省份
  <select >
  <option >河北</option>
  <option >山東</option>
  <option >河南</option>
  <option >海南</option>
  <option >江蘇</option>
  <option >安徽</option>
  </select>
  <br><br>
          為了規(guī)范起見，我們?yōu)楸韱涡畔⑻砑觧ame和value屬性，示例代碼如下：
          請選擇省份
  <select name="province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan">河南</option>
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江蘇</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br>
          大家要注意的是，在下拉列表表單中，name寫在<select>中，value寫在<option>中。
          頁面效果如下：
          這里告訴大家一個規(guī)律，下拉列表表單默認(rèn)顯示第一個<option></option>中的文字內(nèi)容。
          如果您想改變這個默認(rèn)顯示，請在需要顯示的<option>中添加selected屬性，并賦值為"selected"。
          示例代碼如下：
          請選擇省份
  <select name="province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan" selected="selected">河南</option>
 <!--選中這個選項--><option value="Hainan">海南</option><option value="Jiangsu">江蘇</option><option value="Anhui">安徽</option></select><br><br>
          頁面效果如圖：
          多行文字輸入表單
          我們在西瓜視頻上發(fā)布視頻時會被要求填寫視頻描述，頁面中的輸入框不是像下圖這么短的單行輸入框。
          而是多行輸入框，如圖：
          使用<textarea></textarea>標(biāo)簽即可添加這樣的輸入框，不過要設(shè)置row（列）和cols（行）屬性的數(shù)值。示例代碼如下：
          <br>請簡要描述您的劇本的情節(jié)<br><textarea row="3" cols="20"></textarea><br>
          這段代碼添加到</select><br><br>之后，與其共同使用一個<form></form>標(biāo)簽。
          下面我們?yōu)檫@個多行輸入框添加一些提示和限制。
          首先，添加提示文字，和type="text"的<input/>標(biāo)簽一樣，都是使用placeholder屬性。
          第二，我們限制一下字?jǐn)?shù)，使用maxlength（最大長度）屬性。
          第三，在頁面加載完成后，直接讓光標(biāo)停留在輸入框中，使用autofocus屬性。
          下面看看如何寫吧，示例代碼如下：（不要忘記寫好name屬性?。?/p>
          <br>
請簡要描述您的劇本的情節(jié)<br>
<textarea row="3" cols="20" name="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea><br>
          頁面效果如圖：
          如果刷新頁面不能正確顯示，請嘗試關(guān)閉后重新打開！
          數(shù)據(jù)集表單
          數(shù)據(jù)集表單實際上就是一個將不同選項或信息打包上傳的設(shè)置。
          當(dāng)一組表單元素放到 <fieldset> 標(biāo)簽內(nèi)時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創(chuàng)建一個子表單來處理這些元素。（W3school）
          這個數(shù)據(jù)集有三個部分組成，首先是<fliedset></fliedset>,這個標(biāo)簽不會顯示，只是告訴瀏覽器這里的數(shù)據(jù)要打包。
          第二是<legend></legend>,"legend"(說明)，這里添加數(shù)據(jù)集名稱。
          第三就是我們之前學(xué)到的那些標(biāo)簽了。
          示例代碼如下：
          <fliedset> <legend>信息打包</legend> </fliedset>
          下面我們使用這段代碼把form2打包一下吧。示例代碼如下：
          <form>
  <fieldset><!--開始-->
  <legend>信息打包</legend><br>
  <!--標(biāo)題-->興趣愛好：<br>
  <input type="checkbox" name="hobby" value="reading"/>讀書
  <input type="checkbox" name="hobby" value="film"/>電影
  <input type="checkbox" name="hobby" value="painting"/>繪畫
  <input type="checkbox" name="hobby" value="music"/>音樂
  <br>
  最高學(xué)歷：<br>
  <input type="radio" name="education" value="highSchool"/>高中
  <input type="radio" name="education" value="bachelor"/>本科
  <input type="radio" name="education" value="master"/>碩士
  <input type="radio" name="education" value="doctor"/>博士
  <br>
  請選擇省份
  <select name="province">
  <option value="Hebei">河北</option>
  <option value="Shandong">山東</option>
  <option value="Henan" selected="selected">河南</option><!--選中這個選項-->
  <option value="Hainan">海南</option>
  <option value="Jiangsu">江蘇</option>
  <option value="Anhui">安徽</option>
  </select>
  <br><br><br>
  請簡要描述您的劇本的情節(jié)<br>
  <textarea row="3" cols="20" name="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea>
  <br>
  </fieldset><!--結(jié)尾-->
  <input type="image" src="img/示例圖片/submit.jpg"/><br>
  <input type="reset" /><br>
  <input type="submit" value="submit"/>
  </form>
          頁面效果如下：
          今天的內(nèi)容結(jié)束了！
          如果您喜歡我的教程請關(guān)注我，點贊也能讓我充滿動力！
          HTML完整學(xué)習(xí)目錄
          HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          表標(biāo)簽
          在html中列表分為無序列表、有序列表和自定義列表（項目列表）。接下來就看看他們有什么不同吧！
          作用：如果說table標(biāo)簽是用來顯示數(shù)據(jù)的，那么列表標(biāo)簽就是用來進(jìn)行html頁面布局的。
          • 無序列表
          語法：
          <ul>
	<li></li>  
</ul>
          <ul></ul>標(biāo)簽中只能且必須嵌套<li></li>標(biāo)簽。li標(biāo)簽之間沒有先后順序，是并列存在的。li標(biāo)簽里可以容納文本、數(shù)據(jù)、圖片、超鏈接等內(nèi)容。跟table一樣，列表標(biāo)簽也自帶樣式屬性，但為了代碼統(tǒng)一，我們還是會使用css來設(shè)置。
          代碼示例：
          <h2>無序列表：</h2>
    <ul>
        <li>蘋果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>
          運(yùn)行界面：
          • 有序列表
          語法：
          <ol>
 	<li></li> 
 </ol>
          <ol></ol>標(biāo)簽里面只能嵌套<li></li>標(biāo)簽，在這里li標(biāo)簽是有順序的。
          代碼示例：
          <h2>有序列表：</h2>
    <ol>
        <li>蘋果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ol>
          運(yùn)行界面：
          • 自定義列表
          語法：
          <dl>
	<dt></dt>
	<dd></dd>
</dl>
          <dl></dl>標(biāo)簽：定義列表
          <dt></dt>標(biāo)簽：列表標(biāo)題
          <dd></dd>標(biāo)簽：列表內(nèi)容
          一個dd標(biāo)簽是對dt標(biāo)簽標(biāo)題的說明。這兩個標(biāo)簽中可以包含任何標(biāo)簽。
          代碼示例：
          <h2>自定義列表：</h2>
    <!-- dl：外層標(biāo)簽  dt：項目標(biāo)題  dd：項目內(nèi)容 -->
    <dl>
        <dt>水果種類</dt>
        <dd>蘋果</dd>
        <dd>橘子</dd>
        <dd>香蕉</dd>
    </dl>
          運(yùn)行界面：

          表單標(biāo)簽
          作用：收集用戶信息。一般用在注冊界面等。
          組成：一個完整的表單中包含表單域（整個填寫界面所有信息）、表單控件（表單元素）和提示信息（表單控件的提示作用）3個部分。
          • 表單域
          表單域：是一個包含表單元素的區(qū)域。
          <form>標(biāo)簽用于定義表單域，實現(xiàn)用戶信息的收集和傳遞。
          作用：將其區(qū)域范圍內(nèi)的信息收集并傳送給服務(wù)器。
          語法：
          <form action=”url地址” method=”提交方式” name=”表單域名稱”>
各種表單控件
</form>
          注：action：url地址，指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
          method：用于設(shè)置表單數(shù)據(jù)的提交方式。
          method=”get”：提交數(shù)據(jù)時，地址欄可查看到數(shù)據(jù)。數(shù)據(jù)量少且安全級別不高時使用。
          method=”post”：提交數(shù)據(jù)時，地址欄數(shù)據(jù)是加密的。
          name：表單域的名稱。用于區(qū)分同一頁面下的不同表單域。
          • 表單控件
          1.input輸入表單元素：
          語法：<input type=””>，依據(jù)type屬性值不同區(qū)分不同控件。
          文本框：<input type=”text”>。單行輸入字段，默認(rèn)寬度20個字符。輸入的文字可見。
          密碼框：<input type=”password”>。輸入內(nèi)容默認(rèn)不可見。
          單選框：<input type=”radio”>，默認(rèn)情況下選中后無法取消。
          注：為實現(xiàn)多選一狀態(tài)，需要將所有的單選框控件具有同一個name名。
          復(fù)選框：<input type=”checkbox”>，選中后可以更改可以取消。
          提交按鈕：<input type=”submit”>，默認(rèn)按鈕中的提示文字是提交，可以通過value值進(jìn)行更改內(nèi)容。點擊提交按鈕后會把表單數(shù)據(jù)發(fā)送到服務(wù)器。
          重置按鈕：<input type=”reset”>，默認(rèn)按鈕中的提示文字是重置，可以通過value值進(jìn)行更改內(nèi)容。點擊后會清楚表單中的所有數(shù)據(jù)。
          普通按鈕：<input type=”button”>
          文件域：<input type=”file”>，用來選擇文件，一般適用于文件上傳。
          label標(biāo)簽：標(biāo)注標(biāo)簽，配合input控件一起使用
          作用：綁定表單控件，擴(kuò)大點擊范圍。
          當(dāng)點擊label標(biāo)簽的內(nèi)容時，系統(tǒng)會自動選中該表單控件。
          代碼示例：
          <h1>label標(biāo)簽</h1>
    <form>
        <label for="text">用戶名：</label>
        <input type="text" name="用戶名" id="text"><br>
        <label for="password">密碼：</label>
        <input type="password" id="password"><br>
        <label for="男">男</label>
        <input type="radio" name="sex" id="男">
        <label for="女">女</label>
        <input type="radio" name="sex" id="女"><br>
    </form>
          運(yùn)行界面：
          Input控件屬性：
          name:用戶自定義，提示input元素的名稱。給后臺工作人員的提示。
          value：用戶自定義，提示input元素的內(nèi)容值。給后臺的提示。在文本框控件中會顯示該內(nèi)容，單選框和復(fù)選框則顯示不出來。
          checked：默認(rèn)選中狀態(tài)。主要用于單選按鈕和復(fù)選按鈕中。
          maxlength：正整數(shù)，規(guī)定輸入字段中的字符最大長度。
          input代碼示例：
          <h2>表單標(biāo)簽</h2>
    <form>
        用戶名：<input type="text" maxlength="15" value="請輸入用戶名"><br>
        密  碼：<input type="password"><br>
        性  別：<input type="radio" name="sex" value="男">男   
				<input type="radio" name="sex" value="女">女<br>
        愛  好：<input type="checkbox" name="like" value="swim">游泳 
				<input type="checkbox" name="like" value="健身">健身 
        <input type="checkbox" name="like" value="run">跑步<br>
        <input type="submit">   
        <input type="reset"><br>
        <input type="submit" value="注冊">
        <input type="reset" value="清空"><br>
        <!-- 后期結(jié)合js搭配使用 -->
        <!-- 按鈕選框在默認(rèn)情況下是沒有文字內(nèi)容的，需要添加value值設(shè)置文字內(nèi)容 -->
        <input type="button" value="獲取短信驗證碼"><br>
        上傳頭像：<input type="file">
    </form>
          運(yùn)行界面：
          2.select下拉表單元素：
          使用場景：地址選擇、職業(yè)分類、學(xué)校分類等。
          select標(biāo)簽：定義下拉列表。
          語法：
          <select>
	<option></option>  
</select>
          代碼示例：
          <h1>下拉表單</h1>
    <form>
        <label for="adress">籍貫：</label>
        <select name="" id="">
            <option value="">北京</option>
            <option value="">河北</option>
            <option value="">上海</option>
            <option value="">廣州</option>
            <option value="">深圳</option>
        </select>
    </form>
          運(yùn)行界面：
          3.textrea文本域表單控件
          使用場景：留言、介紹、評論等。
          語法：
          <textrea rows=”” cols=””>文本內(nèi)容</textrea>
          跟文本框控件不同，它是多行文本輸入框，可以自行設(shè)定行數(shù)以及一行容納多少字?jǐn)?shù)。
          rows=“每行可輸入的字符數(shù)”，
          cols=“顯示的行數(shù)”。
          這兩個樣式屬性實際開發(fā)中大多使用css就可以改變操作。
          代碼示例：
          <h1>文本域表單元素</h1>
    <form action="">
        <label for="textrea">今日反饋：</label><br>
        <textarea name="" id="" cols="15" rows="10">今日反饋</textarea>
    </form>
          運(yùn)行界面：
          關(guān)于HTML基礎(chǔ)內(nèi)容就學(xué)習(xí)到這里了，明天練習(xí)一個綜合案例。對了，現(xiàn)在跟學(xué)的是黑馬前端的pink老師發(fā)布的基礎(chǔ)視頻，明天做的案例按照老師講解的案例去做。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
日韩AV片无码一区二区不卡|
在线不卡一区二区三区日韩|
国产精品一区二区综合|
一本色道久久综合一区|
人妻无码一区二区三区AV|
国产伦精品一区二区三区视频金莲|
97一区二区三区四区久久
|
麻豆视传媒一区二区三区|
国产凸凹视频一区二区|
亚洲欧美日韩中文字幕在线一区|
国产情侣一区二区|
无码国产精品一区二区免费模式|
香蕉久久ac一区二区三区|
国产精品毛片一区二区三区|
肥臀熟女一区二区三区|
少妇一晚三次一区二区三区|
美女毛片一区二区三区四区|
国产乱码精品一区二区三区中文|
亚洲中文字幕一区精品自拍|
日韩精品无码免费一区二区三区
|
蜜臀AV免费一区二区三区|
国产精品99无码一区二区|
中文字幕一区二区三区视频在线|
在线观看精品视频一区二区三区|
亚洲国产一区二区三区在线观看|
伊人久久精品一区二区三区|
中文字幕av一区|
精品亚洲福利一区二区|
日韩精品免费一区二区三区|
国产视频一区在线播放|
免费萌白酱国产一区二区|
一区二区三区精品视频|
日本一区二区三区在线观看|
久久高清一区二区三区
|
国产伦精品一区二区三区免费下载
|
亚洲午夜一区二区三区|
精品久久久中文字幕一区|
一区二区三区精品视频|
日韩久久精品一区二区三区|
一区二区三区在线免费|
国产一区麻豆剧传媒果冻精品|