HTML的功能元素

1.列表标签

1.1  ul  无序列表

数据无先后之分，ul标签和li标签是⼀个整体, 是⼀个组合，所以两者就是整体出现。且在ul标签中只能看到li标签。其中type属性的取值 disc  默认值 实心圆

                                                            circle   空心圆

                                                            square  实心方块

list-style: none; 清除列表标签自带的所有样式

float: left;  水平浮动

使用方法：<ul type="value">

                  <li>需要显示的内容</li>

                  </ul>

1.2   ol  有序列表

数据有先后之分，ol标签和li标签是⼀个整体, 是⼀个组合，所以两者就是整体出现。且在ol标签中只能看到li标签。其中type属性的取值  1 默认值。数字有序列表。a 按字⺟顺序排列的有序列表，⼩写。A 按字母顺序排列的有序列表，大写。（A、B、C、D）  i 罗马字母，小写。I 罗马字母，大写。

使用方法：<ol type="A">

                  <li></li>

   

                  </ol>

1.3 dl dt dd  定义列表

通过 dt 标签定义列表中的所有标题 , 然后再通过dd标签给每个标题添加描述信息， dl 和 dt/dd 是⼀个组合标签 , 所以 dl 中建议只放 dt 和 dd 标 签，且三者都是统一出现。

使用方法： <dl>

                 <dt></dt>

                 <dd></dd>

                  <dt></dt>

                  <dd></dd>

                   </dl>

2.表格标签

用来给一堆数据来添加语义，table代表整个表格，tr标签代表整个表格中的⼀行数据，td标签代表表格中⼀行中的⼀个单元格

属性：border：边框的宽度，默认为0，所以若不设置就看不到边框。

          width与height：可以给table和td使用

         align：水平对齐方式 给table设置，控制表格在水平的对齐方式

                                          给tr设置，可以控制当前行所有单元格内容的水平对齐方式

                                          给td设置，可以控制当前单元格内容的水平对其方式

                  若给tr,td都设置了则按照td中设置的来对齐。

          valign：垂直对齐方式   给tr设置，可以控制当前行所有单元格内容的垂直对齐方式

                                                给td设置，可以控制当前单元格内容的垂直对齐方式

                  若给tr,td都设置了则按照td中设置的来对齐

只能给table标签使用

   

          cellspacing：外边距，单元格与单元格之间的距离，一般默认为2px

          cellpadding： 内边距，单元格的边框与文字之间的距离，默认情况下是1

细线表格

  

                   1. 给 table 标签设置 bgcolor="black" ， cellspacing = "1px"

                  2. 给 tr 标签设置 bgcolor="white"

    thead作用: 指定表格的表头信息

    tbody作用: 指定表格的主体信息

    tfoot作用: 指定表格的附加信息

     caption 作用 : 指定表格的标题

单元格合并

            

       <td colspan="2"></td>  水平方向

  

       <td rowspan="2"></td>  垂直方向

使用方法： <table>

                  <caption>表格的标题</caption>

                  <thead>

                  <tr>

                  <th>每⼀列的标题</th>

                   </tr>

                   </thead>

                    <tbody>

                    <tr>

                   <td>数据</td>

                    </tr>

                    </tbody>

                   <tfoot>

                   <tr>

                  <td>数据</td>

                   </tr>

                   </tfoot>

                   </table>

3. form  表单标签

3.1.明文输入框 

<input type="text" name="account" placeholder="请输⼊⽤户名">

name：表单提交会结合参数的名称，结合输入的值进行匹配，以键值对的形式提交

placeholder:未输入内容时，显示的提示语

3.2.暗文输入框

<input type="password" name="password" placeholder="请输入密码">

3.3.单选框

<input type="radio" name="xx" value="xxx">

默认情况下单选框不会互斥 , 要想单选框互斥那么必须给每⼀个单选框标签都设置⼀个name 属性 , 然后 name属性还必须设置相同的值。单选框的 value 值，才是最终需要的值，并不是单选框显示的值。

其中要想将文字与标签进行绑定可以通过label属性进行设置

<label for="1">

                <input type="radio" id="1">xx

 </label>

设置label中的for值与单选按钮的值相等，即可将文字与标签进行绑定

3.4.多选框

<input type="checkbox" name="xxx" value="xxx">

多选框默认选中 checked

3.5.提交按钮

<input type="submit">      将表单中已经填写好的数据 , 提交到远程服务器