day 09/10 代码练习

表格练习

<!--
合并单元格(难点):
跨行合并：rowspan    跨列合并：colspan
合并单元格的思想：
    将多个内容合并的时候，就会有多余的东西，把它删除。    例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。
    公式：  删除的个数  =  合并的个数  - 1   
   合并的顺序 先上   先左 
-->
<table border="1px" cellspacing="10px" cellpadding="10px" align="center">
		<caption>中国男篮</caption>
		<thead>
			<th></th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</thead>
		<tbody>	
			<tr>
				<td rowspan="2"></td>//跨行合并(竖向)
				<td>周琦</td>
				<td>男</td>
				<td>23</td>
			</tr>
			<tr>
				<td>易建联</td>
				<td>男</td>
				<td>35</td>
			</tr>
			<tr>
				<td colspan="4"></td>//跨列合并(横向)
			</tr>
		</tbody>
	</table>

表单练习

<form action="#" method="提交方式,get post">
		<!-- 
			get 将数据放在请求头中，把请求的数据放在地址栏里，缺点不安全，优点是速度快 200个字符
			post 将数据放在请求体，优点是安全，没有大小限制
		 -->
		<label>姓名：</label><input type="text" id="name" name="name">
		<br/>
		<label>年龄：</label><input type="text" id="age" name="age">
		<br/>
		<br/>
		<textarea cols="100" rows="10">
			
		</textarea>
		<br/>
		<br/>
		<select>
			<option>请选择</option>
			<option>浙江</option>
			<option selected="selected">安徽</option>
			<option>江苏</option>
		</select>
</form>

datalist标签练习

datalist 标签定义选项列表。请与 input 元素配合使用该元素

	<input type="text" placeholder="输入球员姓名" list="star" >
	<datalist id="star">
		<option>易建联</option>
		<option>周琦</option>
		<option>翟晓川</option>
		<option>郭艾伦</option>
		<option>蔡徐坤</option>
	</datalist>

fieldset标签练习

fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用
legend:标题

	<fieldset>
		<legend>用户登录</legend>
		用户名: <input type="text" /><br />
		密码: <input type="password" />
	</fieldset>

input标签练习

	<fieldset>
		<legend>学生档案思密达</legend>
		姓名：<input type="text" placeholder="请输入学生名字" />	<br/><br/>
		手机号：<input type="tel" /><br/><br/>
		邮箱：<input type="email" /><br/><br/>
		所属学院：<input type="text" placeholder="请选择学院" list="star" />
		<datalist id="star">
			<option>111</option>
			<option>222</option>
			<option>333</option>
		</datalist>
		<br/><br/>
		出生日期：<input type="date" /><br/><br/>
		成绩：<input type="text" /><br/><br/>
		毕业时间：<input type="date"/><br/><br/>
		<!--常用新属性-->
		<input type="text" autofocus>
		<input type="text" required>
		<input type="text" accesskey="s">
		
		<input type="submit" value="提交">
		<input type="reset" value="重置">
	</fieldset>

多媒体标签

• audio：播放音频
  autoplay 自动播放
  controls 是否显不默认播放控件
  loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环

<!-- 音频标签 -->
	<audio src="../../../John Mayer - Love Is A Verb (Album Version).mp3" autoplay controls loop="-1" ></audio>
	
	<!-- 为了浏览器兼容问题，通常放多种声音文件，mp3，ogg，wav -->
	<audio controls autoplay>
		<source src="datalist标签.html" type="">
		<source src="../../../John Mayer - Love Is A Verb (Album Version).mp3" type="">
	</audio>

• video：播放视频
  autoplay 自动播放
  controls 是否显示默认播放控件
  loop 循环播放
  width 设置播放窗口宽度
  height 设置播放窗口的高度

<!-- 视频标签 -->
	<video src="../../../8-3 缓存3-Last-Modified-If-Modified-Since.mp4" width="500px"></video>