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上跑起来,如下: ...
随机推荐
- B - The Suspects -poj 1611
病毒扩散问题,SARS病毒最初感染了一个人就是0号可疑体,现在有N个学生,和M个团队,只要团队里面有一个是可疑体,那么整个团队都是可疑体,问最终有多少个人需要隔离... 再简单不过的并查集,只需要不断 ...
- sql server2008 搭建链接服务器成功后查询时报Cannot obtain the schema rowset "DBSCHEMA_TABLES_INFO" for OLE DB provider "SQLNCLI10" for linked server "XXXXX". 的解决方法
这是由于链接的数据库服务器的版本与本地数据库服务器不一致,有人说要升到sp3,sp4,然后在执行什么语句之类的 我觉得太繁琐了,通过网上查询之后看到可以这么做: USE master GRANT EX ...
- Asp.Net Mvc后台数据验证自测小Demo
使用过MVC的同学一定不陌生MVC的模型绑定和模型校验,使用起来非常方便,定义好Entity之后,在需要进行校验的地方可以打上相应的Attribute,在Action开始时检查ModelState的I ...
- 分布式锁1 Java常用技术方案(转)
转:http://www.cnblogs.com/PurpleDream/p/5559352.html#3450419 前言: 由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临 ...
- memcache实现公共计数器网站
在反问题的过程中遇到的最近项目.网上查了很多资料并没有完全实现. 因此,要找到适合自己的xmemcache client和memcache关联API和说明,我们发现了一个比较完美的实现. 键类:net ...
- [转] socket异步编程--libevent的使用
这篇文章介绍下libevent在socket异步编程中的应用.在一些对性能要求较高的网络应用程序中,为了防止程序阻塞在socket I/O操作上造成程序性能的下降,需要使用异步编程,即程序准备好读写的 ...
- nginix 笔记
1. 一个master进程,多个worker进程,worker进程数目可自动配置为核的数目 2. 配置文件ngnix.conf存放在linux的/etc/ngnix目录下
- cocos2d疑问
1. pushScene后,如果才能保持前一个Scene的所有动作,比如schedule 2. APP进入到背景模式运行时,如何让它仍然做一些工作?
- 登录网站爬虫(保持Cookie不变)
平时经常需要到学校的信息门户去查看课表及其他信息,于是想做一个爬虫 ,可以自动替我登录并且得到这些信息,于是今天动手写了一个爬虫: 首先登录学校的信息门户:http://cas.whu.edu.cn/ ...
- Android开发环境搭建详细图解
所谓Android的开发环境,主要是以下两个组件,Android Software Developer Kit(Android软件开发工具包)和Eclipse(编辑器,提供很多方便功能)两大块,下面分 ...