HTML+CSS---进阶学习03

一、列表

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>