前端开发-4-HTML-table&form&表单控制 标签
1、table标签
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格 给table 对象添加属性 cellspacing 单元格之间的距离 -->
<table border="" cellspacing="">
<!--表格头-->
<thead>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead> <!--表格主体-->
<tbody>
<!--表格主体的每一行-->
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
</tbody> <!--<tfoot></tfoot>-->
</table> <table border="" cellspacing="">
<!--表格头-->
<thead>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead> <!--表格主体-->
<tbody>
<!--表格主体的每一行-->
<tr>
<td rowspan="">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td rowspan="">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
</tbody> <tfoot>
<tr>
<td colspan="">课程表</td>
</tr>
</tfoot>
</table> </body>
</html>
2、form标签
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>表单控件</title>
</head>
<body>
<div class="form">
<!--form标签是一个块级元素 被提交-->
<form action="https://www.baidu.com" method="get"> <!--label标签行内元素--><!--input是行内块元素-->
<p>
<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="checked">吃
<input type="checkbox" name="checkfav" value="喝">喝
<input type="checkbox" name="checkfav" value="玩" checked>玩
<input type="checkbox" name="checkfav" value="乐">乐
</p> <!--文件上传 file 表单的method的方法是 post 不能是get -->
<p>
<input type="file" name="textfile">
</p> <!--文本域-->
<p>
自我介绍
<textarea cols="" rows="" name="txt" placeholder="请做自我介绍"></textarea>
</p> <!--下拉列表 size设置高度 multiple可多选 selected默认选中 -->
<p>
<label for="sel">城市：</label>
<select name="sel" id="sel" size="" multiple>
<option value="北京">北京</option>
<option value="上海" selected>上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</p> <!--按钮-->
<p>
<!--显示普通的按钮-->
<input type="button" name="btn" value="提交" disabled>
<!--重置按钮-->
<input type="reset" name="" >
<!--提交form表单使用 type=submit 按钮-->
<input type="submit" name="btn" value="submit">
</p> </form>
<button type="button">按钮</button> <!--类似 普通的按钮--> <!--
总结：
按钮： button reset submit
文本： label text password radio checkbox file textarea
下拉框： select option
-->
<!--
总结：
html标签：
head 标签：
title 标签，显示网站的标题
meta 标签，提供有关页面的原信息
style 标签，定义内部样式表
link 标签，链接css资源文件、网站图标
script 标签，链接脚本js文件
body 标签：
h1 - h6 标题标签
p 段落标签
ul 无序列表标签
ol 有序列表标签
div 盒子标签
table 表格标签
th 定义表头
tr 定义表行
td 定义表单元格数据
form 表单标签
...
action
method
enctype
表单控件分类：
textarea
select option
input
label
...
img 标签
br 换行标签
hr 分割线标签
空格字符
a 超链接标签
span 标签
button 按钮
-->
</div> </body>
</html>
3、标签分类
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>标签分类</title>
</head>
<body>
<!--
1.标签属性 注意事项：
1.HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。
2.属性值要用引号包裹起来，通常使用双引号也可以单引号。
3.属性和属性值不区分大小写，但是推荐使用小写。
2.标签分类：
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
常用的块状元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
常用的行内元素
<a> <span> <br> <i> <em> <strong> <label>
常用的行内块状元素：
<img> <input> 块级元素特点：display:block;
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：display:inline;
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：display:inline-block;
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
注意
我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。
3.标签嵌套规则：
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：
<div><div></div><h1></h1><p><p></div> ✔️
<a href=”#”><span></span></a> ✔️ a 可以包含 img
<span><div></div></span> ❌
某些块级元素不能放在p标签里面，比如
<p><ol><li></li></ol></p> ✔️
<p><div></div></p> ❌ 个别例外，大家注意
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p
li元素可以嵌入ul，ol，div等标签
<ul>
<li>
<ul>
<li>
<div> </div>
</li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ul>
</li>
</ul> -->
<div class="wrapper">
<!--块级元素： div p h1~h6 ol ul li table form
块状元素：
1.独占一行
2.可以设宽度和高度，如果设置了宽度和高度，则就是当前的宽度和高度
如果没有设置，宽度就是父盒子的宽度，高度根据内容填充
-->
<div class="left">
这是路飞学城的战场
<div>这是我的段落
<div style="width:500px;height: 100px">这是我的爱好</div>
<ul>
<li>
<h2>读书</h2>
</li>
<li>
<ol>
<li>运动</li>
<li>学习</li>
</ol>
</li>
</ul>
</div>
</div> <div class="right">
<!--行内标签 a span br i en strong label
hr 可以设置宽高；
br 不可设置宽高；
行内元素：在一行内展示，不能设置宽度和高度，宽度和高度根据内容填充
-->
<a href="#" style="width: 200px;height: 100px">百度</a>
<a href="#">luffy</a>
<span style="width: 100px;height: 100px">一些文本</span>
<span>一些文本</span>
<i>我是i</i>
<hr style="height: 100px;width: 100px">
<em>我是em</em>
<br style="width: 200px;height: 100px">
<strong style="height: 200px;width: 100px;">我是strong</strong> </div> <div class="inline-block">
<!--行内块
1.在一行内展示
2.可设置宽高
-->
<img src="homesmall1.png" alt="一张图片" style="height: 500px;width: 500px">
<label for="txt">测试</label>
<input type="text" name="username" id="txt" style="width: 200px;height: 50px">
</div> </div> </body>
</html>
前端开发-4-HTML-table&form&表单控制 标签的更多相关文章
- 前端笔记：React的form表单全部置空或者某个操作框置空的做法
1.全部置空的做法,一般在弹出框关闭后,需要重置该form所有表单: this.props.form.resetFields(); 2.针对某个操作框置空的做法 例如,form表单里有一个部门和一个张 ...
- 【温故知新】Java web 开发（三）Form表单与上传下载文件
简介:在一和二的基础之上,这次来记录下如何在页面提交表单数据,以及文件的上传和下载整个流程,请求也不仅限于GET了,也有POST了. 1. 为了方便,在 webapp 下直接新建一个 index.ht ...
- vue开发记录--element-ui的form表单label和placeholder国际化遇到的小问题
<el-form-item label="$t('permission.employeeName')"> <el-input v-model="form ...
- HTML 和 form 表单常用标签
HTML和CSS 常用标签: p:段落,自动换行 span:和div类似,但是默认不换行 br:换行 hr:分割线 h1-h6:标题标签 a:超链接 瞄点:通过给a链接设置#XX作为链接,给需要链接的 ...
- html5 form表单常用标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- form表单类标签汇总
<form action="form_action.asp" method="get"> First name: <input type=&q ...
- antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
<a-form-item :label="label+'图片'" :label-col="{ span: 2 }" :wrapper-col=" ...
- javaWeb 中前端Form表单数据处理(手动拼json)
在前端我们会用到最多的就是form表单提交数据,在form表单中有很多都是自动将数据传到后台,然后通过实体来接受的,但是有的时候我们就是需要在前端就拿到这个Form表单的数据,这是我们就可以自己讲数据 ...
- 前端-form表单与CSS
目录 form表单 表单属性 label标签 input标签 select 下拉框标签 textarea多行文本 提交 Flask 结合form表单 初探 CSS介绍以及基本选择器 基本选择器 组合选 ...
随机推荐
- 关于 Javascript 严格模式下多文件合并时注意
Javascript 在第一行使用 "use strict" 声明严格模式. 但是在多个 js 文件合并时就需要注意了,可能你的是严格模式,但别的文件不是,就会造成错误. 为什么使 ...
- 标 题: Re: 总感觉IT没我大山东啥事？
发信人: liuzhlai (liuzhlai), 信区: ITExpress 标 题: Re: 总感觉IT没我大山东啥事? 发信站: 水木社区 (Sat Aug 22 15:51:50 2015) ...
- 【转】每天一个linux命令(24)：Linux文件类型与扩展名
原文网址:http://www.cnblogs.com/peida/archive/2012/11/22/2781912.html Linux文件类型和Linux文件的文件名所代表的意义是两个不同的概 ...
- Mac OSX 正确地同时安装Python 2.7 和Python3
出处:http://www.jianshu.com/p/51811fa24752 python3 默认安装位置:/usr/local/Cellar/python3
- JUC线程池之 线程池拒绝策略
拒绝策略介绍 线程池的拒绝策略,是指当任务添加到线程池中被拒绝,而采取的处理措施. 当任务添加到线程池中之所以被拒绝,可能是由于:第一,线程池异常关闭.第二,任务数量超过线程池的最大限制. 线程池共包 ...
- [BZOJ5249][九省联考2018]IIIDX(线段树)
5249: [2018多省省队联测]IIIDX Time Limit: 40 Sec Memory Limit: 512 MBSubmit: 32 Solved: 17[Submit][Statu ...
- hanlp中文自然语言处理的几种分词方法
自然语言处理在大数据以及近年来大火的人工智能方面都有着非同寻常的意义.那么,什么是自然语言处理呢?在没有接触到大数据这方面的时候,也只是以前在学习计算机方面知识时听说过自然语言处理.书本上对于自然语言 ...
- 对比两个表中，字段名不一样的SQL
需要包括有几种情况一.A表中有的字段B表无二.B表有的A表无三.两个表字段名不一致的 --------------------------------------------------------- ...
- qt ISO C++ forbids declaration of 'XXXX' with no type
error: ISO C++ forbids declaration of 'XXXX' with no type 出现这个错误,一般是由于两个CPP相互都相互包含了对方的头文件造成的,比如: 当 ...
- PHP $_SERVER 祥细解读（有事例）
为了看的更明白,添加上了事例 例如 'www.ceshiyuming.com/ceshi.php?p=123';Array( [HOSTNAME] => [PATH] => ...