html 表格 列表 表单 select和下拉选框 textarea多行文本域 label关联控件 表

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>定义网页的底部，或者某个区域的底部

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