前端基础回顾
二、HTML表单、表格
01标签属性
02表格
03对齐方式1
04对齐方式2
05表单
正文：
01标签属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.标签：标签名+标签属性+文本内容（单标签没有文本内容）
2.标签属性：通用属性、自有属性、自定义属性
3.
（1）通用属性
id:在一个网页必须是唯一的，不能重名
class：可以重名
style：标签内设置样式也叫行内样式
title：提示文本
（2）自有属性
（3）自定义属性
通常用来传值或用于图片懒加载（只加载可视区域的图片）等方面
格式：data-*
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
table主要用于呈现格式化数据。
表格由行和列组成。
1.格式：
<table>
<tr>
<th></th>
<th></th>
.....
</tr>
<tr>
<td></td>
<td></td>
.....
</tr>
......
</table>
2.属性：
border ：设置表格边框，默认单位是像素
width ：设置表格宽度，默认单位是像素
height: 设置表格高度
align ：设置表格对齐（left center right）
cellpadding ：单元格文本和边框的距离
cellspacing ：单元格边框间距
3.th:表头，主要起对下面的内容起说明作用。th的内容会自动加粗和居中。
4.跨行、跨列
rowspan colspan
-->
<table border="1" width="400" cellspacing="0" cellpadding="10" align="center">
<caption>学生信息表</caption>
<tr><!--代表一行-->
<th>学号</th><!--代表一列，表头-->
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>01001</td><!--代表一列，单元格-->
<td>张三</td>
<td>12</td>
</tr>
<tr>
<td>01002</td><!--代表一列，单元格-->
<td>李四</td>
<td>13</td>
</tr>
</table>
<hr />
<!--table[border=1 width=500 align=center]>tr*3>td{内容$$}*3-->
<table border="1" width="500" align="center">
<tr align="center">
<td rowspan="2" valign="bottom">内容01</td>
<td>内容02</td>
<td>内容03</td>
</tr>
<tr>
<td>内容02</td>
<td>内容03</td>
</tr>
<tr>
<td>内容01</td>
<!--<td align="center">内容01
<tr>第一行</tr>
<tr>第二行</tr>
</td>-->
<td>内容02</td>
<td>内容03</td>
</tr>
</table>
</body>
</html>
<!--
补：彻底搞定vertical-align垂直居中不起作用疑难杂症：https://www.colabug.com/2018/0211/2345532/
实现外面一个div，里面嵌套一个div（有文本），使其水平垂直居中。
水平居中：text-align: center;
垂直居中：vertical-align: middle;
垂直居中出现vertical-align: middle不起作用问题：
事实上，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，并不是相对于整个Box而言的。
如果把 vertical-align:middle放到一个单元格元素，即table的td元素中，它的垂直居中显示是没任何问题的，因为它表示相对于该行的垂直高度居中。
而在我设定的<div>块中并不只存在一行，因此它无法识别默认显示在顶部。
为了解决这个问题，我找到了两种方法，如下。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--方案一：设置子div元素style中的 line-heght值为其父元素<div>的height值，这样 vertical-align:middle就会使子div元素内容垂直居中。-->
<!--<style type="text/css">
.a{
width: 200px;
height: 400px;
border: 1px solid red;
text-align: center;
vertical-align: middle;
}
.b{
border: 1px solid red;
line-height: 400px;
}
</style>-->
<!--
方案二：
将要设置垂直居中的元素的父元素style属性添加 display:table-cell 将其作为单元格显示，
这样使用 vertical-align:middle 也可以实现垂直居中。建议使用第一种方法，毕竟根据实际
需要，我们一般使用<div>作为父元素其中不止一种子元素，使用单元格格式会增加一些 限制，
出现一些意想不到的问题。
-->
<style type="text/css">
.a{
width: 200px;
height: 400px;
border: 1px solid red;
text-align: center;
display:table-cell;
vertical-align: middle;
}
.b{
border: 1px solid red;
display: inline;/*没有宽高,由内容撑开，不写也行*/
}
</style>
</head>
<body>
<div class="a">
<div class="b">noianqvn</div>
ashiuj
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a{
width: 200px;
height: 400px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--
1.text-align：文本水平居中，用在css中：<div style="text-align:center"></div>
vertical-align:垂直居中，用在css中
vertical-align失效情况参考：03对齐方式1.html文件
2.align:一些标签的通用属性，意思是内容水平居中
(table的align="center"属性只是让表格居中显示，对表格的内容没有效果,tr th td的align="center"对内容有作用)
属性有：left 左对齐（默认）
right 右对齐
center 居中对齐
justify 两端对齐
valign：tr td标签的自有属性，
属性有：middle 对内容进行居中对齐（默认值）。
top 上对齐
bottom 下对齐
baseline 与基线对齐
二者都用在标签中：<div align="center">This is some text!</div>
<td valign="bottom">内容01</td>
-->
<div align="center" class="a" style="vertical-align: middle">aaa</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
主要用于前后端交互
1.常用属性：
name:表单名称
action:表单数据提交的地方，通常是一个后台文件名（.jsp/.php/.asp/.aspx/.py）或网址，
如果是#，表示提交到当前文件。
method:前端提交数据到后端的方法，主要有：get（默认） post两种
2.表单元素：
2.1 input
主要用来输入、选择或发出指令
type:text password radio checkbox file button image submit reset
a.text:单行文本输入框 type="text"可以不写，默认值。
属性：placeholder(提示）
name（命名）
minlength和maxlength（最少/多输入的字符个数）
disabled（失效）
readonly（只读）
value（默认值）
pattern（正则匹配）
b.password:密码框
属性与text一样
c.radio:单选钮，通常是两项以上。
常用属性有：name（必须要有，来保证单选）
checked（默认选中）
disabled（失效）
readonly（只读）
value（没有实际作用）
d.checkbox:复选框，可以用来选择0项、1项或多项。
常用属性有：name（必须要有）
checked（默认选中）
disabled（失效）
readonly（只读）
value
e.file:文件上传按钮
f.button:普通按钮，通常用它去调用脚本代码。
常用属性有：value（按钮的标题）/disabled（失效）
g.image:图片按钮，用法与button一样。有一个特殊属性：src(用来加载提示图片，用它替换了value)
它有提交功能，与submit功能一样。
h.submit:提交按钮，用来将表单数据提交到后台。
常用属性有：value（按钮的标题）/disabled（失效）
j.reset:重置按钮，将表单所有组件输入的内容全部清空，还原为初始状态。
常用属性有：value（按钮的标题）/disabled（失效）
button和submit区别：
<form action="demo.php"></form>
button不会提交到demo.php，submit会提交到demo.php
2.2 textarea
常用属性：name
id
cols(列数)
rows(行数)
placeholder
minlength
maxlength
required(必须输入)
value
2.3 select
下拉列表框，默认用于单项选择。用option呈现每个选项。
multiple属性：表示可以多选，这时的下拉列表框变成了列表框
size:最多显示的行数
2.4 button
普通按钮，具有提交功能。可以单独使用，不写在form元素中；如果写在form中，有提交功能。
-->
<form name="stuInfo" action="https://www.baidu.com" method="get">
<input type="text" name="userName" placeholder="请输入您的姓名" />
<input type="submit" />
</form>
<!--name一样的话是一组，一组相互排斥，初始值用checked="checked"，多个都有的话以最后一个为准-->
<form>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex" checked="checked"/>女
</form>
<!--select-->
<!--lable的for属性的值要和所关联的对象，比如select或input的id属性值关联起来，这里是sex-->
<!--这里的lable加上for=sex是可以起到关联表单的作用，即点文字性别就可关联到id是sex的表单-->
<label for="sex">性别：</label>
<select id="sex" multiple="multiple" size="5">
<option value="male">男</option>
<option value="female">女</option>
</select>
<!--button-->
<button>确认</button> <!--主要用来调用js代码-->
<form action="test.aspx">
<input type="text" name="info"/><br />
<input type="button" value="确定"/><br />
<button>提交</button><!--与input中的submit按钮功能一样-->
</form>
</body>
</html>
3349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
