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的更多相关文章

  1. HTML常用标签

    HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...

  2. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  3. HTML常用标签总结

    HTML 的常用标签总结 <font size="字体大小1-7" color="red或0xff00ff" face="字体类型(楷体等)&q ...

  4. html新增一些常用标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. [刘阳Java]_MyBatis_映射文件的常用标签总结_第5讲

    MyBatis中常用标签的总结,简单给出自己的总结 MyBatis映射文件中的标签使用介绍1.<select>:用于编写查询语句用的标签 id:表示当前<select>标签的唯 ...

  6. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  7. HTML基础(一)——一般标签、常用标签和表格

    第一部分  HTML <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...

  8. HTML-学习笔记(常用标签)

    本篇博客讲一讲HTML中的标签 HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.<h1> 定义最大的标题.<h6> ...

  9. 帝国CMS文章随机调用等一些常用标签

    1.帝国CMS文章随机调用等一些常用标签 [e:loop={'news',10,18,0,'newstime>UNIX_TIMESTAMP()-86400*7','onclick desc'}] ...

  10. 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

随机推荐

  1. NSMapTable、NSHashTable与NSPointerArray的封装

    NSMapTable.NSHashTable与NSPointerArray的封装 说明 NSMapTable对应NSDictionary:NSHashTable对应NSSet:NSPointerArr ...

  2. 为了让开发者写MaxCompute SQL更爽,DataWorks 增强SQL 编辑器功能

    众所周知,数据开发和分析的同学每天都要花大量时间写MaxCompute SQL:Dataworks作为数据开发的IDE直接影响着大家的开发效率,这次新上线的Dataworks我们在编辑体验上做了很多工 ...

  3. 字符串到-->list到-->字典的转变

    怎么把字符串变成字典呢?? 要先转成列表list(用split方法),然后再把列表转成字典,这时候就用到-->怎么把列表转换成字典呢??列表的索引和字典的新增,然后就能把字符串转成字典了.

  4. 开发一个shopify插件

       开发一个shopify插件,shopify商城可以安装该插件:当用户在商城下单后,插件把订单数据按照指定格式传给disruptsports服务器:   https://help.shopify. ...

  5. session过期,拦截ajax请求并跳转登录页面

    1.方法一 :1.1使用filter 和ajaxsetup 对ajax进行拦截并跳转登录页面 public void doFilter(ServletRequest request, ServletR ...

  6. PHP设计模式系列 - 外观模式

    外观模式 通过在必需的逻辑和方法的集合前创建简单的外观接口,外观设计模式隐藏了调用对象的复杂性. 外观设计模式和建造者模式非常相似,建造者模式一般是简化对象的调用的复杂性,外观模式一般是简化含有很多逻 ...

  7. Spring+Hibernate实现动态SessionFactory切换

    场景: 1)系统有多个数据库 2)且数据库类型也不尽相同 3)现在应用根据某些条件路由到具体的数据库 4)且在spring+hibernate框架下,支持依赖注入 已有实现,spring动态数据源,但 ...

  8. 纯css3云彩动画效果

      效果描述: 纯CSS3实现的云彩动画飘动效果 非常逼真实用 使用方法: 1.将body中的代码部分拷贝到你的页面中 2.引入对应的CSS文件即可

  9. web应用安全发展与介绍

    安全与安全圈的认识 中国黑客的发展过程:1990年代初,部分人开始研究黑客技术 1997-1999年,黑客团队涌现,进入黄金时代, 21世纪初,黑客工具傻瓜化,门槛降低,黑客精神不在… 圈内熟知的安全 ...

  10. Golang 临时对象池 sync.Pool

    Go 1.3 的sync包中加入一个新特性:Pool.官方文档可以看这里http://golang.org/pkg/sync/#Pool 这个类设计的目的是用来保存和复用临时对象,以减少内存分配,降低 ...