027 H5常用标签_html-js-css

概述　　只记录一下比较有趣的知识点。一：新标签 1.选项列表datalist 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <input type="text

　　只记录一下比较有趣的知识点。

一：新标签

1.选项列表dataList

 1 <!DOCTYPE HTML> 2 <HTML lang="en"> 3 <head> 4     <Meta charset="UTF-8"> 5     <Title>document</Title> 6 </head> 7 <body> 8     <input type="text" List="sg"> 9     <dataList ID="sg">10         <option value="apple">苹果</option>11         <option value="banna">香蕉</option>12     </dataList>13 </body>14 </HTML>

2.效果

3.元素分类fIEldset

 1 <!DOCTYPE HTML> 2 <HTML lang="en"> 3 <head> 4     <Meta charset="UTF-8"> 5     <Title>document</Title> 6 </head> 7 <body> 8     <fIEldset> 9         <legend>用户登录</legend>10         用户：<input type="text"><br>11         密码：<input type="password">12     </fIEldset>13 </body>14 </HTML>

4.效果

二：表单属性

1.placeholder

 1 <!DOCTYPE HTML> 2 <HTML lang="en"> 3 <head> 4     <Meta charset="UTF-8"> 5     <Title>document</Title> 6 </head> 7 <body> 8     用户名：<input type="text" placeholder="请输入"> 9 </body>10 </HTML>

2.效果

3.autofocus

　　自动对焦

 1 <!DOCTYPE HTML> 2 <HTML lang="en"> 3 <head> 4     <Meta charset="UTF-8"> 5     <Title>document</Title> 6 </head> 7 <body> 8     用户名：<input type="text" placeholder="请输入" autofocus="autofocus"> 9 </body>10 </HTML>

4.效果

5.multiple多选

 1 <!DOCTYPE HTML> 2 <HTML lang="en"> 3 <head> 4     <Meta charset="UTF-8"> 5     <Title>document</Title> 6 </head> 7 <body> 8     上传：<input type="file" multiple> 9 </body>10 </HTML>