HTML标签学习

列表

列表分为 无序列表，有序列表，定义列表

不用规定顺序，为无序，有1,2,3,等等的顺序的，为有序

一个标题下有多个小标题的，为定义

首先是无序列表，涉及到ul和li的嵌套关系

     <ul>
        <!-- li 标签创建的列表条目独占一行 -->
        <li>消息1</li>
        <li>消息2</li>
        <li>消息3</li>
        <li>...</li>
     </ul>

然后是有序列表

    <!-- 有序列表为ol嵌套li -->
     <!-- 有序前面的1,2，3为自动生成序号 -->
     <ol>
        <li>步骤1</li>
        <li><a href="#" target="_blank">步骤2</a></li>
     </ol>

最后是定义列表

    <!-- 定义列表是dl嵌套dt和dd，dt是小标题，dd是小标题下的叙述或详情 -->
     <dl>
        <dt>列表标题1</dt>
        <dd>列表1详情1</dd>
        <dd>列表1详情2</dd>
        <dt>列表标题2</dt>
        <dd>列表2详情1</dd>
        <dd>列表2详情2</dd>
     </dl>

表格

表格类似于Excel，可以控制长宽，包含表头，主体和总结（自己写出来的）

其中的table属性中，如果不加border，就是无边框表格，需要手动添加表格边框，border后面的数值就是边框的像素宽度

    <!-- table嵌套tr，tr嵌套td和th -->
    <!-- table是表格，tr是行，td是表头，表头加粗，th是内容 -->
     <table border="1">
        <!-- borders里面数字是边框线像素数 -->
        <tr>
            <th>姓名</th>
            <th>班级</th>
            <th>语文成绩</th>
            <th>数学成绩</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>二班</td>
            <td>85</td>
            <td>90</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>三班</td>
            <td>88</td>
            <td>95</td>
        </tr>
     </table>

 在表格中，还可以手动规定表格的结构标签，有thead，tbody和tfoot，这个标签只是让结构更清晰，在平时可以不写

    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>班级</th>
                <th>语文成绩</th>
                <th>数学成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>二班</td>
                <td>85</td>
                <td>90</td>
            </tr>
        
            <tr>
                <td>李四</td>
                <td>三班</td>
                <td>88</td>
                <td>95</td>
            </tr>
        </tbody>
     </table>

表格中，有一些重复的数值，这时我们可以将这些数值的单元格合并，合并的原理就是将其中一个单元格放大固定的格子，然后删掉其他要合并的单元格

    <table border="1">
        <!-- 保留最左最上的单元格，添加属性（取值为数字，表示要合并的单元格的数量） -->
        <!-- 跨行合并，用rowspan -->
        <!-- 跨列合并，用colspan -->
        <tr>
            <th>姓名</th>
            <th>班级</th>
            <th>语文成绩</th>
            <th>数学成绩</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>二班</td>
            <td>85</td>
            <td>90</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>三班</td>
            <td>88</td>
            <td>95</td>
        </tr>
        <tr>
            <td>总结</td>
            <td colspan="3">优秀</td>
        </tr>
     </table>

表单

表单一般用于需要收集用户的数据时使用，例如登录的界面，搜索框，这时，我们会用到很多的input标签

    <!-- 表单用于需要收集用户的信息时创建 -->
    <!-- 用于登录，注册，搜索 -->
    <!-- input标签 -->
     <!-- type中，text为文本框，password为密码框，
      radio为单选框，checkbox为多选框，file为上传文件 -->
      输入账号<input type="text">
      <br><br>输入密码<input type="password">
      <br><br>单选框<input type="radio">
      <br><br>多选框<input type="checkbox">
      <br><br>上传文件<input type="file">

我们在一些登录的界面中可以看到，文本框内本身有提示词，在输入数字后消失了，这就是input占位文本

我们会用一个属性placeholder来提示

    输入账号<input type="text" placeholder="请输入用户名">

单选框

像是选择性别和年龄的时候，我们能看见单选框，单选框要用name属性分成一组，才能进行单选

    <!-- 用name形成一个分组，checked默认选中 -->
    <input type="radio" name="gender" checked>男
    <input type="radio" name="gender" >女

多选框

    <!-- 用checked进行默认选中 -->
    <input type="checkbox" checked>我同意...

下拉菜单

在选择地区和生日时，我们能看到下拉菜单

    <!-- 下拉菜单是select嵌套option
     select是菜单整体，option是每一项 
     option中的selected是默认选中-->
     城市：<select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option selected>深圳</option>
     </select>

文本域

在进行大量文字输入时，可以用到文本域，与文本框相比，文本域中的文字可以换行，输入范围会更大

<!-- 文本域是可以多行输入的文本，标签是textarea -->
<!-- 拖拽后期会删掉 -->
<textarea placeholder="请输入文字"></textarea>

label

这个标签用于将文字和表单绑定，放大可点击的范围

    <!-- 此标签用于绑定文字和表单控件的关系，增大表单控件的点击范围 -->
     <!-- 以下是两种写法 -->
    <input type="radio" id="man" name="gender" checked><label for="man">男</label>
    <label><input type="radio" name="gender">女</label>

按钮

    <!-- butten常用属性
     1.submit，也就是默认功能，用于将数据提交到后台
     2.reset，重置按钮，恢复默认值
     3.butten，普通按钮，结合JavaScript使用 -->
     <!-- 按钮需要放在form标签中 -->
      <!-- action是发送后台的地址 -->
    <form action="">
        用户名：<input type="text">
        <button type="reset">重置</button>
    </form>

无语义布局标签

    <!-- 无语义标签用来布置网页，划分网页的区域
     有div和span -->
     <!-- div也叫大盒子
      因为div可容纳的东西很多，像一个很大的容器 -->
     <div>这行文字独占一行</div>
     后面的文字不在div中，会换行
     <!-- span也叫小盒子 -->
     <span>这行文字不换行</span>
     后面会接着写