-
创建表格
在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
在上面的语法中包含三对HTML标签,分别为 table、tr、td,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释。
1.table用于定义一个表格。
2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 table中包含几对 tr,就有几行表格。
3.td /td:用于定义表格中的单元格,必须嵌套在<tr></tr>标签中,一对 <tr> </tr>中包含几对<td></td>,就表示该行中有多少列(或多少个单元格)。
表格属性
-
表格结构
在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体如下所示:
<thead></thead>:用于定义表格的头部。必须位于<table></table> 标签中,一般包含网页的logo和导航等头部信息。
<tbody></tbody>:用于定义表格的主体。位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。
-
表格标题
定义和用法:caption 元素定义表格标题。
<table><caption>我是表格标题</caption><7table>
注意:
1. caption标签只存在表格里面,必须紧随 table 标签之后。
2. 只能对每个表格定义一个标题。通常这个标题会被居中于
合并单元格
跨行合并:rowspan
跨列合并:colspan
合并单元格的步骤:
1、先判断跨行合并还是跨列合并
2、跨行合并用rowspan属性,跨列合并用个colspan属性
3、将rowspan 或者colspan写在第一个要合并的单元格上
4、将合并的行数和列数写在指定的属性值上
5、将多余的单元格注释掉
表格标签
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性:
1. action在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method用于设置表单数据的提交方式,其取值为get或post。
3. name用于指定表单的名称,以区分同一个页面中的多个表单。
input控件
注意:
radio如果是一组,必须给他们命名相同的名字name,这样就可以多个选其中的一个啦。
Input的size跟字体大小有关系,不设置的情况下,浏览器默认情况下,input默认的输入框的宽度就是169px
label标签
lable作用:用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢? for属性规定label与哪个表单元素绑定。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
textarea控件
<textarea cols="宽度 " rows="高度"> 默认是20
文本内容
</textarea>
下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
注意:
1. select中至少应包含一对option。
2. 在option中定义selected ="selected "时,当前项即为默认选中项。
fieldset标签
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
<legend>标签中文本会在边框的左上角显示。
什么是HTML5
1、HTML5 是下一代 HTML 标准。
2、HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。
3、HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。
4、HTML5的设计目的是为了在移动设备上支持多媒体。
5、HTML5 简单易学。
HTML5 的改进
1、新元素 2、新属性 3、完全支持 CSS3 4、Video 和 Audio 5、2D/3D 制图 6、本地存储 7、Web 应用
HTML5 的优点
1、提高可用性和改进用户的友好体验。
2、有几个新的标签,这将有助于开发人员定义重要的内容。
3、可以给站点带来更多的多媒体元素(视频和音频)。
4、可以很好的替代FLASH和Silverlight。
5、将被大量应用于移动应用程序和游戏。
6、可移植性好。
HTML5中新增的元素
<canvas> 标签定义图形,比如图表和其他图像
<audioi>定义音频
<video>/< movie>定义视频
<source>定义多媒体资源<video><audio>
<embed>定义嵌入的内容,比如插件
<track>为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
<datalist>定义选项列表,请于input元素配合使用该元素
<article>定义页面独立的内容区域
<aside>定义侧边栏内容
<header>定义文档头部
<section>定义一个区域
<footer>文档底部
<nav>导航栏
<progress>定义任何类型的任务进度
<datalist> 元素
<datalist> 元素规定输入域的选项列表,<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:使用 <input> 元素的列表属性与 <datalist> 元素绑定。
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
HTML5 新的表单属性
placeholder 占位符
autofocus 获取焦点
<input type="text" name="fname" autofocus>
autocomplete 自动完成,用于表单元素,也可用于表单自身
novalidate 关闭验证,可用于<form>标签
required 验证条件,必填项
pattern 正则表达式 验证表单
maxlength 最大长度
minlength 最小长度