html table表格 form表单

目录

01 table表格标签

02 表格标题及语义化标签

03合并单元格属性

04 form表单的使用及常见的表单控件

05 表单提交的使用

06表单控件的通用属性

07 无语义化标签

---

01 table表格标签

<table></table>表格标签

<tr></tr>表示表格标签中的行

<td></td>表示表格标签中的列

1.table 标签的常用属性:

        border=" " 边框宽度  默认是0

        width=" "  宽度

        height =" " 高度

        align ='left(左对齐) |center(居中对齐)| right(右对齐)'  表格在页面中的对齐方式

        cellspacing=" 10px"  表示单元格之间的间距是10px

        cellpadding="10px " 表示单元格内部内容到单元格周围的距离是10px

2.tr 标签的常用属性

        align=" left(左对齐) |center(居中对齐)| right(右对齐)" 当前行文本的横向的对齐方式

        valign=" top(顶部对齐) | center(居中对齐) | bottom(底部对齐) "当前行文本的垂直对齐方式

        bgcolor="red" 设置当前行的背景颜色为红色

3.td 标签的常用属性

       align=" left(左对齐) |center(居中对齐)| right(右对齐)" 当前单元格文本的横向的对齐方式

        valign=" top(顶部对齐) | center(居中对齐) | bottom(底部对齐) "当前单元格文本的垂直对齐方式

        bgcolor="green" 设置当前单元格的背景颜色为绿色

02 表格标题及语义化标签

<caption></caption> 表格标题标签

<th></th> 表头标签 (th代替td实现表头效果)

语义化标签:(标签本身没有什么效果,但是代表了一定的结构,让表格结构更清晰)

        <thead></thead> 表格表头标签 

        <tbody></tbody> 表格主题标签

        <tfoot></tfoot> 表格页脚标签

03合并单元格属性

合并行: rowspan="合并的行数"  高度变高

合并列: clospan="合并的列数" 宽度变宽

04 form表单的使用及常见的表单控件

表单的作用:收集用户信息 把这些信息发送给服务器

表单分类:

        1.表单域

                <from></from> 表单标签 所有的表单控件都要放到表单域里面

        2.表单控件

                标签名: <input>

                input标签的type属性不同表示不同的控件

                type="text"  普通输入框

                type="password" 密码输入框

                type="radio" 单选框 (只有有相同的name属性的可以互相单选)

                type="checkbox" 多选框 

                下拉列表框: select option

                        

                        多选菜单 在select标签上面添加multiple属性

                按钮:

                        input type= "button" 普通按钮

                        input type= " reset" 重置按钮

                        input type = "submit" 提交按钮

                多行文本标签:<textarea></textarea>

                        

05 表单提交的使用

所谓的表单提交就是把表单域里面的表单控件收集到的用户信息提交给form标签action属性所指向的服务器的地址。

前提是：表单域内必须有提交按钮  点击时会自动提交。

form表单的属性：

        action=" "  填写服务器地址

        method=" " 提交方式 

                常用的提交方式为get(默认值) 提交方式 和 post 提交方式

                get提交方式:默认是在地址栏通过?拼接  以键值对的方式提交

                         ?键1=值1&键2=值2....

        带有name属性的表单控件 可以被表单域提交

06表单控件的通用属性

        name 有name的表单控件才会被提交

        value 表单提交时 是根据name提交value name是键 value是值

        disable 表单控件禁用属性 表单控件被禁用后 不会被提交

       1. type='text' 输入框

                常用属性：

                        readonly 只读表示输入框内容不可修改

                        placeholder 输入框占位提示文字

                        value 输入框默认输入内容

       2. type='password' 密码框

                常用属性:

                        readonly 只读表示输入框内容不可修改

                        placeholder 输入框占位提示文字

                        value 输入框默认输入内容

       3. type='radio'单选框

                value属性是用来被提交的值  选中哪一个提交哪一个value

       4. type='checkbox'多选框

                value属性是用来被提交的值  选中哪一个提交哪一个value

                以上两个默认被选中需要添加checked

       5. select 下拉菜单

                name写到select标签上面

                option的value是被提交的值

                哪一个option被选中 就提交哪一个option标签的value值

                如果option没有定义value 则默认提交标签内部文本

       6. 文本控件

                input type=file 可以选取本地文件 进行文件上传

        7.图片提交按钮

                input type=image src关联图片的地址

        8.label信息提交控件

                <label for="mobile">手机号：</label>

                <input type="text" id="mobile">

                for属性 可以关联一个表单控件的id属性 便是和控件之间联动

        按钮的另一种标签：

                button标签 内部定义按钮

                <button type =" "></button>

                 默认是是提交按钮的功能

                button的type属性控制按钮的功能

                        1.type='submit' 默认值 提交按钮

                        2.type='reset' 重置按钮

                        3.type='button' 普通按钮

        表单分组:

                <fieldset>   分组标签

                        <legend></legend>  分组标题标签

                </fieldset>

07 无语义化标签

<div></div> div标签 独占一行 是块级元素

<span></span> span标签 不独占一行 是行内元素

语义化标签:标签本身没有什么效果, 但是代表了一个意境或者代表了一定的结构

        <header>页头部分</header>

        <nav>导航部分</nav>

        <main>主体部分</main>

        <footer>页脚部分</footer>