html常用标签回顾(二)

创建表格

表格由 <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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章