HTML 表格、区块、其他常用控件

时间：2022-05-30 23:33:51

1. HTML 表格

主要关键字：

  • table：表格；
  • table border 属性：定义边框 -- <table border="1">；
  • caption：表名；
  • th：表头
  • tr：行；
  • td：行内数据定义；
  • colspan 属性：合并列（th、td 中使用）；
  • rowspan 属性：合并行（th、td 中使用）；

示例：

<table border="1">

<tr>

  <th>Name</th>

  <th colspan="2">Telephone</th><>

</tr>

<tr>

  <td>Bill Gates</td>

  <td colspan="2">555 77 854 123456</td>

</tr>

<tr>

  <td>Liangyu</td>

  <td>555 77 854</td>

  <td>555 77 855</td>

</tr>

</table>

2. HTML 列表

无序列表 <ul>： 使用粗体圆点进行标记；

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

有序列表<ol>：列表项目使用数字进行标记；

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

自定义列表：

　　自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

嵌套列表：

<h4>嵌套列表​：</h4>

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

2. HTML 区块

  • HTML 区块元素：通常会以新行开始 - <h1>（标题） <p>（段落） <ul>（无序列表） <table>（表格）；
  • HTML 内联元素：通常不会以新行开始 - <b> （粗体）<td>（表格内容） <a>（链接） <img>（图像）；

<div>：块级元素，用于组合其他元素的容器，与 css 配合使用，对大的内容快设置样式。

<span>：内联元素，用于文本的容器，与 css 配合使用，对部分文本单独设置样式；

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<div id="container" style="width:500px">        <!-- 决定了整个大区块的宽度为500像素 -->

<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">主要的网页标题</h1></div>     <!-- 下外边距为0，与下面的区块紧密贴合 -->

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">    <!-- 元素向左浮动 -->

<b>菜单</b><br>

HTML<br>

CSS<br>

JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> <!-- 元素向左浮动 -->

内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

版权 © runoob.com</div>

</div>

</body>

</html>

　　还可以用表格来进行页面布局，不赘述。

3. HTML 表单

　　表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

　　表单使用表单标签 <form> 来设置。

输入框：

First Name:<input type="text" name="firstname"><br>

Last Name: <input type="text" name="lastname"><br>

密码输入框：

Password: <input type="password" name="pwd"><br>

单选控件：

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female<br>

</form>

复选控件：

<form>

<input type="checkbox" name="sex" value="male">Male<br>

<input type="checkbox" name="sex" value="female">Female<br>

</form>

提交数据至其他页面：

<form name="input" action="html_form_action.php" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

下拉列表：

<form action="hello" method="get">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat" seletet>Fiat</option>  <!-- 预选 -->

<option value="audi">Audi</option>

</select>

</form>

文本框：

<textarea rows="10" cols="30">

我是一个文本框。

</textarea>

按钮：

<form action="">

<input type="button" value="Hello world!">

</form>

相关文章