html 表格，列表，表单，select和下拉选框，textarea多行文本域，label关联控件，表单，浮动框架，结构化标签

最新推荐文章于 2024-09-30 15:46:58 发布

luanma3p

最新推荐文章于 2024-09-30 15:46:58 发布

阅读量1.1k

点赞数 9

文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_46170663/article/details/126864695

版权

1. 表格

表格的语法
(1) table标签: 表示表格的开始和结束。表格的所有内容都需要写在这一对标签里
(2) tr标签: 表示表格中的一行 table row
(3) td标签：要写在tr中，这一行中有几个单元格，就有几列
是真正放数据的地方 table datacell
表格的可选标记
(1) caption标签:表格的标题
(2) thead标签:表头部分
(3) tbody标签:表的主体部分
(4) th标签:行/列的标题，文字加粗显示
表格的属性
table标签的属性
border=“1px” 设置边框
bgcolor=“green” 设置背景颜色
bordercolor=“yellow” 设置边框颜色
width=“300px” 设置表格的宽度
height=“175px” 设置表格的高度
table表格里的边框是带有间距的，解决方案就是给table标签加:
style=“border-collapse: collapse;“去掉边框间的间距
align=“center” 设置表格本身的水平对齐方式，注意不是文字居中，而是整张表格在页面居中显示
tr标签的属性
align=”” 设置内容的水平对齐方式 left靠左/center居中/right靠右
valign=“” 设置内容的垂直对齐方式 top靠上/middle居中/bottom靠下
不规则的表格
td标签的属性:
colspan=“n” 跨列，从当前单元格开始，向右合并n个单元格(n也包含当前单元格)
rowspan=“n” 跨行，从当前单元格开始，向下合并n个单元格(n也包含当前单元格)
被合并的单元格一定得删除！
表格的大小
表格的大小是由内容撑起来的
但如果修改了某个单元格的高度，这一行单元格的高度都会随之改变
同理，如果修改了某个单元的宽度，这一列单元格的宽度都会随之改变

2 列表

有序列表

<ol> order list 有序列表
     <li></li> list item 列表项
     <li></li>
</ol>

无序列表

<ul> unorder list 无序列表
     <li></li> list item 列表项
     <li></li>
</ul>

属性
有序列表的属性
start=“4” 指定列表项编号的起始值
type=“1” 指定列表项编号的类型，默认值1，代表阿拉伯数字
a小写字母 A大写字母 i小写的罗马数字 I大写的罗马数字
无序列表的属性
type="disc"实心圆，默认值，还有circle空心圆 square方块 none没有标识
列表的嵌套
ul/ol的直接子元素必须是li
所有被嵌套的内容都需要写在li中
定义列表【了解】
常用来给一类事物定义的情形，比如名词解释，字典等

<dl> 定义列表Definition list 
     <dt>这里要被解释的名词</dt> Definition Type
     <dd>这里写具体的解释内容</dd>  Definition Description
</dl>

3 表单(重点)

特点
(1)提供了一些可视化的输入控件
(2)自动收集整理用户输入的内容，并提交给服务器
表单的语法和属性

<form></form>

可以添加的属性:
(1) action=“url” 向哪个地址提交数据，如果不写，会提交给当前页面本身
(2) method=“get” 表单数据的提交方式
(3) enctype=“” 指定表单数据的编码方式，定义表单允许传什么类型的数据给服务器
application/x-www-form-urlencoded 默认值，允许传递任意字符(不能传文件)
multipart/form-data 可以传递文件和任意字符
text/plain 允许传递普通字符(& = * @等符号都不是普通字符)
3. 表单的控件分类
(1)input元素
(2)select和option下拉选择框
(3)textarea 多行文本域
(4)label关联控件
4. input元素
公共属性:
type 设置input元素的类型，默认值是text
name 为控件起个名字，注意:form表单必须写name,不写提交不了此项数据
value 保存用户输入的值，提交给服务器后，后期可以.value获取提交的用户

输入值
如果控件是按钮，value是按钮上显示的文本
(1)文本框与密码框
type=“text” 普通文本输入框
type=“password” 密码框
属性: maxlength=“5” 设置输入框可输入的最大长度
placeholder=“” 提示文本
value=“” 初始值，不写标签中也会默认存在，值是空字符串
(2)按钮
type=“submit” 提交按钮
自动收集整理用户输入的数据(有name属性的控件)，提交发送请求
type=“reset” 重置按钮
将表单控件初始化，恢复到初始状态，注意！不是清空
type=“button” 普通按钮
需要后期绑定事件，执行对应的JS脚本
注意：按钮上的value代表的是按钮上显示的文字
(3) 单选框与多选框
type=“radio” 单选
type=“checkbox” 多选
属性：
name(必须加)，为控件起名并用于分组
一组单选框/多选框的名称必须相同，才能实现单选/多选效果
value必须写，不然提交的就是on
checked表示当前项被默认选中，是一个单值属性
(4) 文件上传
请选择您要上传的文件
使用的前提:method=“post” enctype=“multipart/form-data”
multiple 可以提交多个文件，也是一个单值属性

5. select和下拉选择框

<select>
     <option></option>
</select>

提交的时候，如果没有给option设置value属性，提交的就是option标签之间的文本，但如果设置了option的value属性，提交的就是value的值
selected 表示该选项默认被选中
multiple 表示下拉选框可以多选，按住Ctrl就可以选择多个选项

6. textarea多行文本域

<textarea name="content"></textarea>

属性：
cols=“30” 文本域的列数，改变的是宽度
rows=“10” 文本域的行数，改变的是高度
注意：默认的文本域大小是可以被用户随意拖拽改变的，想要禁用拖拽:
style=“resize: none;”

7.label关联控件

用于进行form表单中文本和控件的关联，单击文本，效果如同单击控件

<label for="要关联的控件的id值"></label>

8. 表单

input新表单元素(10个)

1.数字控件

<input type="number" step="3" min="10" max="30" name="age">

属性:
min 最小值
max 最大值
step 步长，值递增或递减的大小，默认为1
注意：这个控件无法阻止用户自行输入！
2. 颜色控件

<input type="color">

提供了一个取色器，可以选择不同的色值，默认黑色
3. 日期控件

<input type="date">

只出现日期的选择，因为格式比较单一，因此自定义效果较强的日期插件更加美观合理
4. 月份控件

<input type="month">

星期控件

<input type="week">

邮箱控件

<input type="email">

会有一个输入邮箱地址的文本框，验证必须有@，同时@前后都有内容
7.搜索控件

<input type="search">

提供了一个快速删除的小叉叉

URL控件

<input type="url">

验证内容必须有http://1 这个1是随便写的，代指内容
注意：数据的校验还是要放在后端用JS+正则去判断

电话号码控件

<input type="tel">

电话类型在PC浏览器中与text一样,手机端不一样，会有模拟输入的小键盘

范围控件

<input type="range">

属性：
min 最小值，表示区间的最开始
max 最大值，表示区间的最末尾
step 步长，表示数字移动的跨度
value 用来保存用户拖拽的值，也可以先自定义一个值作为初始值
作用:可以控制区间，比如:音量地图缩放进度
注意:设置步长时尽量选取可以除得尽的值，否则区间中有一部分值会无法选中

9. 浮动框架

iframe是在一个html页面中，引入其它的html页面
属性：
src=“url” 被引入资源的路径
width=“” 被引入资源在本页面显示的宽度
height=“” 被引入资源在本页面显示的高度
scrolling=“no” 是否需要滚动条，默认值auto有滚动条 no不要滚动条
frameborder=“0” 去掉被引入页面的边框线
优势与劣势:

我们可以直接调用已经写好的静态页面，比较方便
页面被引用在多个页面中，可以实现复用
样式不好控制
有额外的链接，请求的次数会增加，速度会变慢

10.结构化标签

h5新增了带有结构语义的标签，来取代div
虽然在用户看来和之前使用div没有区别，但带语义的标签可以增加代码的可读性，很方便的实现页面各个部分的划分，让网络爬虫更快找到
但注意:低版本的浏览器会不兼容，所以先作了解
<header> </header> 定义网页的头部，或者某个区域的顶部
<nav></nav>定义网站的导航链接
<section></section>定义网页的主体
<aside> </aside> 网页的侧边栏
<article> </article> 定义与文字相关的内容，比如论坛回帖
<footer> </footer> 定义网页的底部，或者某个区域的底部