HTML5(下)

目录

表格标签

表格的主要作用

表头单元格标签

表格结构标签

合并单元格

 列表标签

无序列表

有序列表

自定义列表

表单

表单域

表单控件(表单元素)

表单元素

 label标签

 select下拉列表

textarea文本域元素

 案例-注册页面


表格标签

表格的主要作用

表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要

是用于定义表格的标签

标签用于定义表格中的行,必须嵌套在

标签中

用于定义表格中的单元格,必须嵌套在标签中

td指表格数据,即数据单元格的内容

表头单元格标签

一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示

标签表示HTML表格的表头部分


    
    
    
    
姓名 性别 年龄
刘德华 58
张学友 58
黎明 58
郭富城 58

HTML5(下)_第1张图片

表格结构标签

因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分

在表格标签中,分别用:标签表格的头部区域、标签表格的主体区域这样可以更好的分清表格结构

用于定义表格的头部。内部必须拥有标签,一般是位于第一行

用于定义表格的主体,主要用于存放数据本体

HTML5(下)_第2张图片

合并单元格

跨行合并:rowspan=“合并单元格的个数”

跨列合并:colspan="合并单元格的个数"

目标单元格:跨行合并则最上侧单元格为目标单元格;跨列合并则最左侧单元格为目标单元格

谨记需要删除多余的单元格


    

HTML5(下)_第3张图片

 列表标签

表格是用来显示数据的,列表是用来布局的

无序列表

    • 标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用
    • 标签定义
      • 中只能嵌套
      • ,直接在
          标签中输入其他标签或者文字的做法是不被允许的
        • 之间相当于一个容器,可以容纳所有元素
        • 无序列表会带有自己的样式属性
        
            

        您喜欢的食物?

        • 榴莲
        • 臭豆腐
        • 鲱鱼罐头

        HTML5(下)_第4张图片

        有序列表

          1. 标签用于定义有序列表,列表排序以数字来显示,并且使用
          2. 标签来定义列表项
            1. 中只能嵌套
            2. ,直接在
                标签中输入其他标签或者文字的做法是不被允许的
              1. 之间相当于一个容器,可以容纳所有元素
              2. 有序列表会带有自己的样式属性
              
                  

              粉丝排行榜

              1. 刘德华
              2. 马德华
              3. 刘德划

              自定义列表

              自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号

              标签用于定义描述列表(定义列表),该标签会与
              (定义项目/名字)和
              (描述每一个项目/名字)一起使用

              
                  
              关注我们
              新浪微博
              官方微信
              联系我们
              • 里面只能包含
              • 个数没有限制,经常是一个
                对应多个

              表单

              使用表单目的是为了收集用户信息 

              一个完整的表单通常由表单域、表单控件提示信息三个部分组成

              表单域

              一个包含表单元素的区域

              在HTML标签中,

              标签用于定义表单域,以实现用户信息的收集和传递

              会把它范围内的表单元素信息提交给服务器

              
                  各种表单元素控件
              
              属性 属性值 作用
              action url地址

              用于指定接收并处理表单数据的服务器程序的url地址

              method get/post 用于设置表单数据的提交方式,其取值为get或post
              name 名称 用于指定表单的名称,以区分同一个页面中的多个表单域

              表单控件(表单元素)

              表单元素

              属性 属性值 描述
              name 用户自定义 定义input元素的名称
              value 用户自定义 input元素的值
              checked checked 此input元素首次加载时应当被选中
              maxlength 正整数 规定输入字段中的字符的最大长度
              • name和value是每个表单元素都有的属性值,主要给后台人员使用
              • name是表单元素的名字,要求单选按钮和复选框要有相同的name值
              • checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就可以默认选中某个表单元素
              • maxlength是用户可以在表单元素输入的最大字符数,一般较少使用
              
                  
              用户名:
              密码:
              性别:男
              爱好:吃饭 睡觉 刷抖音


              上传头像:

              HTML5(下)_第5张图片

               label标签

              
                     

               select下拉列表

              • textarea文本域元素

                 当用户输入内容较多时,我们就不能使用文本框表单了,此时我们可以使用

                 案例-注册页面

                
                
                
                    
                    
                    
                    综合案例-注册页面
                
                
                    

                青春不常在,抓紧谈恋爱

                性别:
                生日:
                所在地区:
                婚姻状况: 未婚 已婚 离婚
                学历:
                喜欢的类型 妩媚的 可爱的 鲜肉的 全都要
                个人介绍
                我同意注册条款和会员加入标准
                我是会员,立即登录
                我承诺
                • 年满18岁,单身
                • 抱着严肃的态度
                • 真诚寻找另一半

                HTML5(下)_第6张图片

          你可能感兴趣的:(HTML,html,前端)