单属性汇总：

1 name属性

服务器会识别不同的name属性，并根据name属性来捕获不同元素内的数据。

2 value属性

value 属性为 input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：

type="button", "reset", "submit" - 定义按钮上的显示的文本

type="text", "password", "hidden" - 定义输入字段的初始值

type="checkbox", "radio", "image" - 定义与输入相关联的值

注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

注释：value 属性无法与 <input type="file"> 一同使用。

注意：单选框和复选框传递数据到数据库时一定要设置value, 否则插入数据失败;

3 type属性

它决定了<input>标签在页面中的表现样式和功能

text 文本框

password 密码框

radio 单选框

checkbox 复选框

file 文件域

hidden 隐藏域

image 图像域

submit 提交按钮

reset 重置按钮

button 普通按钮

4 size属性

列表框中size属性用来设置列表框显示的行数；

文本框和密码框会使用size属性设置域的显示宽度；

5 disabled属性

定义disabled属性可以禁止使用该元素；

无法将数据提交到服务器处理;

6 readonly属性

常用在输入性表单对象中(如文本框、密码框、文本区域)，用来禁止输入任何信息；

可以将数据提交到服务器处理;

7 checked属性

它与disabled属性一样没有属性值，常用在选择性表单对象中，定义对象处于被选中状态(如单选按钮和复选框)

但在列表框或者下拉式菜单中，为了表示被选中的项目，可使用selected属性；

7 placeholder属性

规定帮助用户填写输入字段的提示。

表单对象：

1 文本框

<input type="text" name="textfield" id="textfield" value="单行文本框" size="20" maxlength="20">

必需的属性:name type

2 密码域

<input type="password" name="passwordfield" id="passwordfield">

必需的属性:name type

3 文本域

<textarea name="textarea" cols="20" rows="5" wrap="physical"></textarea>

必需的属性:name cols rows

wrap属性 默认值：输入的文本会自动换行。当数据提交到服务器被处理时, 换行符不会随输入的文本一同被提交到服务器；

off(也可写成wrap)：不自动换行, 当输入的内容超出文本区域右边界时, 文本将向左滚动, 并显示滚动条。

如果希望换行，必须手动输入回车键才能将插入点移到下一行；

virtual：文本能够自动换行, 当数据提交到服务器被处理时, 换行符不会随输入文本一同提交到服务器；(默认值)

physical：文本能够自动换行, 当数据提交到服务器被处理时, 换行符将会随输入的文本一同被提交到服务器进行处理；

关于如何限制文本域输入字符串的长度 见javascript|语法|设置文本框

HTML5中wrap中属性值修改为hard|soft

soft 当在表单中提交时, textarea 中的文本不换行, 默认值。

hard 当在表单中提交时, textarea 中的文本换行(包含换行符)。

当使用 "hard" 时, 必须规定 cols 属性

4 单选按钮

单选按钮传递的信息简单，如1或0、True或False。

<input type="radio" name="radio" value="1"/>选项1
<input type="radio" name="radio" value="2"/>选项2
<input type="radio" name="radio" value="3"/>选项3

多个单选按钮通过定义相同的name属性, 以实现捆绑在一起；

必需的属性:type name value

5 复选框

<input type="checkbox" name="checkbox[]" value="1"/>选项2
<input type="checkbox" name="checkbox[]" value="2"/>选项2
<input type="checkbox" name="checkbox[]" value="3"/>选项2

通过设置相同的name属性可以把多个复选框捆绑在一起；

必需的属性:type name value

6 列表框/下拉菜单

<select name="select" size=1>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果select元素中不设置size属性,则该元素会显示为下拉菜单样式

<select name="select" size="1" multiple="multiple">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>

如果希望以列表框形式显示,则可以使用size属性指定列表框的高度(显示几个选项);

还可以通过mutiple属性定义列表框是否为多选(默认是单选)；

通过<optgroup>标签把相关的选项组合在一起：

<select>
<optgroup label="PHP版块">
<option value ="resource">资源共享</option>
<option value ="study">学习交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版块">
<option value ="resource">资源共享</option>
<option value ="study">学习交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
</select>

注意：其中PHP版块和IOS版块不能被选中

所有主流浏览器都支持 <optgroup> 标签。

7 文件域

<input type="file" name="file"/>
<input type="file" name="file" multiple/>

8 按钮

提交按钮

<input type="submit" name="" value="提交"/>

name值必须给出

重置按钮

<input type="reset" name="" value="重置"/>

普通按钮

<input type="button" name="" value="普通按钮"/>

它一般是配合javascript来使用;

关于控制表单提交按钮见: javascript|语法|控制表单提交

9 图像域

<input type="image" name="image" value="提交" src="images/vote_d.gif" alt="提交" align="middle"/>

10 隐藏域

限制上传文件大小

<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />

传递ID值

<input type="hidden" name="id" value="<?php echo $result['id'];?>" />

11 button标签

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button type="button" name="button" value="按钮"><img src="hw001.jpeg"/></button>

普通按钮<button type="button">普通按钮</button> 它一般是配合javascript来使用, 默认值

提交按钮<button type="submit">提交按钮</button>

重置按钮<button type="reset">重置按钮</button>

提交表单

enctype属性

该属性包含两种方式:

application/x-www-form-urlencoded 是默认编码类型

multipart/form-data

multipart/form-data编码方式可以用来传输二进制数据或者非ASCII字符的文本(如图片、不同格式的文件等),上传文件必须使用此属性

multipart: 多部件的

multiple: 多重的

text/plain

text/plain将表单属性发送到电子邮箱时，enctype的值必须设为"text/plain",否则将会出现乱码。

发送电子邮件的表单程序

<form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
</form>

action 表单提交的脚本

如果传递到本页面，则直接输入控制 action=""

表单提交方式method:post/get

<form action="test.php?id=5" method="post" >
name: <input type="text" name="name" value="100">
</form>

id=5是get传， name="100" 是post传！ //高洛峰解释

action="" 表示传递到当前脚本文件

target 指定提交到哪一个窗口

_blank 打开新窗口

_self 当前的窗口,默认值

_parent 上一层窗口

_top 最上层窗口

框架名称 指定指定窗口或框架名称

label标签

作用: 扩大触控区域, 为了提升用户体验, 点击文字也能选中表单

<form action=" method="get" accept-charset="utf-8">
<label>电子邮箱: <input type="text" name="email" value="" placeholder="请输入电子邮箱"/></label><br/>
<label>密码: <input type="password" name="password"/></label><br/>
<label for="address">地址</label>
<input type="text" name="address" id="address" placeholder="请输入地址" />
</form>

for与id一致

<input type="radio" id="sec" name="sex"> <label for="sex">男</label>

简化写法:

<label><input type="checkbox"/>周杰伦-晴天</label>

注意: "for" 属性可把 label 绑定到另外一个元素。请把"for"属性的值设置为相关元素的 id 属性的值。

PHP实例：创建发送邮件信息的html表单

代码：

<html>
<head>
<title>简单邮件发送表单</title>
</head>
<body>
<h1>Mail Form</h1>
<form name="form1" method="post" action="simpleEmail.php">
<table>
<tr><td><b>To</b></td><td><input type="text" name="mailto" size="35"></td></tr>
<tr><td><b>邮件主题：</b></td>
<td><input type="text" name="mailsubject" size="35"></td></tr>
<tr><td><b>邮件内容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="发送">
</td>
</tr>
</table>
</form>
</body>
</html>

simpleEmail.php

用html标签使用介绍

本文主要记录常用的html标签使用说明，用起来的时候偶尔查查。

常用html标签列表

常用标签使用说明

• 常用写法：​​<img src="" alt="" title=""width="" height=""​​>
• src：图片的来源（必写属性）
• alt：图像不显示时的替代文本
• title：鼠标在移动到元素上的文本提示
• width/height：图片宽高，没有定义宽高的时候，图片按照百分之百比例显示，更改图片的宽度或者高度，图片等比例缩放

普通用法

• 常用写法：​​<a href="" title="" target="">填写内容</a>​​
• href：去往的路径（必写属性）
• title：鼠标在移动到元素上的文本提示
• target：规定在何处打开路径

• _blank：新页面打开
• _parent：在父窗口中打开链接
• _self：当前页面跳转（默认值）
• _top：在当前窗体打开链接，并替换当前的整个窗体

• 当href的值为javascript：void(0); 或 javascript：; ，表示超链接不做任何事情，不做任何跳转
• 当href的值为#，表示超链接为空链接，点击此链接时会跳转到页首的位置

锚点链接

锚点链接通过点击超链接，自动跳转到我们设置锚点的位置，类似于word的目录导航。建立锚点的元素必须要有id或name属性，最好两个都有。这里只跳转本页面元素，其他页面跳转自行搜索。
具体做法如下：

1. 给目标元素设置id值，如​​<p id="id1"></p>​​
2. 设置锚点超链接，锚点的超链接路径一定包含"#"，后面紧跟元素的id或者name，如​​<a href="#id1"></a>​​

示例如下。为了显示效果，通过使用lorem自动生成随机文本（具体使用方法搜索，一般直接输入就行），lorem*50表示重复lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超链接全局设置

在页面head中写入代码可以设置超链接的全局跳转设置

<head>
  <!-- 让页面所有的超链接新页面打开 -->
  <base target="_blank">  
</head>

charset编码

• 常用写法： ​​<meta charset="UTF-8">​​
• charset：定义文档的字符编码

• ASCII/ANSI/Unicode：英语
• GBK：亚洲通用字符集
• GB2312：中文简体
• Big5：台澳港繁体
• UTF-8：世界通用字符集

name

1. 关键字

• 常用写法： ​​<meta name="keywords" content="">​​
• 描述：告诉搜索引擎网页的关键字，尽量将重要的关键词放在前面

2. 网页描述

• 常用写法： ​​<meta name="keywords" content="">​​
• 描述：告诉搜索引擎网页的主要内容

3. 作者

• 常用写法： ​​<meta name="author" content="">​​
• 描述：告诉搜索引擎网页的作者

4. 文件检索

• 常用写法： ​​<meta name="robots" content="all | none | index | noindex | follow | nofollow">​​
• 描述：有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是The Robots META标签。
• content: 文件检索方式

• all：文件将被检索，且页面上的链接可以被查询 （默认值）
• none：文件将不被检索，且页面上的链接不可以被查询
• index：文件将被检索；
• noindex：文件将不被检索，但页面上的链接可以被查询
• follow：页面上的链接可以被查询
• nofollow：文件将不被检索，页面上的链接可以被查询

网页自动跳转

• 常用写法： ​​<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />​​
• 描述：网页5秒后自动跳转到谷歌主页
• url：为空则刷新本页
• 常用写法：
• 描述：规定当前文档与被链接文档/资源之间的关系
• rel：定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写（必写属性）
• type：规定被链接文档的类型
• href：链接的文件路径
• 示例：

• 链接外部样式表：​​<link rel="stylesheet" type="text/css" href="a.css">​​
• 设置网页icon图标：​​<link rel="icon" href="a.ico">​​

列表

无序列表

无序列表使用粗体圆点进行标记。简单示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用数字进行标记，我们可以通过整数值start指定列表编号的起始值。简单示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通过描述列表自定义列表，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。简单示例如下。

<dl>
        <dt>A</dt> <!-- 小标题 -->
            <dd>A1</dd> <!-- 解释标题 -->
            <dd>A2</dd> <!-- 解释标题 -->
        <dt>B</dt> <!-- 小标题 -->
            <dd>B1</dd> <!-- 解释标题 -->
            <dd>B2</dd> <!-- 解释标题 -->
    </dl>

表格

基础表格

• 常用写法：​​<table width="" height="" border="" cellspacing="" cellpadding=""></table>​​
• width：表格宽度
• height：表格高度
• border：边框宽度
• cellspacing：单元格间距
• cellpadding：内容与边框间距

简单示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格标题</caption> <!-- 定义表格标题 -->

<tr>
    <!-- 定义表格的行 -->
    <td>A1</td> <!-- 定义表格该行第一列中的数据 -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定义表格的行 -->
    <th>A</th> <!-- 定义表格每一列的标题 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

单元格合并

• 常用写法：​​<td colspan=“” rowspan=“”></td>​​
• 描述：告诉表格该单元格可以横跨colspan列，纵跨rowspan行

简单示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格标题</strong></caption> <!-- 定义表格标题 -->
<tr height="100">
    <!-- 定义表格的行 -->
    <td colspan="2">A1</td> <!-- 定义该行可以横跨两列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定义该行可以横跨两行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

对于​​<input>​​不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

文本输入框

• 常用写法：​​<input type="text" name="" maxlength="" readonly="" disabled="" value="">​​
• type：规定输入字段的类型
• name：输入框的名字
• maxlength：输入文本长度
• readonly：输入框是否只读
• disabled：输入框是否未激活
• value：输入框默认值

简单示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">

密码输入框

• 常用写法：​​<input type="password" name="">​​
• type：规定输入字段的类型
• name：输入框的名字
• 密码输入框的其他参数和文本输入框一样

简单示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密码">

单选框

• 常用写法：​​<input type="radio" name="" checked="checked">​​
• type：规定输入字段的类型
• name：输入框的名字
• checked：设定该输入框被预先选定
• 想要多个单选框只能有一个被选中，设置所有单选框的name值相同即可实现

示例一，两个单选框都可以被选中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，两个单选框只能有一个被选中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

​​<select>​​

• 常用写法：​​<select multiple=""></select>​​
• multiple：当该属性为true时，可选择多个选项。

​​<optgroup>​​

• 常用写法：​​<optgroup label=""></optgroup>​​
• label：设定选项组的描述。

​​<option>​​

• 常用写法：​​<option value="" selected="">选项值</option>​​
• value：定义送往服务器的选项值。
• selected：当该属性为true时，该选项被默认选择。

示例一，单选下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默认选中 -->
  </select>

示例二，带组合的单选下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，带组合的多选下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多选框

• 常用写法：​​<input type="checkbox" checked="">​​
• type：规定输入字段的类型
• checked：设定该输入框被预先选定

简单示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

• 常用写法：​​<textarea cols="" rows="" placeholder=""></textarea>​​
• cols：控制可见文本的列数
• rows：控制可见文本的行数
• placeholder：提示字符

简单示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上传控件

• 常用写法：​​<input type="file" accept=""/>​​
• accept：规定提交的文件的类型

简单示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他类型按钮

<input type="submit">文件提交按钮
  <input type="button" value="">普通按钮
  <input type="image" src="">图片按钮
  <input type="reset">重置按钮
  <input type="url">网址控件
  <input type="date">日期控件 
  <input type="time">时间控件
  <!--email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交-->
  <input type="email">邮件控件
  <input type="number" step="3">数字控件
  <input type="range" step="100">滑块控件
  <input type="color">颜色控件

表单

示例一，普通表单

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，带分组信息表单

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

与

​​<progress>​​​与​​<meter>​​主要区别和用法见​​HTML5 progress和meter控件​​

​​<progress>​​

• 常用写法：​​<progress value="" max=""></progress>​​
• value：规定进程的当前值
• max：规定需要完成的值

简单示例如下。

<progress value="60" max="100"></progress>

​​<meter>​​

• 常用写法：​​<meter min="" low="" high="" max="" value="" optimum=""></meter>​​
• value：规定度量的当前值
• max：规定被界定为高的值的范围
• min：规定被界定为低的值的范围
• low：规定被界定为低的值的范围
• high：规定被界定为高的值的范围
• optimum：规定度量的最优值
• 具体使用见meter标签改变颜色规则

简单示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒体资源

​​<audio>​​

• 常用写法：​​<audio src="" controls autoplay loop></audio>​​
• src：规定音频文件的url
• controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
• autoplay：如果出现该属性，自动播放音频
• loop：如果出现该属性，循环播放音频

简单示例如下

<audio src="demo.mp3" controls autoplay></audio>

​​<video>​​

• 常用写法：​​<video src="" width="" height="" poster="" controls autoplay loop></video>​​
• src：规定视频文件的url
• width：设置视频播放器的宽度（pixels）
• height：设置视频播放器的高度（pixels）
• poster：设置视频未播放时展示的画面
• controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
• autoplay：如果出现该属性，自动播放音频
• loop：如果出现该属性，循环播放音频

简单示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

​​<source>​​

• 常用写法：​​<source src="" type="">​​
• src：规定媒体文件的url
• type：规定媒体文件的类型
• 因为不同浏览器支持的媒体格式不同，当添加媒体文件时，需要考虑浏览器是否支持它们。我们可以准备多种不同格式的媒体文件，然后使用source 标签，让浏览器从上到下选择支持的媒体格式

简单示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的浏览器不支持video元素。
  </video>

特殊字符

​​HTML特殊字符编码对照表​​

参考

• ​​HTML基础​​
• ​​HTML 参考手册​​
• HTML中标签对应的英文
• meter标签改变颜色规则
• HTML5 progress和meter控件

我们使用CSS来对一个高度未定的元素添加折叠动画时，会遇到使用transition来对Height从0到auto添加过度动画，动画并没有生效的问题；

幸运的是，现在有了解决方案： 使用表格布局，实现简单并且效果完美；

通常以前对于这种场景，使用CSS来实现：使用max-height 或者 scaleY 貌似能够解决；但是会有不同程度的问题：

max-height:

折叠时设置max-height为零，展开时设置max-height为一个较大的值；

弊端： 因为需要尽可能保证max-height大于折叠内容的宽度，需要将max-height设置的比较大，导致展开时动画速度变慢，并且折叠时有短暂的停顿；

scaleY

通过scaleY 0 - 1的过渡实现，但是动画过程中可见内容被挤压变形，体验不好；

现在如果用网格布局来实现，让我们来试下：

grid-template-rows

html结构：

html复制代码<div class="accordion">
  <div class="accordion-title">Hover me!</div>
  <div class="accordion-body">
    <div>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
</div>
css复制代码.accordion-body {
  display: grid; 
  grid-template-rows: 0fr;
  transition: 250ms grid-template-rows ease;
}

.accordion:hover .accordion-body {
  grid-template-rows: 1fr;
}

.accordion-body > div {
  overflow: hidden;
}

效果：

原文链接：

https://dev.to/francescovetere/css-trick-transition-from-height-0-to-auto-21de