HTML 表格、区块、其他常用控件
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 表格、区块、其他常用控件的更多相关文章
- [转]easyui常用控件及样式API中文收藏
[转]easyui常用控件及样式收藏 2013-05-06 23:01 30612人阅读 评论(0) 收藏 举报 分类: java ee(5) 目录(?)[+] CSS类定义: div easyu ...
- B/S一些小知识及常用控件
一: B/S网页的运行 页面在设计的时候,本身就是一个类.在运行的时间,是一个对象. 其中aspx和aspx.cs是在同一个类下. aspx是主要是负责界面,而aspx.cs主要是负责数据逻辑. 呈现 ...
- WPF常用控件应用demo
WPF常用控件应用demo 一.Demo 1.Demo截图如下: 2.demo实现过程 总体布局:因放大缩小窗体,控件很根据空间是否足够改变布局,故用WrapPanel布局. <ScrollVi ...
- Android布局属性与常用控件
一.Android常用布局属性 1. LinearLayout的特有属性 android:orientation:设置布局排列方式 android:layout_weight:设置所占布局的权重 ...
- DevExpress主要常用控件
DevExpress主要常用控件说明:1. TestEdit: 一个单行文本编辑器. 常用属性:Name:该控件的名称.Text:该控件中的内容.Enabled:该控件是否激活. Visible:控件 ...
- XAML常用控件2
这节继续讲一些xaml中的常用控件. 布局控件 除了我们之前讲过的Grid,StackPanel,Border布局控件,xaml中还有如下几个布局控件: Canvas:使用这个布局,可以通过坐标来控制 ...
- android内部培训视频_第三节(3)_常用控件(ViewPager、日期时间相关、ListView)
第三节(2):常用控件之ViewPager.日期时间相关.ListView 一.ViewPager 实例:结合PagerAdapter滑动切换图片 二.日期时间相关:AnalogClock\Dig ...
- [WinForm]WinForm跨线程UI操作常用控件类大全
前言 在C#开发的WinForm窗体程序开发的时候,经常会使用多线程处理一些比较耗时之类的操作.不过会有一个问题:就是涉及到跨线程操作UI元素. 相信才开始接触的人一定会遇上这个问题. 为了解决这个问 ...
- android内部培训视频_第三节 常用控件(Button,TextView,EditText,AutocompleteTextView)
第三节:常用控件 一.Button 需要掌握的属性: 1.可切换的背景 2.9.png使用 3.按钮点击事件 1) onClick 3) 匿名类 4) 公共类 二.TextView 常用属性 1.a ...
- Xamarin Studio在Mac环境下的配置和Xamarin.iOS常用控件的示例
看过好多帖子都是Win环境装XS,Mac只是个模拟器,讲解在Mac环境下如何配置Xamarin Studio很少,也是一点点找资料,东拼西凑才把Xamarin Studio装在Mac上跑起来,如下: ...
随机推荐
- 跑步进入全站 HTTPS ，这些经验值得你看看
随着国内网络环境的持续恶化,各种篡改和劫持层出不穷,越来越多的网站选择了全站 HTTPS.就在前几天,免费提供证书服务的 Let’s Encrypt 项目也正式开放测试,HTTPS 很快就会成为 WE ...
- java 吞吐量
jvm中 ,执行用户的代码占 的时间/总时间 ,假如前者是99 分钟,后者一分钟,则吞吐量为99% ,吞吐量越大.系统越好,如何设计系统,导致系统吞吐量高,因为我们知道,垃圾回收,7种垃圾收集器,也不 ...
- 如何提高Lucene构建索引的速度
如何提高Lucene构建索引的速度 hans(汉斯) 2013-01-27 10:12 对于Lucene>=2.3:IndexWriter可以自行根据内存使用来释放缓存.调用writer.set ...
- Bulk Insert 高效快速插入数据
BULK INSERT以用户指定的格式复制一个数据文件至数据库表或视图中. 语法: BULK INSERT [ [ 'database_name'.][ 'owner' ].]{ 'table_nam ...
- android TimerTask 的简单应用，以及java.lang.IllegalStateException: TimerTask is scheduled already错误的解决方法【转】
Android应用开发中常常会用到定时器,不可避免的需要用到 TimerTask 定时器任务这个类下面简单的一个示例演示了如何使用TimerTask这个示例演示了3秒未有触屏事件发生则锁屏(只是设置下 ...
- HDU5348
题意:给一个无向图,让你指定边的方向,比如a→b为1,a←b为0,在给所有边指定方向后,对无向图上的每个顶点,如果满足|出度-入度|<2,那么输出一种方案. 思路:从结论入手,|出度-入度|&l ...
- css.day02.eg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Web.Config文件中添加数据库配置文件
1获取所有配置文件节点的类ConfigurationManager 2数据库节点<ConnectionStrings> <add> name ="Sqlconnect ...
- (Excel导出失败)检索COM类工厂中CLSID为{00024500-0000-0000-C000-000000000046}的组件时失
在DCOM 中不存在WORD.EXCEL等OFFICE组件 最近在做一个关于office转存PDF的Web项目.开发过程一切顺利. 起初在网上找到一些Word,PPT转PDF的代码.很好用.一切顺 ...
- 【转载】逃离adapter的地狱－针对多个View type的组合实现方案
英文原文:JOE'S GREAT ADAPTER HELL ESCAPE 转载地址:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015 ...