非零基础自学前端最后一遍一 HTML+CSS 12 HTML高级元素 12.11 textarea-select-option

落日映苍穹つ 2024-03-24 08:23 29阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  12 HTML高级元素
         *   *  12.11 textarea-select-option
             *   *  12.11.1 textarea的使用
                 *  12.11.2 select和option的使用

![在这里插入图片描述][f912023755434c388bcb943a0b127f8e.png_pic_center]

#### 一 HTML+CSS ####

#### 12 HTML高级元素 ####

##### 12.11 textarea-select-option #####

###### 12.11.1 textarea的使用 ######

*  textarea的常用属性:
    
     *  cols：列数
     *  rows：行数
 *  缩放的CSS设置
    
     *  禁止缩放：resize: none;
     *  水平缩放：resize: horizontal;
     *  垂直缩放：resize: vertical;
     *  水平垂直缩放：resize: both;

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        textarea {
          
          resize: vertical;
        }
      </style>
    </head>
    
    <body>
    
      <form action="">
        <label for="info">
          个人描述:
          <textarea name="info" id="info" cols="10" rows="6"></textarea>
        </label>
      </form>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][52f961b8448d481b89996619e24f7ee7.png_pic_center]

###### 12.11.2 select和option的使用 ######

*  option是select的子元素，一个option代表一个选项
 *  select常用属性
    
     *  multiple：可以多选
     *  size：显示多少项
 *  option常用属性
    
     *  selected：默认被选中

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <select name="fruits" id="" multiple size="2">
        <option value="apple" selected>苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橘子</option>
      </select>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][f955c665a3bd4c7792695a32bdd02e9a.png_pic_center]

[f912023755434c388bcb943a0b127f8e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/ad972e98a5a04dbea25d6a14d729ff76.png
[52f961b8448d481b89996619e24f7ee7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/3532043351cc422ea763e106be2aa28b.png
[f955c665a3bd4c7792695a32bdd02e9a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/8093c5ae78df4ebbb86fba9e8669bdca.png