列表标签、表格、表单、input标签及控件

列表标签
    html中有 有序列表(ol)、无序列表(ul)和自定义列表(dl)  。不管何种列表,其中只能涵盖列表项标签(li),dl标签除外
    有序列表
        


                有序列表标签,第一层嵌套内只能包含

  1.         

  2.             列表项标签,可以包裹任何标签和文本,块级元素
        无序列表
            

                  无序列表标签,第一层嵌套内只能包含

    •       type="disc"` 默认的
      type="circle"` 空心圆点
      type="square"` 小正方形(实心的)
          嵌套列表
              当需要多级⽬录,或多级列表时,可采取列标签套的⽅法,写法与普通列表书写⽅法⼀样,只是在列表项中再增加列表。
          表格
              表格标签
                  

                      应用于pc端部分分布,手机端不可用table标签布局
                        表格标题标签
                      只可以包裹文本,必须在
      标签内嵌套的第一行出现
                      表头标签
                      表体标签
              表格的行列
                    行标签
                    加粗列标签,一般放在表头,当作列标题使用
                    列标签
              表格标签的相关属性
                  标签下的属性
                      border    表格边框宽度
                      height     表格整体高度
                      width       表格整体宽度
                      border-collapse     需要写在 style 样式中`style="border-collapse: collapse;"`  除去缝隙
                      cellpadding     边框与单元格的距离
                      cellspacing        单元格边框宽度
                      align
                          对齐方式
                              left、center、right
                      bgcolor        表格背景颜色
                      background
                          url
                              表格的背景图片
                  
      标签下的常用属性
                      width
                          设置单元格的宽
                      heigth
                          设置单元格的高
                      align
                          left、center、right
                              水平移动
                  拆分、合并单元格
                      colspan
                          合并列
                      rowspan
                          合并行
          表单元素
              表单标签
                  

                      表单标签
                  常用属性

                      name   主要是对这个from进行标记
                      methood="get/post"   
                      action       处理表单提交的URL(可以为node中的路由接口地址)
                      enctype
                          当method属性值为post时,enctype 就是将表单的内容提交给服务器的媒体类型。application/x-www-form-urlencoded:未指定属性时的默认值。
                  input标签及控件
                           最重要的表单元素。它有很多形态  
                      input 标签是内联元素,但属于特殊的内联元素,可以定义宽度高度,单不自占一行        
                      文本框
                          type="text"`定义单行文本输入域,用户可在其中输入文本
      value=""`代表初始值,用户输入后可通过事件获取该属性的值
      placeholder="xxx"` 占位符,可用来作为对用户的提示文字
      name=""`可与服务器交互数据的元素标示,可以在服务器端根据其 name 取得元素提交的值
      maxlength` 属性配合使用,可创建合法值范围,直接写数字
       
                      密码框
                          type="password"`定义密码输入域,用户在该域中输入的字符不直接显示,而是显示星号或实心圆。
      具有`value、placeholder、name`属性
       
                      单选框
                           `type="radio"`定义单选框,用户只能在多个选项中选择其中一个。
                          checked` 属性代笔表默认被选中的,可以不用写值 
                          例:
                      复选框
                          type="checkbox"`定义复选框,用户可以在多个选项中选择一个或多个。
                          复选框有一个很重要的属性,name 属性。name 属性相同则可以让复选框变为一组,从而达到记录复选内容的目的。
                          例:吃⾯ 
      吃饭 
      吃⼟ 
                      按钮
                          type="submit"`定义提交按钮
                          type="reset"`重制表单里所有的内容会被清空,默认按钮文字为重制
                          type="button"`普通按钮没有功能,需要 value 属性指定按钮文字
                          例: 

       
                      文件上传
                          type="file"` 的`` 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上
                          multiple`属性表示允许选择多个文件。 当这个属性存在在标签中,则可以同时上传多个文件。
                          例: 
         
       
                      html5新增type属性
                          type="number"`用于输入数字的字段,其中 min 设定允许的最小值;max 设定允许的最大值;value 规定默认值;还有 step 可规定合法数字间隔;
                          type="email"`专用于 email 的输入,省去了正则表达式的编写
                          type="color"`使用 color 属性能直接调用系统的颜色调节窗口,默认为黑色
                          type="range"`定义用于精确值不重要的输入数字的控件;min 属性指定最小值限制,max 属性指定最大值限制,step 属性规定合法数字间隔,value 属性规定默认值,
                          type="date"`可用来选择或输入日期,包括(年/月/日)不包括时间
                      标记标签
                          
                              它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件
                          例: 
       
                      菜单标签
                          ` 下拉菜单标签,双标签,但不能单独存在,只能包裹
                          ` 标签是选项标签
                          `的`value`属性是可以获取并且得到该下拉菜单用户选择的是哪一项
                          multiple`属性代表该下拉菜单可以多选。
                      文本域
                          `文本域标签具有滚动条的多行文本输入控件,与单行文本框 text 控件不同
                          它不能通过 maxlength 属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求。
      - 文本域禁止缩放的样式`resize:none;`
                          例:

      你可能感兴趣的:(HTML,html5,html,css)