美文网首页
HTML与CSS的图片表格表单

HTML与CSS的图片表格表单

作者: 乐学小乐 | 来源:发表于2020-10-23 09:42 被阅读0次

图片

​ img 元素向网页中嵌入一幅图像。

​ 注意：从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img src="" alt="" >

必须属性

属性 值 描述
alt text 规定图像的替代文本，一般在图片无法正常显示占位的文字。
src URL 规定显示图像的 URL。

常用属性

属性 值 描述
align top、bottom、middle、left、right 规定如何根据周围的文本来排列图像
border pixels 定义图像周围的边框
height pixels、% 定义图像的高度。
width pixels、% 定义图像的宽度。
title 文本 当鼠标在图片上时显示的文字

表格

​ <table></table> 标签定义 HTML表格。

​ <tr></tr>标签定义表格的行。tr元素包含一个或多个th或td元素

​ <td></td>标签定义 HTML 表格中的标准单元格。

​ <th></th>定义表格内的表头单元格。th元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

​ 简单的HTML表格由table元素以及一个或多个tr、th、或td元素组成。

​ 理解：table相当于一个表格的外框，tr为行，td为一个一个单元格，th为有标题作用的单元格，th中的内容同时有加粗的效果。

常用属性

属性 值 描述
align right、center、left 表格对齐方式
border px 规定表格边框的宽度
width % 、px 规定表格的宽度

tr常用属性

属性 值 描述
align right、left、center 定义表格行的内容对齐方式。
bgcolor rgb(x,x,x)、#xxxxxx、colorname 规定表格行的背景颜色，以后可以用样式取代它
valign top、middle、bottom 规定表格行中内容的垂直对齐方式，以后可以用样式取代它

​ <td>的colspan和rowspan分别规定单元格横跨的列数和行数

表单

form

​ <form> 标签用于为用户输入创建 HTML 表单。

​ 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。还可以包含 textarea等元素。

​ 表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。

常用属性

属性 值 描述
action URL 规定当提交表单时向何处发送表单数据
method get、post 规定用于发送 form-data 的 HTTP 方法
name Form_name 规定表单的名称
target _blank _self _ parent _top framename 规定在何处打开 action URL

​ method：表单提交方式：get、post

​ get：默认，主动的获取方式，数据放在url上，数据的容量有限，安全性差，有缓存

​ post：数据放在请求实体中，数据量理论上没有限制，相对安全，没有缓存

input

​ <input> 标签用于搜集用户信息。

​ 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮等等。

常用属性

属性 值 描述
alt text 定义图像输入的替代文本。
checked checked 规定此 input 元素首次加载时应当被选中。
disabled disabled 当 input 元素加载时禁用此元素。
readonly readonly 规定输入字段为只读。
maxlength number 规定输入字段中的字符的最大长度。
value value 规定 input 元素的值。
type button
checkbox
file
hidden
image
password
radio
reset
submit
text		 规定 input 元素的类型。按钮复选框文件隐藏域图像形按钮密码单选框重置按钮提交按钮文本

若上传文件，请求方式为post，且表单添加一个属性:enctype="multipart/form-data"

注意：

​ 1. 没有name属性的属性是无法提交到后台的！！！！

​ 2. Radio单选按钮以name相同为一组。

​ 3. Checkbox复选按钮以name相同为一组。

textarea

​ 该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定 textarea 的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

<textarea>content</textarea>
label

​ <label> 标签为input 元素定义标注（标记）。

​ label元素不会呈现任何的特殊效果。

​ label标签的for属性应当与相关元素的id属性相同，此时点击label标签会自动为元素聚焦

<label for="username">用户名：</label>
<input type="text" id="username" name="username"/>
button
<button>按钮</button>

常用属性

属性 值 描述
disabled disabled 禁用该按钮。
type button、submit、reset 规定按钮的类型。
value text 规定按钮的初始值。
name button_name 规定按钮的名称。
select

​ <select>用于定义下拉列表

<select name="color" >
    <option value="red">红色</option>
    <option value="green">绿色</option>
    <option value="blue">蓝色</option>
</select>

select常用属性

属性 值 描述
disabled disabled 禁用该下拉框。
multiple multiple 规定可选择多个选项。
name name 规定下拉列表的名称。
size number 规定下拉列表中可见选项的数目。

option常用属性

属性 值 描述
disabled disabled 禁用该下拉框。
selected selected 规定选项（在首次显示在列表中时）表现为选中状态。
value text 定义送往服务器的选项值。

相关文章