Web前端知识第二节——表单、表格、列表

一、图片

1、图片格式

1. BMP： 位图 ( 点阵图 ) 通常是不压缩的，占用空间大色彩丰富
2. JPEG：（JPG） 压缩方式通常是破坏性数据压缩，在压缩过程中图像的质量会遭受到可见的破坏
3. GIF： 对透明色和多帧动画的支持，优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小，可设置透明色以产生对象浮于背景之上的效果。
4. PNG： 无损压缩的位图图形格式，支持Alpha通道的透明/半透明特性

2、图片标签

图片标签四要素：src alt width height

1. src图片路径：绝对路径、相对路径
2. alt属性：用来描述图片内容
3. 宽高属性：width、height 如果不给宽高，浏览器会计算宽高浪费一些时间
4. title：用来显示描述图片

二、列表

1、无序列表

默认会有小黑原点，type属性有：

disc： 默认，小黑原点
square： 实心的方块
circle： 空心圆

	
你好
	
我好
	
大家好

2、有序列表

type属性：

1： 数字列表排序
a： 小写字母排序
A： 大写字母排序
i： 罗马小写字母排序
I： 罗马大写字母排序

	
哈哈
	
啦啦
	
棒棒

3、自定义列表

	
    #标题
	
  #描述

三、form表单

表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表、单选框（radio-buttons）、复选框（checkboxes）等等，最终通关提交来传给服务器

1、input标签

赋予不同type值可实现不同表单控件功能

2、type类型

type类型	作用
text	文本输入框
password	密码输入框（禁止复制）
radio	单选按钮，配合name排斥checked
checkbox	复选框，可选择多个选项
submit	提交按钮，收集数据传递给后端

3、下拉列表

selected = “selected” 默认选中
disabled=“disabled” 禁止选中
size = “2” 显示两行

    音乐
    运动
    玩游戏
    学习

4、多行文本输入框（文本域）：

cols显示多少列，rows显示多少行

5、表单form属性

form属性：
action： 指定提交到哪个URL
method： 提交方式(GET、POST)

四、form表单元素

1、按钮：

可供用户点击

2、重置按钮：

回归初始化状态

3、文件按钮：

可供用户打开文件框选择文件

4、隐藏域：

  目的在于收集或发送信息

5、label 标签：

标签为input元素定义一个标注（标记），label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。

音乐

学习

6、表格

属性	作用
tr	代表行，包含一个或多个列
colspan	跨列
rowspan	跨行
caption	表格名字
thead	表格标题(th)
tbody	表格内容

	

		
1
	
	

		
2
	
    

		
3
	
	

		
4
	

五、效果总览