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 表格、区块、其他常用控件的更多相关文章

  1. [转]easyui常用控件及样式API中文收藏

    [转]easyui常用控件及样式收藏 2013-05-06 23:01 30612人阅读 评论(0) 收藏 举报  分类: java ee(5)  目录(?)[+] CSS类定义: div easyu ...

  2. B/S一些小知识及常用控件

    一: B/S网页的运行 页面在设计的时候,本身就是一个类.在运行的时间,是一个对象. 其中aspx和aspx.cs是在同一个类下. aspx是主要是负责界面,而aspx.cs主要是负责数据逻辑. 呈现 ...

  3. WPF常用控件应用demo

    WPF常用控件应用demo 一.Demo 1.Demo截图如下: 2.demo实现过程 总体布局:因放大缩小窗体,控件很根据空间是否足够改变布局,故用WrapPanel布局. <ScrollVi ...

  4. Android布局属性与常用控件

    一.Android常用布局属性 1. LinearLayout的特有属性 android:orientation:设置布局排列方式   android:layout_weight:设置所占布局的权重  ...

  5. DevExpress主要常用控件

    DevExpress主要常用控件说明:1. TestEdit: 一个单行文本编辑器. 常用属性:Name:该控件的名称.Text:该控件中的内容.Enabled:该控件是否激活. Visible:控件 ...

  6. XAML常用控件2

    这节继续讲一些xaml中的常用控件. 布局控件 除了我们之前讲过的Grid,StackPanel,Border布局控件,xaml中还有如下几个布局控件: Canvas:使用这个布局,可以通过坐标来控制 ...

  7. android内部培训视频_第三节(3)_常用控件(ViewPager、日期时间相关、ListView)

    第三节(2):常用控件之ViewPager.日期时间相关.ListView  一.ViewPager 实例:结合PagerAdapter滑动切换图片  二.日期时间相关:AnalogClock\Dig ...

  8. [WinForm]WinForm跨线程UI操作常用控件类大全

    前言 在C#开发的WinForm窗体程序开发的时候,经常会使用多线程处理一些比较耗时之类的操作.不过会有一个问题:就是涉及到跨线程操作UI元素. 相信才开始接触的人一定会遇上这个问题. 为了解决这个问 ...

  9. android内部培训视频_第三节 常用控件(Button,TextView,EditText,AutocompleteTextView)

    第三节:常用控件 一.Button 需要掌握的属性: 1.可切换的背景 2.9.png使用 3.按钮点击事件 1)  onClick 3) 匿名类 4) 公共类 二.TextView 常用属性 1.a ...

  10. Xamarin Studio在Mac环境下的配置和Xamarin.iOS常用控件的示例

    看过好多帖子都是Win环境装XS,Mac只是个模拟器,讲解在Mac环境下如何配置Xamarin Studio很少,也是一点点找资料,东拼西凑才把Xamarin Studio装在Mac上跑起来,如下: ...

随机推荐

  1. DateTime日期格式获取 分类： C# 2014-04-15 10:36 233人阅读 评论(0) 收藏

    c#.net 获取时间年月日时分秒格式 //获取日期+时间 DateTime.Now.ToString();            // 2008-9-4 20:02:10 DateTime.Now. ...

  2. C++中一个函数隐藏的有趣例子

    函数隐藏是一个函数的定义或声明导致其他一些函数不可见. 函数A隐藏函数B的条件:      1. 两个函数具有相同的函数名称      2. 具有不同的作用域.所谓定义域函数定义或声明的位置,如全局作 ...

  3. PHP安全编程：更优的会话数据安全 更好地防范session暴露(转)

    当你关注于防止源码的暴露时,你的会话数据只同样存在着风险.在默认情况下,SESSION保存在/tmp目录下.这样做在很多情形下是很方便的,其中之一是所有用户都有对/tmp的写入权限,这样Apache同 ...

  4. rsyslogd配置文件详解

    非常详细的rsyslogd配置文件解析 rsyslog服务和logrotate服务=========================================================== ...

  5. mysql @变量和变量的区别及怎么判断记录唯一性

    DELIMITER// drop PROCEDURE if EXISTS test.express; create PROCEDURE test.express() BEGIN ) into @a f ...

  6. 实例化讲解 RunLoop

    实例化讲解RunLoop 之前看过很多有关RunLoop的文章,其中要么是主要介绍RunLoop的基本概念,要么是主要讲解RunLoop的底层原理,很少用真正的实例来讲解RunLoop的,这其中有大部 ...

  7. Android系统移植与驱动开发——第七章——LED驱动

    LED驱动的实现原理 编写LED驱动: 测试LED驱动之前需要用USB数据线连接开发板,然后打开电源,成功启动之后,执行build.sh脚本文件编译和安装LED驱动,顺利则会自动连接 如果有多个设备文 ...

  8. 【算法】最长公共子序列(nlogn)

    转载注明出处:http://blog.csdn.net/wdq347/article/details/9001005 (修正了一些错误,并自己重写了代码) 最长公共子序列(LCS)最常见的算法是时间复 ...

  9. 不用jquery等框架实现ajax无刷新登录

    <script type="text/javascript"> window.onload = function () { document.getElementByI ...

  10. <html:form>、 <html:text>、<html:password>、<html:submit> 标签

    用Struts标签来写表单元件, 引用: <%@ taglib uri="/tags/struts-html" prefix="html" %> 例 ...