前端学习day2（Html5--列表、表格、表单）

目录

​编辑

列表：

​编辑

无序列表（ul,li）：

有序列表(ol,li)：

定义列表(dl,dt,dd)：

表格(table,tr,th,td)：

表格中合并单元格(rowspan,colspan)：

表格中合并相邻边框border-collapse:

表单：

form标签：

autocomplete属性：

reset()方法：

 input标签：

type属性:

text

password

radio

checkbox

file

placeholder占位符属性：

input.value获取用户输入内容

input.required = 'true'

下拉菜单：

​编辑文本域textarea：

属性value指用户输入的内容

属性row和col限定行列数

属性maxlength限定最大长度

css样式中resize:none;不让文本域拖拽

label标签（两个功能）：

button按钮：

type属性：（需搭配form标签才可以实现其功能）

submit(默认)

reset

button

按钮禁用disabled：

无语义的布局标签（div，span）：

​编辑

字符实体（空格，小于大于号）：

---

列表：

无序列表（ul,li）：

ul（unordered list） 嵌套li（list）

ul中只能包裹li；

li中可包裹任一内容。

有序列表(ol,li)：

ol（ordered list） 嵌套 li（list）

ol中只能包裹li；

li中可包裹任一内容。

定义列表(dl,dt,dd)：

dl（definition list） 嵌套 dt（列表标题title）和dd （列表描述description）；

dl中只能包含dt和dd；

dt和dd中可以包括任一内容。

表格(table,tr,th,td)：

table 嵌套 tr（表格的行数row），tr嵌套th【这样才可知第几行有什么元素】（表格头部head）和td（表格主体body）；

要对table标签加属性border=“填入数字” 才会显示表格；

表格会自动根据内容而撑开，若需要特定宽高可用rows和cols属性

表格的结构标签是供代码人员来读的：

表格中合并单元格(rowspan,colspan)：

 

表格中合并相邻边框border-collapse:

border-collapse:collapse;

表单：

form标签：

HTML 

 元素表示文档中的一个区域。一般用来包裹表单控件

autocomplete属性：

表单中form的autocomplete的功能是打信息会有之前对应的记录条。设为off为无。

reset()方法：

表单对象原型中有reset()方法 重置表单中表单控件为默认值。

name属性：

在form下填写name点提交会跳转到提交地址。

 input标签：

type属性:

text

password

radio

checkbox

file

注意：

这里的text是单行文字不会换行；

单选框要通过name属性说明是哪几者之间选一个；

多选框中有默认选中checked；

file默认只上传一个文件，若需上传多个，要添加multiple属性；

效果：

placeholder占位符属性：

灰白部分提示信息。

input.value获取用户输入内容

input.required = 'true'

在 form中使用，搭配input和butto，input中添加required 属性 则非空不让提交。

下拉菜单：

select 嵌套 option;

selected是指默认显示，默认第一项

文本域textarea：

属性value指用户输入的内容

属性row和col限定行列数

属性maxlength限定最大长度

属性placeholder与input用法同

css样式中resize:none;不让文本域拖拽

label标签（两个功能）：

一般采用第二种 直接让label包裹着要增大的控点范围。

button按钮：

type属性：（需搭配form标签才可以实现其功能）

submit(默认)

reset

button

原因是type中提交、重置需告诉网页范围。

按钮禁用disabled：

属性名与属性值同名。是按钮禁用的意思。

无语义的布局标签（div，span）：

字符实体（空格，小于大于号）：

网页特点，在代码中敲空格，网页只能识别一个空格