html表格列表模板,前端基础 - HTML（二）表格、表单、列表

表格

table标签用于定义表格

tr 必须嵌套在table标签中

td 必须嵌套在tr中

表格的基本语法：

↑---border代表边框线

align代表位置 right左边left(右边)center(中间)

cellspacing规定单元格与单元格之间的空白默认值为2像素

cellpadding规定单元格与内容之间的空白默认值为1像素

width 规定表格的宽度

案例一：

案例一

排名	关键词	今日搜索	最近七日	相关链接
1	鬼吹灯	456	123	贴吧图片百科
1	鬼吹灯	456	123	贴吧图片百科
3	鬼吹灯	456	123	贴吧图片百科
1	鬼吹灯	456	123	贴吧图片百科
1	鬼吹灯	456	123	贴吧图片百科
1	鬼吹灯	456	123	贴吧图片百科

合并单元格：

步骤：1.先确定跨行合并还是跨列合并

2.找到要合并的目标单元格，写上合并方式=合并数量

3.删除多余的单元格

rowspan 跨行合并

colspan 跨列合并

案例二：

合并

序号	王五		李四		孙传		胡平		合计
序号	语文	数学	语文	数学	语文	数学	语文	数学	合计
1	78	96	67	98	88	75	94	69
2	89	68	77	87	84	76	71	87
3	75	78	89	74	65	68	98	90
4	79	89	65	62	64	87	97	91

列表：

表格显示数据，列表布局

列表分为有序列表、无序列表、自定义列表=

无序列表：项目符号列表项

1.无序列表中的列表项是并列的，无序列表没有顺序之分

2.ul中只能嵌套li

是不允许的

3.li双边标记容器 li可以容纳所有元素

4.无序列表有自己的样式属性，实际开发中，使用css设置的

语法格式：

列表项
列表项
列表项

有序列表：排列顺序的

1.ol标签定义有序列表。

2.列表的排序默认数字显示

3.使用li列表项

4.无序列表有自己的样式属性，实际开发中，使用css设置的

语法格式：

列表项
列表项
列表项

※自定义列表(重点)

没有任何项目符号

1.dl标签描述定义列表 dt和dd一起使用

2.dl标签中只能包含dt和dd

3.dt和dd的个数没有限制的经常一个dt对应多个dd

语法格式：

名词: 名词解释1; 名词解释2; 名词解释3

列表总结：

ul：无序列表只能包含li 没有顺序使用较多 li里面包含任何标签

ol：有序列表只能包含li 有顺序基本不用 li里面包含任何标签

dl：自定义列表只能包含dt和dd dt和dd里面可以存放任意标签的

表单

目的是为了收集用户的信息

网页中完整的表单分为表单域、表单控件(表单的元素)、提示信息

表单域：一个包含表单元素的区域

HTML中，form标签定义表单域，实现用户信息的收集和传递

form表单元素的信息提交给服务器

单控件：定义各种表单元素，表单元素就是允许用户在表单中输入或者选择的空间

1.input 输入表单元素

type属性：根据不同的type属性值，文本输入框、密码、单选、多选、按钮

name属性：当前的input表单的名称

checked属性：表示默认选中的状态。用于单选和多选

lable标签：用于绑定一个表单元素，提升用户体验

2.select 下拉表单元素

option 定义selected=“selected” 当前想默认选中

3.textarea 文本域元素

结构：

单行文本输入框

密码框

单选框单选

复选框复选框

html表格列表模板,前端基础 - HTML（二）表格、表单、列表相关推荐

前端_网页编程 Form表单与模板引擎（上）
目录一.form表单的基本使用 1. 什么是表单? 2. 表单的组成部分 3. < form>标签的基本属性 3.1 action 3.2 target 3.3 method 3.4 e ...
前端_网页编程 Form表单与模板引擎（中）
目录 ... ... (续上篇) 四.模板引擎的基本概念 1.定义 2. 优点五.art-template模板引擎 1.art-template模板引擎介绍 2. art-template的安装 3 ...
前端_网页编程 Form表单与模板引擎（下）
目录续上一篇 6. 模板引擎的实现原理 6.1 正则与字符串操作 6.1.1 基本语法 6.1.2 分组 6.1.3 字符串的replace函数 6.1.4 多次replace 6.1.5 使用wh ...
初学HTML代码笔记终极篇3之表单列表
一.代码部分 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
「前端-HTML」 HTML-表格-表单-第二篇
前端-HTML-第二篇这是HTML第二篇,共三篇,如需看其他篇请点击跳转目录前端-HTML-第二篇 HTML 列表 1.无序列表 2.有序列表 3.自定义列表其他 pre标签 HTML实体 H ...
laravel基础课程---14、表单验证（lavarel如何进行表单验证）
laravel基础课程---14.表单验证(lavarel如何进行表单验证) 一.总结一句话总结: lavarel的验证的功能比tp要[简单]且[强大]很多直接控制器中:添加[规则数组]和[修改提 ...
html表单中默认选中的值,前端学习笔记一一HTML表单标签（form）
form表单细节一.表单 1.表单标签用于为用户输入创建 HTML 表单 2.表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 3.表单还可以包含 menus.text ...
Vue基础（六）——表单
一.双向绑定(v-model) App.vue: <template><div><input type="text" v-model="me ...
【网站前端】第05章表单标签
使用表单目的是为了收集用户信息. 表单通常由表单域.表单控件(又称表单元素)和提示信息3各部分构成. 一.表单域(<form>标签) 1.表单域是一个包含表单元素的区域. 2.<fo ...

html表格列表模板,前端基础 - HTML（二）表格、表单、列表

html表格列表模板,前端基础 - HTML（二）表格、表单、列表相关推荐

最新文章

热门文章

html表格列表模板,前端基础 - HTML（二） 表格、表单、列表

html表格列表模板,前端基础 - HTML（二） 表格、表单、列表相关推荐

最新文章

热门文章

html表格列表模板,前端基础 - HTML（二）表格、表单、列表

html表格列表模板,前端基础 - HTML（二）表格、表单、列表相关推荐