<!doctype html> <html> <head> <title>0702作業(yè)</title> <meta charset="UTF-8"> </head> <body> <!-- 無(wú)序列表 --> <ul> <li>PHP程序員從布衣到大牛的必經(jīng)之路</li> <li>全程直播實(shí)戰(zhàn)邊學(xué)邊練邊輔導(dǎo)</li> <li>線上***(第七期)</li> </ul> <hr> <!-- 表單結(jié)構(gòu)及input常用的type屬性 --> <form action="#" method="post"> <p> <label for="username">賬號(hào):</label> <input type="text" id="username" name="username" placeholder="請(qǐng)輸入賬號(hào)"> </p> <p> <label for="password">密碼:</label> <input type="password" id="password" name="password" placeholder="請(qǐng)輸入密碼"> </p> <p> <label for="email">郵箱:</label> <input type="email" id="email" name="email" placeholder="請(qǐng)輸入郵箱"> </p> <p> <label for="chifan">愛(ài)好:</label> <input type="checkbox" id="chifan" name="chifan"> <label for="chifan">吃飯</label> <input type="checkbox" id="shuijiao" name="shuijiao"> <label for="shuijiao">睡覺(jué)</label> <input type="checkbox" id="ddd" name="ddd"> <label for="ddd">打豆豆</label> </p> <p> <label for="nan">性別:</label> <input type="radio" id="nan" name="redio"> <label for="nan">男</label> <input type="radio" id="nv" name="redio"> <label for="nv">女</label> <input type="radio" id="bm" name="redio "> <label for="bm">保密</label> </p> <p> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="按鈕"> </p> </form> <hr> <!-- 表格的結(jié)構(gòu)及基本屬性的使用 --> <table width="400px" border="1px" align="left" cellspacing="0"> <caption>購(gòu)物車(chē)</caption> <thead> <tr bgcolor="pink"> <th>ID</th> <th>名稱(chēng)</th> <th>數(shù)量</th> <th>價(jià)錢(qián)</th> </tr> </thead> <tbody> <tr align="center" > <td width="50px">1</td> <td width="200px">洗發(fā)水</td> <td width="50px">2</td> <td rowspan="2">138元</td> </tr> <tr align="center"> <td>2</td> <td>沐浴露</td> <td>1</td> </tr> <tr align="center"> <td>3</td> <td>香皂</td> <td>3</td> <td>15元</td> </tr> <tr align="center"> <td colspan="2">合計(jì):</td> <td>6</td> <td>153元</td> </tr> </tbody> </table> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
針對(duì)以上代碼知識(shí)點(diǎn)做總結(jié):
一、 <!doctype html> 表示對(duì)此文檔類(lèi)型的聲明
<html>內(nèi)分為<head>和<body>兩大部分:
其中<head>:常放置<title>(標(biāo)題)、<meta>(字符編碼類(lèi)型)、<link>(css外部鏈接或標(biāo)題圖片的使用)、<script>(javascript外部鏈接)、<style>(css內(nèi)部樣式的使用)等等。
而<body>:是網(wǎng)頁(yè)布局的主體部分,頁(yè)面中所顯示的內(nèi)容在這里編譯。
二、無(wú)序列表
ul與li是父子關(guān)系組合。
三、表單
form標(biāo)簽內(nèi)的屬性:
action //表示表單要提交的鏈接。
method //表示表單提交的請(qǐng)求類(lèi)型 (get與post)。
name //表單的名稱(chēng)。
input標(biāo)簽type的表現(xiàn)形式有:
text //文本框 password //密碼框 radio //單選框 (name值需一致) checkbox //多選框
email //郵箱輸入框 submit//表單提交按鈕 reset //重置按鈕 button //純按鈕
input標(biāo)簽內(nèi)使用placehold屬性為輸入框內(nèi)的文字提示。
label中的屬性for值與input中ID值一致形成綁定關(guān)系。
四、表格:
caption標(biāo)簽是表格的標(biāo)題,居中于表格頭部
th標(biāo)簽是表頭部分,具有字體加粗的表現(xiàn)
align可以對(duì)文字的位置左中右的定位
bgcolor是對(duì)背景增加顏色
cellpadding是調(diào)整外邊框與文字間的距離
cellspacring 是調(diào)整內(nèi)邊框之間的距離
當(dāng)需要表格設(shè)置寬高時(shí)在<table>內(nèi)添加width、height標(biāo)簽。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)