HTML（二）列表、表格、表单元素

一、列表

1. 有序列表（<ol> </ol>）

第一层嵌套内只能包含 <li></li> 列表项标签，列表项标签可以包裹任何标签和文本，属于块级元素。有序列表有以下几个属性：

type="1"	默认
type="a"	小写字母排序
type="A"	大写字母排序

2. 无序列表（<ul> </ul>）

第一层嵌套内只能包含<li></li>列表项标签，同有序列表。有以下几个属性：

type="disc"	\默认
type="circle"	空心圆点
type="square"	小正方形（实心的）

有序列表和无序列表第一层内必须包含列表项标签，文本写在列表项标签内。

3. 自定义列表（<dl> </dl>）

<dt></dt> 列表标题
<dd></dd> 文本和元素

<dl><dt>国内电影</dt><dd>流浪地球</dd><dd>来电狂想</dd><dt>国外电影</dt><dd>惊奇队⻓</dd><dd>美国队⻓</dd>
</dl>

4. 嵌套列表

有序、无序以及自定义列表相互嵌套。举例：

<!-- 嵌套列表 --><ul><li>MOBA类游戏<ol><li>王者荣耀<ul type="circle"><li>武则天</li><li>嬴政</li><li>不知火舞</li></ul></li><li>英雄联盟<ul type="circle"><li>无极剑圣</li><li>疾风剑豪</li><li>暗裔剑魔</li></ul></li></ol></li><li>第一人称射击<ol><li>和平精英</li><li>使命召唤</li><li>生化危机</li></ol></li><li>经营类<ol><li>大富翁</li><li>模拟人生</li><li>城市天际线</li></ol></li></ul>

二、表格

1. 表格标签

<table></table>	块级元素，自占一行
<caption></caption>	表格标题，只可以包裹文本
<thead></thead>	表头，可不写
<tbody></tbody>	表体，可不写
<tfoot></tfoot>	表尾，可不写

2. 表格的行列

<tr></tr>	行标签
<th></th>	加粗列标签，一般放在表头，当作列标题使用
<td></td>	列标签

3. 表格标签相关属性

border	边框宽度
height	整体高度
width	整体宽度
style="bordercollapse: collapse;	除去缝隙
cellpadding	边框与单元格的距离
cellspacing	单元格边框宽度
align left、center、right	对齐方式
bgcolor	背景颜色
background url	背景图片
width	单元格的宽
height	单元格的高

4. 拆分与合并

colspan	合并列
rowspan	合并行

拆分合并之后需要删除多余的行或列。

三、表单元素

1. 表单标签（<form></form>）

表单用于搜集不同类型的用户输入，该标签不能单独使用，需要在 form 元素中加入 input 等标签共同使用。

2. input标签及控件

<input/>元素是最重要的表单元素，有不同的type属性

type="text"	单行文本输入域 placeholder="xxx"占位符，作为对用户的提示文字 maxlength 属性可创建合法值范围
type="password"	密码输入域，输入的字符不直接显示
type="radio"	单选框 checked属性代笔表默认被选中的,可以不用写值
type="checkbox"	复选框
type="submit"	提交按钮 type="reset" 重置 type="button" 普通按钮，用value指定按钮文字
type="file"	文件上传
type="number"	输入数字的字段 min 允许的最小值 max 允许的最大值 value 规定默认值 step 合法数字间隔
type="email"	专用于email的输入
type="color"	直接调用系统的颜色调节窗口，默然为黑色
type="date"	可用来选择或输入日期，包括（年/月/日）不包括时间
type="range"	精确值不重要的输入数字的控件

3. 标记标签（<label> </label>）

不会向用户呈现任何特殊效果，内联元素，不自占一行

label 标签的 "for" 属性可把 label 绑定到另外一个元素，把 "for" 属性值设为相关元素的id 值即可。

4. 菜单标签（<select> </select>）

下拉菜单标签，不能单独存在，只能包裹option。

<option></option> 菜单选项，multiple 属性代表该下拉菜单可以多选。

<select name="cd" id="city" multiple><option value="0">请选择</option><option value="1">北京</option><option value="2">天津</option>
</select>

5.文本域（<textarea> </textarea>）

具有滚动条的多行文本输入控件。

HTML（二）列表、表格、表单元素相关推荐

定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
(18)C#传智:HTML,属性,标签,元素,body,Font,A,列表,表格,表单,Div,Span,框架
比较简单,无事的跳过,直接w3c.school 一.HTML简介一个实例:右键查看源文件(标签,属性,内容...) HTML文档=网页 HTML超文本标记语言(Hyper ...
HTML基本结构标签列表表格表单 form input 单选框radio 多选框checkbox 列表框select option 按钮button
文章目录 HTML HTML基本结构网页的基本标签标题标签段落标签换行标签水平线字体样式标签 HTML注释和特殊符号图像标签常见的图片格式语法案例链接标签页面间链接语法锚链 ...
[Swift通天遁地]二、表格表单-(14)实时调整表单元素的激活和失效
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
css文本,背景,动画和html列表,表格,表单总结
css文本标签的应用文本 text-shadow文本阴影:1px 2px 3px color 第1个长度值用来设置对象的阴影水平偏移值.可以为负值第2个长度值用来设置对象的阴影垂直偏移值.可以为负 ...
html语法中表格命令具备哪些属性,html 语法介绍标签及有关属性列表表格表单...
1.HTML简介 HTML是用来做网页 HTML:Herp Text MarkUp Language 超文本标记语言超文本:超:超链接包含超链接的文本标记语言: 标记:标签语言:制作网页的语言 ...
[Swift通天遁地]二、表格表单-(11)创建星期选项表单和拥有浮动标签的文本框
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
html5-5 HTML5表单元素和内嵌框架
html5-5 HTML5表单元素和内嵌框架一.总结一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...
html——表单元素及个人简历实现
一.HTML 表单简介 1.HTML 表单是 HTML 文档中的一个区域 2.HTML 表单这个区域中包含了一系列的可交互元素 3.HTML 表单主要用于收集用户输入信息二.HTML 表单元素三. ...