<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实例</title>
<style>
/*css的注释形式*//*嵌入css样式，即内部样式表*/
h2{font-size:20px;color:green;}
option{color:blueviolet;}
</style>
<link rel="stylesheet" href="./external%20style%20sheet.css">/*外部样式表*/
</head>
<body>
<h1>CSS实战第一天</h1>
<!--表单制作-->
<h2>HTML表单标签:</h2>
<form action="demo.html" method="post"><!--目标页面为demo.html,进入方式为post或者get-->
账号：<input type="text" name="uname"/><br/><br/><!--text单行输入框-->
密码：<input type="password" name="upass"/><br/><br/><!--密码框-->
<input type="submit" value="登录"/><!--submi或者reset等-->
</form>
<hr/>
<h2>问卷调查</h2>
<br/><br/><br/>
<label>
<form action="demo.html" method="post" >
<input type="hidden" name="id" value="100"/>
姓名：<input type="text" disabled name="uname" maxlength="8" size="10" value="lisa"/>
<br><br>
密码:<input type="password" name="upass"/><br><br>
性别：<input type="radio" name="sex" value="1"/>女
<input type="radio" checked name="sex" value="2"/>男<br/><br/>
爱好：<input type="checkbox" name="likes" value="1"/>睡觉
<input type="checkbox" name="likes" value="2"/>看电影
<input type="checkbox" checked name="likes" value="3"/>听歌
<input type="checkbox" checked name="likes" value="4"/>刷剧 <br/><br/>
头像：<input type="file" name="pic"/> <br/><br/>
邮箱：<input type="email" placeholder="请输入你的邮箱" name="pic"/><br/><br/>
年龄：<input type="number" min="18" max="99" name="pic"/><br/><br/>
指数：<input type="range" min="18" max="99" name="pic"/><br/><br/>
网址：<input type="ur1" value="https://www.bilibili.com/video/BV1pq4y1W7a1?p=6" readonly name="pic"/><br/><br/>
日期<input type="date" name="pic"/><br/><br/>
颜色<input type="color" name="pic"/><br/><br/>
学历<select name="education" id="">
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3" selected> 研究生</option>
<option value="4">博士</option>
</select><br/><br/>
简介：<textarea rows="10" cols="100" name="contents"> 临渊羡鱼，不如退而结网</textarea><br/><br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="普通按钮"/>
<input type="image" src="Capture002.png"/>
</form></label>
<br/><br/><hr/><br/><br/>
<h2>百度搜索</h2>
搜索：
<form action="demo.html" method="get" style="width:300px">
<input type="search" list="namelist" name="keywords"/>
<datalist id="namelist">
<option value="zhangsan">
<option value="lisi">
<option value="wangwu">
<option value="lisa">
</datalist>
<br/><br/>
<hr/>
城市：<select name="city">
<optgroup label="河北省">
<option>保定</option>
<option>石家庄</option>
</optgroup>
<optgroup label="福建">
<option>福州</option>
<option>泉州</option>
</optgroup>
</select><br/><br/><hr/>
<h2>HTML多媒体标签:</h2>
<audio src="音频链接" controls ><!--去掉controls为自动播放-->
你的浏览器不支持audio音频标签
</audio>
<audio controls>
<source src="音频链接" type="audio/mpeg"/>
你的浏览器不支持audio音频标签
</audio><br/><br/>
<video src="视频链接" controls width="400" height="400">
你的浏览器不支持video视频标签
</video><br/><br/>
<video controls="controls" width="400" poster="mateusz-klein-c6cScqrXegw-unsplash.jpg" height="400">
<source src="视频链接" type="video/mp4"/>
你的浏览器不支持video视频标签
</video><br/><br/>
<!--CSS网站检查和修改样式-->
</body>
</html>
浙公网安备 33010602011771号