首页 > 代码库 > HTML 表格、区块、其他常用控件

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

2024-08-15 04:26:25   213人阅读

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>

 

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


联系
我们