5-[HTML]-body常用标签2
1.表格标签 table
表格由<table>
标签来定义。每个表格均有若干行(由 <tr>
标签定义),每行被分割为若干单元格(由<td>
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table标签</title>
</head>
<body>
<div class="table">
<table border="1px" cellspacing="0">
<!--表格头-->
<thread>
<tr> <!--表格行row-->
<th>星期1</th> <!--表格列 table-head,【注意】这里使用的是th-->
<th>星期2</th>
<th>星期3</th>
<th>星期4</th>
</tr>
</thread> <!--表格体-->
<tbody>
<tr> <!--表格行row-->
<td>math</td> <!--表格列 table-data,【注意】这里使用的是td-->
<td>chinese</td>
<td>physical</td>
<td>sports</td>
</tr>
<tr>
<td>math</td>
<td>chinese</td>
<td>physical</td>
<td>sports</td>
</tr>
<tr>
<td>math</td>
<td>chinese</td>
<td>physical</td>
<td>sports</td>
</tr> </tbody>
</table>
</div> <hr>
<hr> <div id="table">
<table border="2px" cellspacing="0">
<thead>
<tr>
<th></th>
<th>星期3</th>
<th>星期1</th>
<th>星期2</th>
<th>星期2</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">上午</td> <!--rowspan 合并行(竖着合并)-->
<td>sports</td>
<td>math</td>
<td>chinese</td>
<td>chinese</td>
</tr>
<tr>
<td>sports</td>
<td>math</td>
<td>chinese</td>
<td>chinese</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>sports</td>
<td>math</td>
<td>chinese</td>
<td>chinese</td>
</tr>
<tr>
<td>sports</td>
<td>math</td>
<td>chinese</td>
<td>chinese</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">备注:2018-01-02</td> <!--colspan 合并列(横着合并)-->
</tr>
</tfoot>
</table>
</div> </body>
</html>
2.表单标签 form
表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、输入框(input)、单选框()
表单的作用
表单用于显示、手机信息,并将信息提交给服务器
1.语法:
<form>允许出现表单控件</form>
(1)表单属性 见下图:
(2)表单控件分类 见下图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件</title>
</head>
<body>
<div class="form">
<!-- form标签是一个块级元素 被提交 -->
<form action="https://www.baidu.com" method="get">
<p>
<!-- label标签行内元素 input是行内块元素-->
<label for='user'>用户名:</label>
<input type="text" name="username" id="user" placeholder="请输入用户名"> </p> <p>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请输入密码">
</p> <!-- 单选框 checked会被默认选中,产生互斥的效果 name值要相同-->
<p>
用户性别:
<input type="radio" name="sex" value="男" checked="">男
<input type="radio" name="sex" value="女">女 </p> <!-- 复选框 -->
<p>
用户的爱好:
<input type="checkbox" name="checkfav" value="吃" checked="check">吃
<input type="checkbox" name="checkfav" value="喝">喝
<input type="checkbox" name="checkfav" value="玩">玩
<input type="checkbox" name="checkfav" value="乐">乐 </p> <p>
<!-- 文本域 -->
自我介绍:
<textarea cols="20" rows="5" name="txt" placeholder="请做自我介绍"></textarea>
</p> <p> <!-- 下拉列表 -->
<select name="sel" size="3" multiple="">
<option value="深圳" selected>深圳</option>
<option value="北京">北京</option>
<option value="沙河">沙河</option>
<option value="山东">山东</option>
<option value="福建">福建</option>
</select> </p> <p>
<!-- 显示普通的按钮 -->
<input type="button" name="btn" value="提交" disabled="disabled"> <!-- 重置按钮 -->
<input type="reset" name=""> <!-- 提交form表单使用 type=submit按钮 -->
<input type="submit" name="btn" value="submit">
</p> </form>
<button type="button">按钮</button> <!-- 文件上传 -->
<form action="https://www.mi.com" enctype="multipart/form-data">
<p>
<input type="file" name="textFile">
</p>
</form> </div> </body>
</html>
5-[HTML]-body常用标签2的更多相关文章
- HTML常用标签
HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...
- html常用标签介绍
常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...
- HTML常用标签总结
HTML 的常用标签总结 <font size="字体大小1-7" color="red或0xff00ff" face="字体类型(楷体等)&q ...
- html新增一些常用标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [刘阳Java]_MyBatis_映射文件的常用标签总结_第5讲
MyBatis中常用标签的总结,简单给出自己的总结 MyBatis映射文件中的标签使用介绍1.<select>:用于编写查询语句用的标签 id:表示当前<select>标签的唯 ...
- CSS常用标签
CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...
- HTML基础(一)——一般标签、常用标签和表格
第一部分 HTML <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...
- HTML-学习笔记(常用标签)
本篇博客讲一讲HTML中的标签 HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.<h1> 定义最大的标题.<h6> ...
- 帝国CMS文章随机调用等一些常用标签
1.帝国CMS文章随机调用等一些常用标签 [e:loop={'news',10,18,0,'newstime>UNIX_TIMESTAMP()-86400*7','onclick desc'}] ...
- 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)
网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
随机推荐
- NSMapTable、NSHashTable与NSPointerArray的封装
NSMapTable.NSHashTable与NSPointerArray的封装 说明 NSMapTable对应NSDictionary:NSHashTable对应NSSet:NSPointerArr ...
- 为了让开发者写MaxCompute SQL更爽,DataWorks 增强SQL 编辑器功能
众所周知,数据开发和分析的同学每天都要花大量时间写MaxCompute SQL:Dataworks作为数据开发的IDE直接影响着大家的开发效率,这次新上线的Dataworks我们在编辑体验上做了很多工 ...
- 字符串到-->list到-->字典的转变
怎么把字符串变成字典呢?? 要先转成列表list(用split方法),然后再把列表转成字典,这时候就用到-->怎么把列表转换成字典呢??列表的索引和字典的新增,然后就能把字符串转成字典了.
- 开发一个shopify插件
开发一个shopify插件,shopify商城可以安装该插件:当用户在商城下单后,插件把订单数据按照指定格式传给disruptsports服务器: https://help.shopify. ...
- session过期,拦截ajax请求并跳转登录页面
1.方法一 :1.1使用filter 和ajaxsetup 对ajax进行拦截并跳转登录页面 public void doFilter(ServletRequest request, ServletR ...
- PHP设计模式系列 - 外观模式
外观模式 通过在必需的逻辑和方法的集合前创建简单的外观接口,外观设计模式隐藏了调用对象的复杂性. 外观设计模式和建造者模式非常相似,建造者模式一般是简化对象的调用的复杂性,外观模式一般是简化含有很多逻 ...
- Spring+Hibernate实现动态SessionFactory切换
场景: 1)系统有多个数据库 2)且数据库类型也不尽相同 3)现在应用根据某些条件路由到具体的数据库 4)且在spring+hibernate框架下,支持依赖注入 已有实现,spring动态数据源,但 ...
- 纯css3云彩动画效果
效果描述: 纯CSS3实现的云彩动画飘动效果 非常逼真实用 使用方法: 1.将body中的代码部分拷贝到你的页面中 2.引入对应的CSS文件即可
- web应用安全发展与介绍
安全与安全圈的认识 中国黑客的发展过程:1990年代初,部分人开始研究黑客技术 1997-1999年,黑客团队涌现,进入黄金时代, 21世纪初,黑客工具傻瓜化,门槛降低,黑客精神不在… 圈内熟知的安全 ...
- Golang 临时对象池 sync.Pool
Go 1.3 的sync包中加入一个新特性:Pool.官方文档可以看这里http://golang.org/pkg/sync/#Pool 这个类设计的目的是用来保存和复用临时对象,以减少内存分配,降低 ...