HTML/CSS列表，表格，表单（学习整理）_html 导航表格-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46673313/article/details/108253918

列表

<style>
ul{
  list-style:none;
  }
  </style>

清除ul前面的默认样式一般写代码时不需要前面的数字或者图形

ul无序列表

<body>
    <ul>
        <li>苹果</li>
        <li>西瓜</li>
        <li>葡萄</li>
        <li>榴莲</li>
    </ul>
</body>

在这里插入图片描述

ol有序列表

<body>
    <ol>
        <li>苹果</li>
        <li>西瓜</li>
        <li>葡萄</li>
        <li>榴莲</li>
    </ol>
</body>

在这里插入图片描述

自定义列表

<body>
    <dl>
        <dt>水果</dt>
        <dd>西瓜</dd>
        <dd>葡萄</dd>
        <dd>榴莲</dd>
    </dl>
</body>

在这里插入图片描述

表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 100px;
            height: 100px;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
   <table border="1">
       <tr>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
       </tr>
       <tr>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
       </tr>
   </table>
</body>
</html>

定义一个2行4列的表格并设置宽高为100像素边框为1
在这里插入图片描述

表格的属性：rowspan 行合并
colspan 列合并

表单

form：表单

<body>
<form action="表单提交到的页面" method="提交的方法">

   </form>
</body>

imput框

<body>
   <input type="text">
</body
文本框

<body>
   <input type="submit">
</body>
提交按钮

<body>
   <input type="button">
</body>
按钮

<body>
   <input type="reset">
</body>
重置按钮

<body>
   <input type="password">
</body>
密码框 
属性值 minlength(最小长度） maxlength(最大长度)

<body>
   <input type="radio" name="sex">男
   <input type="radio" name="sex">女
</body>
注意：一组按钮必须给同一个name值 否则就不能完成单选

<body>
   <input type="checkbox" name="fruit">苹果
   <input type="checkbox" name="fruit">香蕉
   <input type="checkbox" name="fruit">西瓜
</body>
同样 name需要给一个相同的值

有时候我们需要点击文字的时候复选框按钮一样可以选中

<body>
   <label for="apple">西瓜</label>
   <input type="checkbox" name="fruit" id="apple">
</body>
当我们点击西瓜的时候它所对应的复选框被选中
注意：for和id的属性值必须一致

<body>
   <select name="" id="">
       <option value="">北京</option>
       <option value="" selected>上海</option>
       <option value="">深圳</option>
   </select>
   下拉框中的值用option包裹起来
   selected为选中
</body>

在这里插入图片描述

文本域

<body>
   <textarea name="" id="" cols="30" rows="10">
       
   </textarea>
</body>
cols 和 rows 是以字符为单位

 <style>
      textarea{
          resize: none;
      }
    </style>
    去掉文本输入区的大小缩放功能

没加resize: none时可以缩放
在这里插入图片描述
加了resize: none后不能缩放了

补充：

place holder=" " 用于输入前的默认提示
disabled 设置按钮禁用
readonly 设置文本框只读
checked 默认按钮被选择