标签:
1. HTML 表格
主要关键字:
示例:
<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 区块
<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>
标签:
原文地址:http://www.cnblogs.com/Daniel-Liang/p/5918381.html