学习web前端第二天

学习web前端的第二天

今天学习的也是html,今天一天就把html所有的内容讲完了,下午的时候硬件出了点问题一下午都没学到什么东西，但是html算是学完了接下来该学css了.
接下来开始说我们今天学习的内容
首先是表格的标签和属性

1.table属性

width是高
height是宽
align是对齐分左对齐left右对齐right中间对齐center
border 外边框 
bgcolor 背景色
background 背景图片
Cellspacing       单元格间距(单元格和单元格的距离) 一般情况写0
Cellpadding       单元格边距（表格边框与内容的距离） 一般情况写0

(1)表格内tr属性

 align 水平对齐
    (left/center/right 左/中/右对齐)对应水平对齐
    valign 垂直对齐
	(top/middle/bottom 上/中/下)对应垂直对齐
	bgcolor 背景色

(2)表格内td的基本属性

width(宽)、height(高)(单位是像素px或者是%)
align(水平对齐)、valign(垂直对齐)  
bgcolor 背景色
background 指定背景图片
colspan 水平合并 合并多列(就是横着占了多个单元格)
rowspan 垂直合并 合并多列(就是竖着占了多个单元格)

(3)表头th标签

<th>是特殊的单元格，文字会自动加粗、居中。它的用法是取代<td>的位置即可（用作表头第一行）

举例为：

<table border="1" width="300">
		<tr>
		<th>餐饮类型</th>
		<th>主要菜系</th>
		<th>价格</th>
		</tr>
		<tr>
			<td>中餐厅</td>
			<td>生猛海鲜</td>
			<td>1000元</td>
		</tr>
	</table>

表格主体tbody标签

表格可以在table里直接用tr和td但是也可以用页眉页脚和主体来表示简单来说就是头身体脚。
 thead  表格页眉（头部）只能出现一次
 tbody  表格主体可以出现多次
 tfoot   表格页脚（结尾）只能出现一次
		   以上三个标签结合使用，可将表格中的一行或几行合成一组
		   举例为:
		   <table>
			 <thead><tr></tr>….</thead>
			 <tbody><tr></tr>….</tbody>
		     <tfoot><tr></tr>…. </tfoot>
			 </table>

二、表单属性

1.	表单的概念
    表单在网页中主要负责数据采集功能，表单的标记是:<form></form>
2.	表单的属性
   1. action属性：设置表单的提交地址（表单提交的url）指定表单提交后由服务器上的哪个处理程序进行处理
2  method属性：设置表单的提交方法， 属性值为get、post提交方式
	3   name属性：设置表单的名称
4   target属性：设置表单的打开方式，  属性值可以是_blank、_self。_self在原窗口中打开，为默认值。_blank
在新窗口打开
3.	enctype:默认编码  或者指定二进制流  【附件的提交形式】
4.	method的值为get:它是通过URL来传递表单数据的，表单元素的数据在地址栏可见，而且有大小限制，传数据量小一般不大于2KB 
  	    method的值为post:它是通过请求正文传递表单数据的，URL不可见表单元素数据，比较安全，而且没有大小限制，但往往服务器会控制
3.	输入标记
     表单元素中输入标签是<input/>,常用属性有type（类型）、name（名称）、value（值）、checked（默认选中）

三、HTML常用的表单控件

1.文本框(text)
文本框：主要用于输入单行文本内容。代码如下:
姓名：<input  type="text" />
账号：<input type="text" name="username" 	value="yolanda" readonly="readonly" /><br>
2.	密码框
密码框：主要用于输入一些保密信息，代码格式如下：
密码：<input type="password"/>
 <label for="mm">密码：</label><input type="password" 	name="pass" maxlength="5" id="mm" size="4"/><br />
分组：<fieldset><!--分组-->
	<legend>用户登录</legend>
	</fieldset>
3.	单选框
  单选框主要是让网页浏览者在一组选项里选择一个。
  Name属性定义单选框的名称，单选框都是以组为单位使用的，在同一组中的选项必须使用同一名称【name="gender"】。
			代码格式如下：
性别：<input type="radio" name="sex"  checked />男 
<input type="radio" name="sex"  />女
       		效果如下：

性别：<input type="radio" name="gender" value="0" checked="checked"/>男
	  <input type="radio" name="gender" value="1" id="female" /><label for="female">女</label><br />
4   复选框
  复选框主要是让网页浏览者在一组选项里同时选择多个选项。
选中checked代码格式如下：【disabled="disabled"足球】
		爱好：读书<input  type="checkbox"   />
		听歌<input  type="checkbox"  checked />
		阅读<input  type="checkbox"   />
兴趣爱好：<input type="checkbox" name="hobby" value="football" disabled="disabled"/>足球
			<input type="checkbox" name="hobby" value="basketball" />篮球球
			 <input type="checkbox" name="hobby" value="music" />音乐<br />
扩展：隐藏域：<input type="hidden" name="money" value="200000" /><br />
图像域：<input type="image" src="img/logo.jpg" width="100px" height="30px"/><br />
5.	文件域
 	文件域主要是让网页浏览者上传文件。
代码格式如下：
上传文件：<input type="file"/>
6.	提交按钮
	提交按钮用来将输入的信息提交到服务器。Value属性定义按钮的显示文字。
代码格式如下：
<input type="submit" value="提交" />
7.	重置按钮
	重置按钮用来重置表单中输入的信息。代码格式如下：
<input type="reset"value="重置"/>
8.	图片域
		图像域标记
		代码格式如下:
<input type=”image” src=”图片的路径”  />


 9.	下拉列表
下拉菜单主要用于在有限的空间里设置多个选项。
下拉菜单选中状态给option添加 selected
代码格式如下：
<select>
<option></option>
     …
</select>
居住城市(下拉菜单)：
			<select name="city">
				<option value="010">北京</option>
				<option value="021" selected="selected">上海</option>
				<option>深圳</option>
				<option>厦门</option>				
			</select><br />
10.	文本域标记及属性
文本域主要用于输入较长的文本信息。
代码格式如下：
<textarea cols="30" rows="5">默认文字</textarea>
效果：
Cols属性：定义文本域的宽度    （列）
rows属性：定义文本域的高度     （行）

四、HTML5新增表单控件

1.	HTML5文本框及placeholder属性 
	当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。
代码格式如下：
<input type="text" placeholder="请输入账号"/>
一般主要用于提示输入等

2.  HTML5文本框类型tel
   提供专门用于输入电话号码的文本框。它并不限定只输入数字，因为很多的电话号码
还包括其他字符（如+ 、-、(、)等），如86-0536-8888888 
代码格式如下：   pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式 -->
	   <input type="tel" pattern="[0-9]{11}"/>
电话号码：<input type="tel" pattern="[0-9]{11}" placeholder="输入11位号码" />
电话号码：<input type="tel"/>
3.	HTML5 文本框类型  url   网址
	url类型的input 元素提供用于输入url地址这类特殊文本的文本框．当提交表单时，如果所输入的内容是url地址格式的文本，则会提交数据到服务器，如果不是url地址格式的文本，则不允许提交．
<!--我们在浏览器的地址栏里输入的网站地址叫做URL (Uniform Resource Locator，统一资源定位符)。就像每家每户都有一个门牌地址一样，每个网页也都有一个Internet地址http://：代表超文本传输协议-->
代码如下：
<input type="url"/>
<input type="submit" value="提交">
4.	HTML   Email邮件
	 Email类型的input元素是一种专门用于输入e-mail地址在文本输入框，在提交表单时，会自动验证输入框的值．如果不是一个有效的e-mail地址,则该输入框不允许提交该表单．
代码如下：
<!--输入邮箱地址必须包含@符号-->
			<input type="email"/>
<input type="submit" value="提交">
5.HTML5文本框类型number   数字   max最大值  min最小值  step步长
	Number类型的input 元素提供用于输入数值的文本框．我们还可以设定对所接受数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内，则会出现错误提示。
	代码如下：
	step（步长）属性值倍数    max最大值      min最小值
	<input type="number"/>
	<input type="submit" value="提交">
6.	HTML5文本框类型date
    Date类型的日期检出器用于选取日、月、年，即选择一个具体的日期，如2016年３月４日，选择后会以2016-03-04的形式显示
    代码如下：
			<input type="date"/>
<input type="submit" value="提交">
7.视频
<video width="320" height="240" controls>
  <source src="mydog.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
8.音频
    <audio controls>
    <source src="horse.mp3" type="audio/mpeg">
    <source src="horse.ogg" type="audio/ogg">
    Your browser does not support this audio format.
</audio>

最后我们还讲了一个用表单套表格的案例:
(里面还夹杂了一些js二级联动是自己多学了一点)
代码为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单练习</title>
		<META NAME="Generator" CONTENT="EditPlus">
		<script language="JavaScript" type="text/javascript">
		//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
     var city=[
     ["东城区","西城区","崇文区","朝阳区"],
     ["石家庄","唐山","邯郸","邢台"],
     ["青岛","济南","德州","济南"]
     ];

     function getCity(){
         //获得省份下拉框的对象
         var sltProvince=document.form1.province;
         //获得城市下拉框的对象
         var sltCity=document.form1.city;         
         //得到对应省份的城市数组
         var provinceCity=city[sltProvince.selectedIndex - 1];
 
         //清空城市下拉框，仅留提示选项
         sltCity.length=1;
 
         //将城市数组中的值填充到城市下拉框中
         for(var i=0;i<provinceCity.length;i++){
             sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
         }
     }
 </script>
	</head>
	<body>
		<form action="" name="form1" method="post">
<table width="500" height="380" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">填写注册资料</td>
</tr>
<tr>
<td width="120" align="right">姓名：</td>
<td width="380"><input type="text" /></td>
</tr>
	<tr>
<td align="right">密码：</td>
<td><input type="password" /></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input type="password" /></td>
</tr>
<tr>
<td align="right">密码提示问题：</td>
<td>
<select>
<option value="">请选择一个问题</option>
		<option value="1">你小学班主任是谁?</option>
		<option value="2">你初中班主任是谁?</option>
</select>
</td>
</tr>
<tr>
<td align="right">密码提示答案：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td align="right">性别：</td>
<td><input name="sex" type="radio" checked="checked" />男
<input type="radio" name="sex"/>女</td>
</tr>
<tr>
<td align="right">年龄：</td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">籍贯：</td>
<td><select name="province" onChange="getCity()">
<option value="0">请选择</option>
<option value="北京市">北京</option>
<option value="河北省">河北</option>
<option value="山东省">山东</option>
</select>省/直辖市
<SELECT name="city">
             <OPTION VALUE="0">请选择所在城市 </OPTION>
         </SELECT>
         市</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td><input type="checkbox" checked="checked" />
        上网
<input type="checkbox" />体育
<input type="checkbox" />学习
</td>
</tr>
<tr>
<td align="right" valign="top">个人介绍：</td>
<td><textarea  cols="30" rows="4"></textarea></td>
</tr>
<tr>
<td align="right">上传头像：</td>
<td><input type="file"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注册" />
<input type="reset"  value="重置" /></td>
</tr>
</table>
</form>

	</body>
</html>