day02 学习内容

[qq_45598596]

一、 表格的标签及属性 1. table属性Width、height 宽高（单位是像素或百分比） align 对齐 border 外边框 bgcolor 背景色 background 背景图片 Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0Cellpadding 单元格边距（表格边框与内容的距离） 一般情况写0 1. tr属性：Align 水平对齐 left/center/ rightvalign 垂直对齐 Top（上）/middle（中）/bottom（下） bgcolor 背景色 2. td的基本属性Width、height 宽高（单位是像素或%） 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> 3. 输入标记
表单元素中输入标签是<input/>,常用属性有type（类型）、name（名称）、value（值）、checked（默认选中） 二、HTML常用表单控件 1. 文本框 文本框：主要用于输入单行文本内容。 代码如下: 代码格式如下： 姓名：<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> 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"/> 效果如下：<input type="file" name="fileuplode" /> <br /> <!--文件上传需要设置二进制流才是图片--> 6. 提交按钮提交按钮用来将输入的信息提交到服务器。Value属性定义按钮的显示文字。 代码格式如下：<input type="submit" value="提交" /> 7. 重置按钮重置按钮用来重置表单中输入的信息。 代码格式如下：<input type="reset"value="重置"/> 效果如下： input重置按钮：<input type="reset" value="重置" /><br />
input提交按钮：<input type="submit" value="提交" /><br />
input普通按钮：<input type="button" value="普通按钮" onclick="alert('hello')"/><br /> 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 /> 注：Select标记的multiple属性和size属性不要求掌握。 列表框（提供多选ctrl+多选）： <select name="fruit" multiple="multiple" size="4"> <optgroup label="最喜欢的水果"> <!--分组选项--> <option value="apple">苹果</option> <option value="orange" selected="selected">橙子</option> </optgroup> <optgroup label="不喜欢的水果"> <option value="banana">香蕉</option> <option disabled="disabled">西瓜</option> <option>柠檬</option> <option>香梨</option> </optgroup> </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文本框类型dateDate类型的日期检出器用于选取日、月、年，即选择一个具体的日期，如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标签。 </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>