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>
时间： 2024-12-18 01:16:39