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. 作业.把c语言输出的基础差不多都概括了！

    // (1)1英里=1.60931公里,从键盘上输入英里数输出公里数 #include "stdio.h" #define PI 3.1415926 #include " ...

  2. tyvj1728 普通平衡树

    为了彻底理解树状数组,试着用树状数组做了下普通平衡树 而树状数组只能离线做,或者保证值的大小在数组可承受的范围内也是可以的,因为要求离线是因为必须事前对所有数离散化. 然后我们看刘汝佳蓝书上的图 利用 ...

  3. solr 在windows下的安装

    安装环境 Windows 7 64bit Apache-tomcat-8.0.9-windows-x64 Solr-4.9.0 JDK 1.8.0_05 64bit 安装步骤 Tomcat和JDk的安 ...

  4. "org.eclipse.wst.validation" has been removed

    导出maven工程遇到的问题,"org.eclipse.wst.validation" has been removed,还以为是工程本身的问题,后来发现是eclipse的问题. ...

  5. Dump 文件生成与分析

    近期两天因为项目的须要,研究了一下Dump文件相关的知识,今天做一个小节(因为研究不久而且第一次写blog,希望网友们看到不要见笑). Dump文件是进程的内存镜像.能够把程序的运行状态通过调试器保存 ...

  6. dom4j处理java中xml还是很方便的

    http://blog.csdn.net/chenghui0317/article/details/11486271 输入: String flighter = RequestUtil.get(&qu ...

  7. Spring中的AOP

    什么是AOP? (以下内容来自百度百科) 面向切面编程(也叫面向方面编程):Aspect Oriented Programming(AOP),通过预编译方式和运行期动态代理实现程序功能的统一维护的一种 ...

  8. iOS开发之通知中心(NSNotificationCenter)

    前言 面向对象的设计思想是把行为方法封装到每一个对象中,以用来增加代码的复用性.正是这种分散封装,增加了对象之间的相互关联,总是有很多的对象需要彼此了解以及相互操作! 一个简单示例说明这种交互产生的对 ...

  9. http请求的cookie

    Cookie的作用: Cookie是用于维持服务端会话状态的,通常由服务端写入,在后续请求中,供服务端读取. HTTP请求,Cookie的使用过程 1.server通过HTTP Response中的& ...

  10. 嘟！数字三角形 W WW WWW集合！

    哔!数字三角形全体集合! 数字三角形!到! 数字三角形W!到! 数字三角形WW!到! 数字三角形WWW!到! --------------------------------------------- ...