常用标签的使用

1、实体的使用

       空格大小是当前元素的字体大小

      空格大小是当前元素的字体大小的一半

      一般不怎么使用。

     设置<>: &lt; &gt;

     设置版权: &copy;等等

2、列表

       列表分为三种：有序列表，无序列表和定义列表

    2.1  有序列表

         ol：定义有序列表的范围

         li：定义项，独占一行

         属性：  start：设置有序列表从几开始排序

                       type：设置序列样式  

举例：

 <ol>

       <li>我</li>

       <li>妈妈</li>

       <li>爸爸</li>

       <li>妹妹</li>

    </ol>

     2.2  无序列表

         ul：定义无序列表范围

         li：定义项，独占一行

          属性：type：序列样式

                     square 实心矩形

                     circle 空心圈  

举例：

<ul type="circle">

        <li>黄焖鸡</li>

        <li>面条</li>

        <li>麻辣烫</li>

    </ul>

     2.3 定义列表

           dl：定义范围

           dt：定义项

           dd：解释项：举例说明定义项

举例：

 <dl>

        <dt> <h2>家庭成员</h2></dt>

        <dd>妈妈</dd>

        <dd>爸爸</dd>

        <dd>我</dd>

        <dd>妹妹</dd>

    </dl>

3、表格

   table:设置表格范围

   caption：设置表格标题，默认水平居中

   tr：设置一行

   th：表头，默认水平居中，加粗，特殊单元格

   td：普通单元格

   table的属性：

          border：设置边框

          cellspacing：设置单元格与单元格之间的距离

          cellpadding：设置单元格边框与内容之间的距离

 例如：<table border="1" cellspacing="0" cellpadding="10px">

水平方向合并：colspan="num" num代表行合并有几个单元格空间，合并完成之后，这一行有几个                      单元格

垂直方向合并：rowspan="num" num代表行合并有几个单元格空间，合并完成之后，后面被合并                             的行有几个单元格

例如： <td colspan="3" rowspan="4"></td>

<table border="1" cellspacing="0" cellpadding="10px">
       <caption>听写结果</caption>
       <!-- <header>1</header> -->
       <!-- <footer>2</footer> -->
        <tr>
            <th>姓名</th>
            <th>5.22</th>
            <th>5.23</th>
            <th>5.24</th>
            <th>评价</th>
        </tr>
        <tr>
             <td>张三</td>
             <td>90</td>
             <td>90</td>
             <td>100</td>
             <td rowspan="4">优秀</td>
        </tr>
        <!-- <td>20</td> -->
        <tr>
            <td>李四</td>
            <td>100</td>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>80</td>
            <td>80</td>
            <td>90</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>90</td>
            <td>80</td>
            <td>100</td>
        </tr>
      <tr>
        <td>平均分</td>
        <td colspan="4">90</td>
      </tr>

 4、表单

    4.1 输入框 input

              属性：type：数据类型

                         text 文本

                         password 密码

                         radio 单选按钮，一组数据中选一个 注意相同name名为一组数据，默认选中属性                                       checked

                          checkbox 多选框，默认选中属性checked

                          tel 手机号码类型

                         email 邮箱 

                         date 日期

                         button 普通按钮

                         submit 提交按钮 将数据提交到浏览器

                         reset  重置按钮  一键清除

                         reqired 必填项

                         readonly 只读 可以选中，但是不能修改

                         disabled 禁用 不可以选中和修改

                         placeholder 设置提示语

                        autofocus 自动获取焦点

                        multiple 设置同时上传多个文件

                       maxlength/minlength 设置输入内容最大/最小字符

                       autocomplete 设置是否开启自动补充（off关闭 on开启），注意要写name值

         4.2 下拉框 select

               下拉选项 option   设置默认选中属性 selected

         4.3 文本域  textarea  属性 cols 设置一行 rows 设置有几行

         4.4 按钮标签 button   属性 type 设置按钮类型 reset 重置 submit 提交 button 普通按钮

         4.5 label  input定义标签，提高鼠标用户的体验度，for属性值为相关元素的id，form属性值                    是form的id

         4.6 datalist 设置input可能选择的标签选项，input的list值等于datalist的id值，option设置                   选项

<form action="./练习1.html" target="_self" method="get">

        账户：<input type="text" name="name1" required placeholder="输入账户" autofocus autocomplete="off"> <br>
        密码：<input type="password" name="password1" required placeholder="输入密码" minlength="8"><br>
        性别： <input type="radio" name="sex" id="man" checked> <label for="man">男</label>
        <input type="radio" name="sex" id="women"><label for="women">女</label>
        <input type="radio" name="sex" id="nb"> <label for="nb">人妖</label> <br>
        生日： <input type="date"><br>
        喜爱：<input type="checkbox" checked>唱
        <input type="checkbox">跳
        <input type="checkbox">rap
        <input type="checkbox">篮球<br>
        电话号码：<input type="tel"><br>
        邮箱： <input type="email"><br>
        选择文件：<input type="file" multiple name="" id=""><br>
        喜欢颜色： <input type="color" value="#00aa00"><br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="按钮"><br>
        国家：<input type="text" value="中华人民共和国" readonly><br>
        国家：<input type="text" value="中华人民共和国" disabled><br>
        身份：<select name="" id="">
            <option value="">忠臣</option>
            <option value="">内奸</option>
            <option value="">反贼</option>
            <option value="" selected>主公</option>
        </select><br>
        文本域：<textarea name="" id="" cols="3" rows="1"></textarea><br>
        <button type="reset">
            <img src="../第二天 常用标签1/img/1.jpg" width="20px" alt="">
        </button><br>
        <input type="" list="da">
        <datalist id="da">
            <option value="主公">
            <option value="忠臣">
            <option value="反贼">
            <option value="内奸">
        </datalist>

    </form>