|
<!DOCTYPE html>
<html>
<head>
<title>name</title>
</head>
<body>
<form action="#" method="get">
<p>姓名：<input type="text" name="UserName" placeholder="请输入姓名" autofocus autocomplete required /></p>
<p>密码：<input type="password" name="Pwd" accesskey="s" /></p>
<p>性别：<input type="radio" name="sex" />男<input type="radio" name="sex" />女</p>
<p>爱好：
<input type="checkbox" name="hobby" />足球
<input type="checkbox" name="hobby" />篮球
<input type="checkbox" name="hobby" />乒乓球
<input type="checkbox" name="hobby" />橄榄球
</p>
<p><input type="file" name="InputFile" multiple></p>
<p>
<!-- HTML5中的新属性 -->
邮件：<input type="email" name="email" /><br />
电话：<input type="tel" name="tel"><br /><br />
网址：<input type="url" name="url"><br /><br />
数字：<input type="number" name="number" /><br />
搜索：<input type="search" name="search" /><br />
拖动：<input type="range" name="range" /><br />
时间：<input type="time" name="time" /><br />
日期：<input type="date" name="date" /><br />
时期：<input type="datetime" name="datetime" /><br />
月份：<input type="month" name="month" /><br />
星期：<input type="week" name="week" /><br />
</p>
<p><input type="submit" name="" /></p>
</form>
</body>
</html>
阶段总结：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生档案</title>
</head>
<body>
<form action="#" name="StuInfo">
<fieldset>
<legend>学生档案</legend>
<p>姓名：<input type="text" name="UserName" placeholder="请输入学生名字" autofocus /></p>
<p>手机：<input type="tel" name="tel" /></p>
<p>邮箱：<input type="email" name="email"></p>
<p>
学院：
<select>
<option selected="selected">信工院</option>
<option>化工院</option>
<option>新闻院</option>
<option>机械院</option>
</select>
</p>
<p>
就业：
<input type="text" list="career" />
<datalist id="career">
<option>PHP</option>
<option>JAVA</option>
<option>JAVASCRIPT</option>
<option>Linux</option>
</datalist>
</p>
<p>出生日期：<input type="date" name="date" /></p>
<p>成绩：<input type="number" name="chengji" /></p>
<p>毕业时间：<input type="datetime" name="biyeshijian" /></p>
<input type="submit" name="submit" />
</fieldset>
</form>
</body>
</html>
label标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Label标签</title>
</head>
<body>
<h3>label标签的使用</h3>
<!-- 未使用label标签时，点击“输入账号”，没有反应，需要鼠标点击输入框才能开始输入内容 -->
输入账号：<input type="text" /><br />
<!-- 用来label直接进行包裹之后，点击“输入账号”，就可以输入内容 -->
<label>输入账号：<input type="text" /></label><br />
<!-- 如果label里面有多个标签，可以通过for id的格式来进行,下例就是定位到输入密码 -->
<label for="password">
输入账号：<input type="text" id="UserName" />
输入密码：<input type="password" id="password" />
</label>
</body>
</html>
媒体标签：
audio标签：
video标签：注意三个属性，autoplay，controls，loop；
embed标签：媒体播放标签；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多媒体标签</title>
</head>
<body>
<iframe height=498 width=510 src='http://player.youku.com/embed/XNDA4MTExMDY3Mg==' frameborder=0 'allowfullscreen'></iframe>
<br /><br /><br /><br />
<embed src='http://player.youku.com/player.php/sid/XNDA4MTExMDY3Mg==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
<br /><br /><br /><br />
http://player.youku.com/player.php/sid/XNDA4MTExMDY3Mg==/v.swf
</body>
</html>
来源：http://www./content-4-129351.html
|
