日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) > 前端技术 > HTML >内容正文

HTML

2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单

發(fā)布時(shí)間：2025/3/21 HTML 29 豆豆
生活随笔 收集整理的這篇文章主要介紹了 2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

2017-2-15從0開始前端學(xué)習(xí)筆記-圖片-表格-表單

標(biāo)簽

圖片
圖片<img src="#" alt="文本說明 不能加載圖片時(shí)顯示" title="附加信息 鼠標(biāo)停留時(shí)顯示" />
img元素是內(nèi)聯(lián)元素 內(nèi)聯(lián)元素在塊級(jí)元素中不會(huì)另起一行顯示

align特性 align="left/right" left 文字在圖片左側(cè)顯示 right文字在圖片右側(cè)顯示
align="top/middle/bottom" 文字的第一行與圖片的上/中/下對(duì)齊

HTML5中使用figure元素將圖片和圖片說明關(guān)聯(lián)起來(lái)

<figure><img src="#" alt=" " title=" " align="left" /><figcaption>說明信息</figcaption> </figure>

表格

  • 基本的表格結(jié)構(gòu)
    <table></table>用來(lái)創(chuàng)建表格 表格內(nèi)容逐行編寫
    <tr></tr>表格的每行以tr開始
    <td></td>每個(gè)單元格為td
    <th></th>th表示每行或列的標(biāo)題 具有scope特性 scope="row/col" 表示行/列標(biāo)題
    <th scope="row/col"></th>
    跨列/跨行
    td的特性rowspan/colspan <td rowsapn="2">跨行</td> <td colspan="4">跨列</td>

  • 長(zhǎng)表格
    .<thead>標(biāo)題</thead>表格的標(biāo)題在thead元素中
    .<tbody>主體</tbody>表格的主體在tboody元素中
    .<tfoot>腳注</tfoot>表格的腳注放在tfoot元素中
    表格的樣式用css實(shí)現(xiàn) 舊代碼中可能會(huì)在表格元素中添加特性

表單

  • 表單結(jié)構(gòu)
    表單控件在form元素中<form action="#服務(wù)器上的一個(gè)URL" method="post/get">表單</form>
    使用get方法時(shí)，表單中的值被附加在action特性所指定的url末尾 適用于短表單 例如搜索框 或者只從服務(wù)器檢索數(shù)據(jù)的情形
    使用post方法時(shí)表單中的值被放在http頭信息中進(jìn)行發(fā)送。 一般適用一下：允許用戶上傳文件 非常長(zhǎng) 包含敏感信息 修改數(shù)據(jù)庫(kù)中信息

  • 單行文本框/密碼框

<form><p>用戶名：<input type="text" name="與數(shù)據(jù)庫(kù)一致" maxlength="30" size="15"/></p><p>密碼：<input type="password" name="" maxlength="6" size="15"/></p> </form>

  • 文本域（多行文本）
    textarea<textarea name="content" cols="20" rows="4">預(yù)設(shè)消息<textarea>cols特性指定文本域的寬度 rows特性指定占據(jù)的行數(shù)

  • 單選按鈕/復(fù)選框
    <input type="radio" name="" value="" checked="checked"/>value值為選中時(shí)向服務(wù)器提交的值 checked值為checked時(shí)，加載網(wǎng)頁(yè)默認(rèn)選項(xiàng)
    <input type="checkbox" name="" value="" checked="checked"/>

  • 下拉列表框/多選框
    <select name=""></select>創(chuàng)建下拉列表框name特性指這個(gè)表單控件的名稱，此名稱與用戶選擇的值一并發(fā)到服務(wù)器

<select name=" " ><option value=" " select="select">select為默認(rèn)選項(xiàng)</option><option value=" ">value特性指定選項(xiàng)的值</option> </select>

<select name="" size="3" multiple="multiple">size指定下拉框顯示的個(gè)數(shù) multiple特性指定用戶可以選擇多個(gè)選項(xiàng)</select>

  • 文件上傳域/提交按鈕/圖像按鈕
    <input type="file" name=" " />
    <input type="submit" name="" value=""/> name特性可以使用但不是必須得 value特性為按鈕顯示的文本
    <input type="image" src="#" alt="" width="" height=""/>圖像按鈕，使用圖像作為提交按鈕

  • 按鈕和隱藏控件
    button元素 <button ></button>可嵌套img元素
    <input type="hidden" name=" " value=" "/>

  • 標(biāo)簽表單控件/組合表單元素
    可以使用兩種方法使用label元素
    1.將文本說明和表單輸入框全部包圍起來(lái)<label>個(gè)人介紹：<input type="text" name="" placeholder="占位符 預(yù)輸入"/></label>
    2.與表單控件分開用for特性關(guān)聯(lián) <label for="male">male<label> <input id="male" type="radio" value="m" name=" "/>
    組合表單元素
    fieldest元素 可將相關(guān)表單控件放在<fieldset></fieldset>中分成一組
    legend元素跟在fieldest后包含一個(gè)標(biāo)題 <fieldset><legend>標(biāo)題</legend></fieldset>

  • html5控件
    表單驗(yàn)證<label><input type="password" name="" required="required"/></label>
    日期控件<input type="date" name=""/>
    電子郵件（email）、URL（url）、搜索輸入控件（search） placeholder特性 在輸入前顯示的內(nèi)容
    <input type="search" name="" palceholder="請(qǐng)輸入關(guān)鍵詞"/>
    實(shí)例

<html><head><title>Forms</title></head><body><form action="http://www.example.com/review.php" method="get"><fieldset><legend>Your Details:</legend><label>Name: <input type="text" name="name" size="30" maxlength="100"></label><br /><label>Email: <input type="email" name="email" size="30" maxlength="100"></label><br /></fieldset><br /><fieldset><legend>Your Review:</legend><p><label for="hear-about">How did you hear about us?</label><select name="referrer" id="hear-about"><option value="google">Google</option><option value="friend">Friend</option><option value="advert">Advert</option><option value="other">Other</option></select></p><p>Would you visit again?<br /><label><input type="radio" name="rating" value="yes" /> Yes</label><label><input type="radio" name="rating" value="no" /> No</label><label><input type="radio" name="rating" value="maybe" /> Maybe</label></p><p><label for="comments">Comments:</label><br /><textarea rows="4" cols="40" id="comments"></textarea></p><label><input type="checkbox" name="subscribe" checked="checked" /> Sign me up for email updates</label><br /><input type="submit" value="Submit review" /></fieldset></form></body> </html>

轉(zhuǎn)載于:https://www.cnblogs.com/wangxiaofeng5277/p/6406201.html

總結(jié)

以上是生活随笔為你收集整理的2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。