HTML-列表、表格、表单
列表-表格-表单-表单控件
1 回顾
1.1 文本标签
em 强调，默认表现为斜体
strong 强调，默认表现为粗体
del 删除的内容，默认添加删除线
ins 添加的内容，默认添加下划线
sub 下标字
sup 上标字
1.2 图片标签
img 单标签
属性： src alt width height border
绝对路径：完整的网络路径相对路径：./ 目标文件在同级或者下级../ 目标文件在上级或者更上级
1.3 超链接和锚点
① 超链接
a 标签，双标签
属性： href target 值：_self、_blank
② 锚点
1. 如何设置锚点第一种方式，使用 a 标签，设置 name 属性，name 属性的值就是锚点名第二种方式，任何一个标签都可以设置 id 属性，id属性的值是锚点名2. 如何访问锚点通过超链接
2 列表
2.1 无序列表
<ul><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li>
</ul>
无序列表的应用场景： 新闻列表、文字列表、博客列表、商品列表以及导航条等等…
2.2 有序列表
<ol><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li>...
</ol>
有序列表的应用场景：热搜、排行榜等等…
2.3 定义列表（了解）
<h2>前端要学习的内容：</h2>
<!--dt 和 dd 共同组成一个列表项
-->
<dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>CSS</dt><dd>层叠样式表</dd><dt>JavaScript</dt><dd>浏览器脚本语言</dd>
</dl><hr><h2>如何学号前端？</h2>
<!--一个 dt 可以对应多个 dd
-->
<dl> <dt>如何掌握 HTML 标签</dt><dd>了解标签的语义</dd><dd>标记的属性以及属性的值如何设置</dd><dd>单标签还是双标签</dd>
</dl>
应用场景：列表项是某个概念以及对概念的解释说明。
2.4 列表标签总结
| 标签名 | 功能和语义 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| ul | 无序列表 | 双标签 | |
| ol | 有序列表 | 双标签 | |
| li | 列表项 | 双标签 | |
| dl | 定义列表 | 双标签 | |
| dt | 定义列表项的标题 | 双标签 | |
| dd | 定义列表项的描述 | 双标签 |
注意：
- li 标签一定在嵌套在 ul 或者 ol 的里面， ul 或者 ol 标签只能直接嵌套 li 标签。
- li 标签的内部可以嵌套任何一种标签，也可以继续再嵌套一个列表。li 的里面不要直接嵌套 li。
3 表格标签
3.1 表格的结构
<!--表格-->
<table><!--表格的标题--><caption>组织成员信息</caption><!--表格的头--><thead><!--表头行 行： table row--><tr><th>序号</th><th>姓名</th><th>年龄</th><th>职业</th><th>地址</th></tr></thead><!--表格的主体--><tbody><!--普通行 tr--><tr><td>1</td><td>曹操</td><td>48</td><td>丞相</td><td>安徽</td></tr><tr><td>2</td><td>刘备</td><td>45</td><td>汉中王</td><td>河北</td></tr><tr><td>3</td><td>孙权</td><td>35</td><td>讨虏将军</td><td>浙江</td></tr><tr><td>4</td><td>袁绍</td><td>55</td><td>盟主</td><td>河南</td></tr></tbody><!--表格的脚--><tfoot></tfoot>
</table>
3.2 表格整体样式设置
通过给 table 标签设置相关属性，就可以设置表格的整体样式：border：设置表格边框width: 设置表格宽度height: 设置表格高度cellspacing: 设置单元格之间的距离cellpadding: 设置单元格边框与单元格内容之间的距离
3.3 单元格样式设置
① 设置单元格内容对齐方式
设置单元格内容的水平对齐方式： （默认：th 居中对齐，td 靠左对齐）
- 给 thead、tbody、tfooter 设置 align 属性，值可以为 center、left、right， 所包含的单元格都会生效。
- 给 tr 设置 align 属性，值可以为 center、left、right， 改行所包含的单元格都会生效。
- 给 td 或者 th 设置 align 属性，值可以为 center、left、right， 本单元格都生效。
设置单元格内容垂直对齐方式：（默认：td 和 td 都是居中对齐）
- 给 thead、tbody、tfooter 设置 valign 属性，值可以为 middle、top、bottom， 所包含的单元格都会生效。
- 给 tr 设置 valign 属性，值可以为 middle、top、bottom， 改行所包含的单元格都会生效。
- 给 td 或者 th 设置 valign 属性，值可以为 middle、top、bottom， 本单元格都生效。
② 设置单元格宽高
设置单元格的宽度：
- 给 td 或者 th 设置 widh 属性，除了本单元格受影响，其他行同列的单元格也会受到影响。
设置单元格的高度：
- 给 tr 设置 height 属性，整个一行受到影响。
- 给 td 或者 th 设置 height 属性，除了本单元格受影响，同行的其他单元格也受影响。
3.4 单元格跨行和跨列（重要）
给 td 或者 th 设置属性：colspan 指定跨越的列数rowspan 指定跨越的行数
3.5 表格标签总结
| 标签名 | 功能和语义 | 属性 | 单标签还是双标签 |
|---|---|---|---|
| table | 表格 |
border 属性： 设置表格边框 width 属性： 设置表格宽度 height 属性： 设置表格高度 cellspacing 属性： 设置单元格之间的间距 cellpadding 属性： 设置单元格边框与内容的间距 |
双标签 |
| caption | 表格标题 | 双标签 | |
| thead | 表格的头 |
align 属性： 设置所包含的单元格内容的水平对齐方式。 **valign 属性：**设置所包含的单元格内容的垂直对齐方式 |
双标签 |
| tbody | 表格的主体 |
align 属性： 设置所包含的单元格内容的水平对齐方式。 **valign 属性：**设置所包含的单元格内容的垂直对齐方式 |
双标签 |
| tfoot | 表格的脚 |
align 属性： 设置所包含的单元格内容的水平对齐方式。 **valign 属性：**设置所包含的单元格内容的垂直对齐方式 |
双标签 |
| tr | 行 |
height 属性： 设置本行内所有单元格的高度 align 属性： 设置所包含的单元格内容的水平对齐方式。 **valign 属性：**设置所包含的单元格内容的垂直对齐方式 |
双标签 |
| td | 单元格 |
width 属性： 设置单元格宽度。 height 属性： 设置单元格高度。 align 属性： 设置本单元格内容的水平对齐方式 valign 属性： 设置本单元格内容的垂直对齐方式 colspan 属性： 设置本单元格跨越的列数 rowspan 属性： 设置本单元格跨越的行数 |
双标签 |
| th | 表头单元格 |
width 属性： 设置单元格宽度。 height 属性： 设置单元格高度。 align 属性： 设置本单元格内容的水平对齐方式 valign 属性： 设置本单元格内容的垂直对齐方式 colspan 属性： 设置本单元格跨越的列数 rowspan 属性： 设置本单元格跨越的行数 |
双标签 |
注意：
table 标签中可以省略 thead、tbody、tfoot ，直接嵌套 tr 标签， 浏览器解析页面的时候，会自动在所有 tr 标签的外面包裹一个 tbody 标签。
4 表单
4.1 表单总体设置
<!--表单-->
<form action="http://www.baidu.com/s" target="_blank"><!--输入框--><input type="text" name="wd"><!--提交按钮--><button>搜 索</button></form>
表单中所有的东西都需要包裹在 form 标签中， form 标签就表示一个表单
form 标签具有如下属性：action 属性，可以设置表单的提交地址method 属性，设置提交的请求方式target 属性，设置提交的地址在本窗口打开还是新窗口打开，值：_self、_blank
4.2 表单控件
① 文本输入框
<input type="text">
可以设置 maxlength 属性限制最大输入长度。
② 密码输入框
<input type="password">
可以设置 maxlength 属性限制最大输入长度。
③ 单选按钮
<input type="radio" name="sex"> 女
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 其他
- 多个单选按钮需要把 name 属性的值设置为相同的，才可以实现单选效果。
- 设置 checked 属性，可以让该单选按钮默认选中， checked 属性无需给值。
④ 复选框
<input type="checkbox"> 睡觉
<input type="checkbox" checked> 抽烟
<input type="checkbox" checked> 喝酒
<input type="checkbox"> 烫头发
- 设置 checked 属性，该复选中默认被选中， checked 属性无需给值。
⑤ 提交按钮
<input type="submit" value="提交按钮">
<button type="submit">提交按钮</button>
<button>提交按钮</button>
⑥ 重置按钮
<input type="reset" value="重置按钮">
<button type="reset">重置按钮</button>
⑦ 普通按钮
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
⑧ 文本域
<textarea rows="10" cols="60"></textarea>
- rows 属性设置文本域默认显示多少行，影响文本域的高度。
- cols 属性设置文本域默认一行显示多少字，影响文本域的宽度。
⑨ 下拉选项
<select><option>小学</option><option>初中</option><option>高中</option><option>中专</option><option>大专</option><option>本科</option><option selected>研究生</option>
</select>
- 默认选中的是第一个选项，通过给 option 标签设置 selected 属性让该选项默认选中，selected 属性无需给值。
4.3 表单控件的属性
① name 属性
每个表单控件都应该设置 name 属性，name 属性指定数据名称，表单提交之后，后端程序可以通过数据名称获取数据。
下拉选项中，select 标签设置 name 属性，option 标签不需要。
多个单选按钮只有设置了同值的name属性，才具有单选的效果。
作为按钮的表单控制，不能设置 name 属性。
② value 属性
- 使用 input 标签实现提交按钮、重置按钮、普通按钮，value 属性可以设置按钮上的文字。
- 对于单选按钮和复选框，value 数值指定真正向后端提交的数据。
- 下拉选项的 option，value 属性指定真正提交的数据；如果没有 value 属性，真正提交的数据是option标签内的文字。
- 文本输入框和密码输入框，value 属性可以设置默认显示在输入框内的文字。（注意：文本域指定默认文字写在双标签之间）
③ disabled 属性
- 表单中所有的控件都可以设置 disabled 属性，该属性无需给值即可生效，设置了 disabled 属性之后，该表单控件就不能使用了。
- select 和 option 都可以设置 disabled，select 设置整个下拉选项不能使用，option 设置只有该选项无法给选择。
HTML-列表、表格、表单相关推荐
- 定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
- (18)C#传智:HTML,属性,标签,元素,body,Font,A,列表,表格,表单,Div,Span,框架
比较简单,无事的跳过,直接w3c.school 一.HTML简介 一个实例:右键查看源文件(标签,属性,内容...) HTML文档=网页 HTML超文本标记语言(Hyper ...
- css文本,背景,动画和html列表,表格,表单总结
css文本标签的应用 文本 text-shadow文本阴影:1px 2px 3px color 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 第2个长度值用来设置对象的阴影垂直偏移值.可以为负 ...
- html语法中表格命令具备哪些属性,html 语法介绍 标签及有关属性 列表 表格 表单...
1.HTML简介 HTML是用来做网页 HTML:Herp Text MarkUp Language 超文本标记语言 超文本:超:超链接 包含超链接的文本 标记语言: 标记:标签 语言:制作网页的语言 ...
- HTML基本结构 标签 列表 表格 表单 form input 单选框radio 多选框checkbox 列表框select option 按钮button
文章目录 HTML HTML基本结构 网页的基本标签 标题标签 段落标签 换行标签 水平线 字体样式标签 HTML注释和特殊符号 图像标签 常见的图片格式 语法 案例 链接标签 页面间链接 语法 锚链 ...
- html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录 html如何 ...
- 第三章 表格、列表和表单（黑马程序员课程笔记）
1.表格标签 1.2 表格的基本语法 1.3 表头单元格标签 1.4 表格属性 1.5 表格结构标签 1.6 合并单元格 2.列表 2.1 无序列表 2.2 有序列表 2.3 自定义列表 3.表单标 ...
- js table 生成序号_el-table树形表格表单验证，js树形列表生成序号
树形表格表单验证预览 树形列表生成序号 首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
- js table 生成序号_el-table树形表格表单验证(列表生成序号)
树形表格表单验证预览 树形列表生成序号 首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
最新文章
- spring ref historydesign philosophy
- OpenCV实现Mat与vector，Mat与数组互转
- 04 | 复杂度分析（下）：浅析最好、最坏、平均、均摊时间复杂度
- 你会选择深圳还是佛山？
- canvas 五子棋游戏
- php mysql刷新表格_PHP和AJAMYSQL数据库刷新表格
- 信息权限管理（RMS)
- 用Python写一个滑动验证码
- 福大软工1816：Alpha（5/10）
- 一些代码规范（收集）
- 次时代Java编程(一)：续 vertx-sync实践
- 118、杨辉三角（python）
- PHP连接mysql原生代码
- Linux内核4.14版本——mmc框架——mmc硬件总线扫描流程（以sd card为例）
- 如何设置小程序背景图片大小
- 关于yolov5训练大量数据存在的问题记录
- git: Couldn‘t find remote ref
- Mac 安装包破损 或 软件不受信任无法打开
- CANopen总线的协议详解
- java 计算两个日期相差月数_Java简单计算两个日期月数差的方法