创建表格
表格由 <table> 标签来定义。
每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。
下面是一个包含两行两列的表格:
<table border="1">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格 border 属性
border 属性规定表格单元周围是否显示边框。
如果不定义边框属性,表格将不显示边框。
下面是一个带有边框的表格:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示结果如下:
表格表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本。
下面是一个例子:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在浏览器显示结果如下:
表格 colspan 和 rowspan 属性
使用 colspan 和 rowspan 属性分别定义跨列和跨行的表格单元格。
下面是一个单元格跨两行的表格:
<table border="1">
<tr>
<td>First Name:</td>
<td>Bill Gates</td>
</tr>
<tr>
<td rowspan="2">Telephone:</td>
<td>555 77 666</td>
</tr>
<tr>
<td>555 77 667</td>
</tr>
</table>
元素类型
区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例如: <h1>, <p>, <ul>, <table> 等。
内联元素
内联元素在显示时通常不会以新行开始。
例如: <b>, <td>, <a>, <img> 等。
元素类型
<div> 元素
HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<span> 元素
HTML <span> 元素是内联元素,可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
<form> 标签
HTML 表单用于搜集不同类型的用户输入。
<form> 标签用于创建供用户输入的 HTML 表单。
<form>
…
</form>
使用 action 属性规定当提交表单时,向何处发送表单数据。
<form action="https://www.w3cschool.cn">
</form>
method 和 name 属性
method 属性
method 属性指定在提交表单时使用的 http 方法:get 或 post。
下面是两个示例:
<form action="url" method="get">
<form action="url" method="post">
提示:
当您使用 get 时,表单数据将在页面地址中显示。
如果表单正在更新数据或使用敏感信息(密码),请使用 post。post 提供更好的安全性,因为提交的数据在页面地址中不可见。
name 属性
name 属性指定表单的名称。
要接收用户输入,你需要相应的表单元素,如文本字段。而输入类型是由类型属性(type)定义的,大多数经常被用到的输入类型有:text,password,radio,checkbox,submit 等。
下面是一个请求用户名和密码的表单例子:
<form>
<input type="text" name="username" /><br />
<input type="password" name="password" />
</form>
表单元素
单选框
<input type="radio"> 标签定义了表单单选框选项。
下面是一个单选框的例子:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
运行显示效果如下:
复选框
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
下面是一个复选框的例子:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
运行显示效果如下:
三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不同颜色(256 x 256 x 256)。
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
标记一个内联框架:
<iframe src="https://www.w3cschool.cn"></iframe>
提示:您可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对不支持 <iframe> 的浏览器。HTML5 中不支持<frame> 标签。
HTML 框架
定义iframe标签的高度与宽度
height 和 width 属性用来定义 iframe 标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"90%")。
下面是一个例子:
<iframe src="/statics/demosourse/demo_iframe.htm" width="200" height="200"></iframe>
定义iframe表示是否显示边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
<iframe src="/statics/demosource/demo_iframe.htm" frameborder="0"></iframe>