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>