html中列表，表单，表格

列表

有序列表

<!-- 
        有序列表,ol里面只能放li标签，li里面随便放什么标签
        会生成1,2,3序号
        type是生成的序号的取值方式
        start:开始序号,取值只能是数字
    
    -->
    <ol type="I" start="10">
        <li>123</li>
        <li>234</li>
        <li>345</li>
    </ol>

无序列表

  <!-- 
        无序列表：列表中的内容没有序号
        ul里面只能放li标签，li里面随便放什么标签
        默认前面有个黑色实心圆点
        type前标形状
     -->
     <ul type="square">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
     </ul>

自定义列表

  <!-- 
        自定义列表：图文混合列表
        dt放图片
        dd放文字
      -->

      <dl>
        <dt><img src="123.png" alt=""></dt>
        <dd>我的基本信息</dd>
      </dl>

列表的属性

ul{
    /* 配置颜色 */
    background-color: rgb(100, 100, 100);
    /* 带透明度的颜色配比 */
    background-color: rgba(100, 100, 100, 0.4);
    /* 16进制写法 */
    background-color: #ffffff;
    /* 背景图片 */
    background-image: url(1.jpg);
    /* 背景颜色平铺 */
    background-repeat: repeat;
    /* 背景图片的定位（背景图到边框的距离） */
    background-position: 20px 20px;
    background-position: 20% 20%;
}

表格

<!-- 
        表格的使用
            border:表格外线的宽度
            width=500px
            width=50%:占父元素的宽度的一半
            bordercolor:表框颜色
            bgcolor:背景颜色
            cellspacing:单元格之间的缝隙大小
            cellpadding:单元格和文字的距离
        tr:行标签
            bgcolor:背景颜色
            align:文字的水平方向对齐方式
            valign：文字的垂直方向对齐方式
        td：列标签
            bgcolor:背景颜色
            align:文字的水平方向对齐方式
            valign：文字的垂直方向对齐方式
            colspan:表格占几个列
            rowspan:表格占几个行

     -->

     <table border="1" width="500" 
     align="center" 
     bordercolor="red" 
     bgcolor="yellow" 
     cellspacing="0"
     cellpadding="20"
     >
        <tr align="center" valign="middle">
            <td colspan="2" rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
     </table>

表单

   <!-- 
        表单
        action：表单提交的位置
        placeholder：提示信息
        type属性
            text:文本输入框
            password:密码
            submit:提交按钮
                value:标签是上的文字，默认为提交
            button:按钮
            reset:清空
        name
      -->
      <form action="" method="post">
        用户信息：<input type="text" placeholder="请输入你的用户名" name="username">
        <input type="submit" value="登录">
      </form>

单选框

<h1>做一个单选框</h1>
<!-- 
        单选框
        checked="checked"设置为默选中
     -->
    <div>
        <input type="radio" name="radio1" checked="checked">非常满意<br/>
        <input type="radio" name="radio1">满意<br/>
        <input type="radio" name="radio1"> 不满意<br/>
        <input type="radio" name="radio1">非常不满意<br/>
    </div>
    <!-- 设置点击文字也可以选中相应的标签 -->
    <div>
        <input type="radio" name="bbb" id="man">
        <label for="man">男</label>
    </div>
    <div>
        <input type="radio" name="bbb" id="woman">
        <label for="woman">女</label>
    </div>

做一个复选框

<h1>做一个复选框</h1>
    <div>
        <div>你的兴趣爱好是什么</div>
        <div>
            <input type="checkbox" name="aaa">抽烟
            <input type="checkbox" name="aaa">喝酒
            <input type="checkbox" name="aaa">烫头
        </div>
    </div>

图片按钮

<!-- 图片按钮,替代提交按钮 -->
    <div>
        <input type="image" src="sub.jpg">
    </div>

禁用功能

<!-- 禁用功能 -->
    <div>
        <button disabled>注册</button>
    </div>

只读功能

<div>
        <input type="text" readonly value="222">
    </div>

下拉菜单

<!-- 
        下拉菜单
        size：大小，一次能显示出来几个选项
        multiple:支持多选
        selected:默认选中
     -->
    <div>
        <div>性别</div>
        <select name="sex" multiple>
            <option value="man" selected>男</option>
            <option value="woman">女</option>
        </select>
    </div>

多行文本框

<!-- 
        cols="30"显示的列数
        rows="10"显示的行数
        placeholder：提示文字
     -->
   <h1>多行文本域</h1>
   <div> 
        <textarea cols="30" rows="10" placeholder="输入内容"></textarea>
   </div>

字段集(边框中留出一段开口，用来写字段名)

<!-- 
        字段集(边框中留出一段开口，用来写字段名)
     -->
     <fieldset>
        <legend>性别</legend>
        <input type="radio" name="aa"> nan
        <input type="radio" name="aa"> nv
     </fieldset>

表单的增强（特殊格式的输入框）

    <!-- 
        音频（audio标签），视频(video标签)
        controls：添加控制栏
        loop:循环播放
        autoplay:自动播放
        muted:静音播放
        video独有、
            poster="./post.jpg"：添加海报
     -->
     <audio src="123" controls loop autoplay muted></audio>
     <video src="123.mp4" controls loop autoplay muted poster="./post.jpg"></video>

     <!-- 
        颜色选择
      -->
      <form>
        <input type="color" name="color">
        <input type="submit">
      </form>
      <!-- 
        邮箱输入
       -->
      <form>
        <input type="email" name="email">
        <input type="submit">
      </form>
      <!-- 
        url地址
       -->
       <form>
        <input type="url" name="url">
        <input type="submit">
      </form>
      <!-- 
        电话号码
       -->
       <form>
        <input type="tel" name="tel">
        <input type="submit">
      </form>
      <!-- 
        滑块效果
       -->
       <form>
        <input type="range" name="range" min="10" max="100" step="10" value="50">
        <input type="submit">
      </form>
      <!-- 
        数字类型
       -->
       <form>
        <input type="number" name="number" min="10" max="100" step="10" value="50">
        <input type="submit">
      </form>
      <!-- 
        搜索框
       -->
       <form>
        <input type="search" name="search">
        <input type="submit">
      </form>
      <!-- 
        搜索框
       -->
       <form>
        <input type="date" name="date">
        <input type="month" name="month">
        <input type="week" name="week">
        <input type="submit">
      </form>
      <!-- 数据列表 -->
    <input type="text" list="mylist">
    <datalist id="mylist">
        <option value="手机"></option>
        <option value="手表"></option>
        <option value="手环"></option>
        <option value="电话"></option>
        <option value="电脑"></option>
    </datalist>
    <!-- 
       autofocus: 获取焦点（进入页面后光标自动进入一个输入框）
       required:必填项，不能为空
       multiple:允许填写多个内容
       pattern:支持正则表达式
     -->
    <form action="">
        <div>
            用户名：<input type="text" autofocus required multiple pattern="[0-9][A-Z]">
        </div>
    </form>