HTML
Ａ．媒体元素
１.视频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object> </video>
<!--视频-->
<video>
<source src="imags/vivi.mp4" autofocus>
该浏览器不支持视频播放
</video>
２.音频
<!--音频-->
<audio controls >
<source src="imags/vivi.mp3" autofocus>
</audio>
B.内联框架
frameset 已经淘汰了
iframe 内联框架:通俗点将就是在页面里面嵌套页面 !
<!-- 页面嵌套页面-->
<a href="yemian.html" target="xiaoming">页面管理</a>
<a href="guanli.html" target="xiaoming">订单管理</a>
<a href="xinxi.html" target="xiaoming">信息管理</a>
<a href="xiaoliang.html" target="xiaoming">销量管理</a>
<br/> #换行
<iframe src="xinxi.html" frameborder="1" name="xiaoming" width="800px" height="500px"> </iframe>
<p>这是一个iframe 内联框架页面，相当于页面里面嵌套页面 <br/> 新的页面请求会在iframe内联框架组件中去显示</p>
C.表单(重要)
定义
表单用于系统的登录 ,注册等功能,是系统输入的重要组件,非常重要!
创建如下形式的表单。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#t { margin: 10px auto 0px; line-height: 30px}
td:first-child{ text-align: right; width: 150px }
td:last-child{ width:400px;}
</style>
</head>
<body>
<form action="iframe.html" method="post" enctype="multipart/form-data"> <!-- action 提交后跳转的页面 -->
<!-- name属性：是后期做数据必须要的属性，根据name来获取到组件输入的值 -->
<!-- method 有两种提交方式：-->
<!-- get提交方式，会将登录页面的组件name和value值显示在请求地址上，不安全，建议用post -->
<!-- post提交方式：更安全-->
<!-- enctype属性 ： 表单类型设置为多类型-->
<table id="t" border="1" width="500px" cellspacing="0">
<!-- 文本输入框-->
<tr>
<td>用户名：</td>
<td>
<input type="text" required placeholder="请输入姓名" name="username" value=""> <!-- 提示placeholder-->
<!-- <input> 里的标识 -->
<!--required 标识非空，为必填项，比如填入值才可以提交,所有的input属性都有这个属性 -->
<!--redonly属性标识这个组件，只读不能更改。-->
<!-- disabled标识为禁用 -->
<!-- pattern 是指定该文本框输入的验证规则，正则表达式 -->
</td>
</tr>
<!--密码输入框-->
<tr>
<td>密码：</td>
<td>
<input type="password" required placeholder="请输入密码" name="userpassword">
</td>
</tr>
<!--单选框-->
<tr>
<td>性别：</td>
<td>
<input type="radio" checked name="sex1" value="1"> 男
<input type="radio" name="sex1" value="0"> 女
</td>
</tr>
<!-- 文字部分也能选，添加label 标签 -->
<tr>
<td>性别(可点文字)：</td>
<td>
<input type="radio" checked name="sex" value="1" id="nan">
<label for="nan">男</label>
<input type="radio" name="sex" value="0" id="nv">
<label for="nv">女</label>
</td>
</tr>
<!-- 复选框-->
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" value="chouyan" name="aihao" checked> 抽烟<!--checked 默认选中-->
<input type="checkbox" value="hejiu" name="aihao" id="ai">
<label for="ai">喝酒</label>
<input type="checkbox" value="tangtou" name="aihao" id="ni">
<label for="ni">烫头</label>
</td>
</tr>
<!--下拉选框-->
<tr>
<td>地址：</td>
<td>
<!-- selected属性 是默认选择该项-->
<select name="dizhi" id="">
<option value="0">请选择</option>
<option value="1">南昌</option>
<option value="2">武汉</option>
<option value="3">北京</option>
</select>
</td>
</tr>
<!--文本域 表现形式不一样，可写多行-->
<tr>
<td>文本域：</td>
<td>
<textarea name="wenjianyu" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<!-- 文件域-->
<tr>
<td>文件域：</td>
<td>
<!-- 文件上传到后台，要设置为：enctype="multipart/form-data" 这个多类型-->
<input type="file" name="wenjianyu">
</td>
</tr>
<!--取色器 -->
<tr>
<td>取色器：</td>
<td>
<input type="color" name="color">
</td>
</tr>
<!-- 日期-->
<tr>
<td>日期：</td>
<td>
<input type="date">
</td>
</tr>
<!--选择月份-->
<tr>
<td>年-月</td>
<td>
<input type="month">
</td>
</tr>
<!--选择周-->
<tr>
<td>周</td>
<td>
<input type="week">
</td>
</tr>
<!-- 数字1：-->
<tr>
<td>数字:</td>
<td>
<input type="number" min="1" max="100" step="6" value="10">
<!-- min :最小范围 max：最大范围 step：步长 value：初始值-->
</td>
</tr>
<!--数字2-->
<tr>
<td>数字2:</td>
<td>
<input type="range" onchange="javascipt:alert(this.value)">
<!-- 滑块也是数字的一种表现形式，返回一个整数，利用javascipt -->
</td>
</tr>
<!-- 隐藏域 -->
<tr>
<td>隐藏域</td>
<td>
<!-- 非常重要的组件，通常可以用来传递值，但是又不想显示到页面给别人看见 -->
<input type="hidden" name="yincangyu" value="100">
</td>
</tr>
<!--按钮-->
<tr>
<td colspan="2">
<input type="submit" value="提交按钮">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
