HTML+CSS---进阶学习03

HTML+CSS 专栏收录该内容
5 篇文章 0 订阅

一、列表

1.有序列表
  • 其中,ol里边只能放li标签,li的父元素只能是ol或者ul , li里可以放其他标签
 <ol type="1" start="3" reversed>
        <li>少年</li>
        <li>微微</li>
        <li>857</li>
  </ol>
  type : 排列顺序的类型  1 a A i I
  start 从几开始排列
  reversed 倒序
2.无序列表
 <ul type='square'>
        <li>你好</li>
        <li>少年</li>
        <li>高考</li>
        <li>加油</li>
    </ul>
    
  type : disc(默认实心圆) circle 空心圆  square 实心方块
可通过css样式去掉默认的小圆点
  <style>
        ul{
            list-style: none;
        }
        ol{
            list-style: none;
        }
    </style>
3.自定义列表
  • dd是对dt的解释说明 , dd和dt是兄弟关系
 <dl>
        <dt>肉类</dt>
        <dd>牛肉</dd>
        <dd>羊肉</dd>
        <dd>大肉</dd>
        <dt>蔬菜</dt>
        <dd>香菜</dd>
        <dd>白菜</dd>
        <dd>油麦菜</dd>
        <dd>娃娃菜</dd>
    </dl>

二、表单

1.form标签
  • action属性 : 用来设置提交的地址
  • method属性:设置提交方式
    • get 默认
    • post
      • get和post的区别(了解)
        • get不安全,post 相对安全
        • get 用来获取信息,post 用来提交信息
        • get 受url地址长度的限制
2.input标签
  • type 属性

    • text 文本框

    • password 密码框

    • radio 单选框

      • 多个单选按钮需要设置相同的name属性值

      • 如果想点击文字,选中相对应的单选按钮 ,相对应的单选按钮设置id属性,把文字放到lable标签里,通过for属性指定为设置的id名

        <input type="radio" id="girl" name="sex"> 
        <label for="girl">女</label>
        
    • checkbox 复选框

    • file 上传文件

    • submit 提交按钮

    • reset 重置按钮

    • button 普通按钮

    • image 以图片形式提交 配合src属性使用(src用来指定图片地址)

  • name属性 : 单选框中设置相同的name值,只能选其中一个, 提交时必须设置name属性才能提交

  • value 属性 : 单选和复选框提交时的内容是value设置的值,如果不设置就是on ; 设置到输入框里,表示的是默认值; 如果设置到按钮上可以改变按钮上默认的文字

  • placeholder属性 : 提示用户输入框里要输入什么内容

  • checked 属性 : 用来设置单选框和复选框默认选中项

  • maxlength属性: 用来设置输入框所能输入的最大长度

  • disabled属性 : 禁用状态,用户不能修改,不能提交

  • readonly 属性 : 只读状态,用户不能修改,可以提交

3.select 下拉列表
  • 注意: name属性是设置到select标签上,提交时必须要给option标签设置value值, select和option固定嵌套
  • selected 属性 : 用来设置下拉列表的默认选中项
  • size属性 : 用来设置一次显示几个选项
 <select name="address" >
            <option value="j">济南</option>
            <option value="b">北京</option>
            <option value="上海">上海</option>
            <option value="黑龙江">黑龙江</option>
</select>
4.文本域
<textarea name="jieshao" ></textarea>

可通过css样式,禁止用户拖拽大小

<style>
      textarea{
            resize: none;
        }

</style>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值