Html02

 一:表格的实现:
    1:表格:用户整齐数据 table
        1:table:
            <table><!--表格标签-->
                <caption><h1><!--表格标题--></h1></caption>
                <tr><!--行标签-->
                    <th><!--表格表头 加粗,居中对齐--></th>
                    <td><!--单元格文字标签--></td>
                </tr>
            </table>
        2:tr只能嵌套td标签 行
        3:td中可以嵌套其他的标签  单元格
        4:表头单元格:th
        5:属性:
            1:border:边框
            2:cellspacing:单元格与单元格之间的距离
            3:cellspadding:设置单元格内容与单元格边框的空白距离
            4:width:表格宽度
            5:height:表格高度
            6:align:设置表格中的水平对齐方式,left,center,right
        6:th与td等价
        7:表格标题<table><caption></caption></table>
        8:合并单元格:两种方式: 先上后下,先左后右
            1:跨行合并:将N行的单元格进行合并  
                方式:rowspan="合并的个数"
            2:跨列合并:将N列
                方式:colspan="合并的个数"
                1:寻找牧目标单元格;
                2:计算合并个数;
                3:删除多余单元格;
        9:表格划分结构:
            1:表标题
            2:表头 
            3:表主体内容
            4:表脚注
            thead:内部必须拥有tr标签
            tbody
            tfoot
            更好的分清楚表格结构,让表格结构更清晰
    2:表单:用于收集用户信息
        1:表单标签:
            常用的注册类表单:
                1:input控件(重点)
                    2:内容:
                        1:表单标签
                        2:提示文本
                        3:表单域
                    3:type:
                            1:text 文本
                            2:password 密码
                            3:radio  (需要同一个name)
                            4:checkbox(需要同一个name)
                            5:button 按钮
                            6:submit 提交表单内容
                            7:reset  重置表单填写信息
                            8:image  图片按钮
                            9:file   文件选择提交,文件域    
                    4:name:控件名称 用于区分每个控件
                         value:控件中默认的文本值
                          checked:默认的选中状态 checked="checked"
                          maxlength:允许输入的最多字符数
                2:label标签
                    作用:当用户点击label标签的时候,被绑定的标签会获得输入焦点
                        方式:1:label标签直接嵌套input标签实现绑定
                             2:通过for和id进行控制
                                  1:input设置id
                                  2:label 设置for="id"
                    使用方式:
                        <label>name</label>
                3:textarea:文本域,写的字比较多,双标签,用于留言模块
                    作用:就是一个文本域
                    input text 只能显示一行
                    textarea 能显示输入多行
                    使用方式:
                    <textarea></textarea>
                4:select:下拉菜单
                    1:作用:下拉选择菜单
                    2:使用方式:
                        <select>
                            <option>选项1</option>
                            <option>选项2</option>
                            <option>选项3</option>
                        </select>
                    3:selected="selected" 表示默认选中
                    4:缺点:
                        1:在不同的浏览器展示的样式不同
                        2:样式很难去修改
                    5:改进方式:div+ul+li
            2:表单域:form :表单域,收集用户信息后提交信息到服务器
                1:使用方式:
                    <form action="url地址" method="提交方式" name="表单名称">各种表单控件</form>
        
    3:列表:用于布局(列表标签),比表格的自由度更高
        1:无序列表ul:使用很多,需重点掌握,
            应用场景:
            <ul>
                <li><div><img><span></li>
                <li>列表选项2</li>
                <li>列表选项3</li>
            </ul>
        2:有序列表ol:使用不多,了解即可
            应用场景:
            <ol>
                <li>列表选项1</li>
                <li>列表选项2</li>
                <li>列表选项3</li>
            </ol>
        3:自定义列表(理解)dl:
            <dl>
                <dt></dt>
                <dd></dd>
            </dl>


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值