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. CCASS四种交收指令

    CCASS 提供了4种类型的指令:ATI: Account Transfer Instruction 账户转移指令,用于本券商各个仓位上的转移STI: Stock Segregate Account ...

  2. web —— jsp笔记

    cookies 的使用 1.首先确保客户机上允许使用cookie,一般在浏览器的 隐私 设置项里可以设置. 2.下面给出具体的例子 a)index.jsp中如果没注册过,让游客注册,如果注册了,拿出贮 ...

  3. python获取网络时间和本地时间

    今天我们来看一下如何用python获取网络时间和本地时间,直接上代码吧,代码中都有注释. python获取网络时间 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  4. Invocation of init method failed; nested exception is org.hibernate.HibernateException: could not instantiate RegionFactory [org.hibernate.cache.impl

    严重: Exception sending context initialized event to listener instance of class org.springframework.we ...

  5. GS1已分配给国家(地区)编码组织的前缀码

    前缀码即商品条码(EAN-13或者EAN-8)的前三位,其代表的是一个国家和地区,由此前缀可查出所购买的商品是出产自哪个国家的. 下表列出了GS1已分配给国家(地区)编码组织的前缀码 前缀码 管理的国 ...

  6. C primer plus 读书笔记第十四章

    这一章主要介绍C语言的结构和其他数据形式,是学习算法和数据结构的重点. 1.示例代码 /*book.c -- 仅包含一本书的图书目录*/ #include <stdio.h> #defin ...

  7. TCP/IP之分层

    网络协议通常分不同层次进行开发,每一层分别负责不同的通信功能.一个协议族,比方T C P / I P,是一组不同层次上的多个协议的组合.T C P / I P通常被觉得是一个四层协议系统. 1.每层的 ...

  8. linux 屏幕亮度调整命令

    我的Fujitsu S7211的笔记本屏幕显示在Ubuntu 10.04不如在Vista下明亮,一直以为是驱动的问题.后来从老外的博客中,发现了这个亮度其实可以调节. 2种方法: 1. 调节屏幕对比度 ...

  9. jboss7 Java API for RESTful Web Services (JAX-RS) 官方文档

    原文:https://docs.jboss.org/author/display/AS7/Java+API+for+RESTful+Web+Services+(JAX-RS) Content Tuto ...

  10. iOS 类似美团外卖 app 两个 tableView 联动效果实现

    写在前面 首先声明哈,不是广告,我就是用的时候觉得这个功能比较好玩,就想着实现了一下.效果如图: 接下来简单的说一下思路吧~ 大体思路 可能我们看到这种功能的实现的时候,首先想着的是我在这个控制器中左 ...