1.列表元素
无序列表 ul、li 班级、同学/城市
给一堆数据增加列表语义, 并且这一堆数据中所有的数据都没有先后之分

<ul type="value">   <li>要展现的数据</li></ul>


type:

disc    默认值 实心圆circle  空心圆square  实心方块

有序列表: ol、li

给一堆数据增加列表语义, 并且这一堆数据中所有的数据都有先后之分(排行榜)  <ol type="A">  <li></li></ol>  1   默认值。数字有序列表。(1、2、3、4)  a   按字母顺序排列的有序列表,小写。(a、b、c、d)  A   按字母顺序排列的有序列表,大写。(A、B、C、D)  i   罗马字母,小写。(i, ii, iii, iv)  I   罗马字母,大写。(I, II, III, IV)

定义列表:

<dl>  <dt></dt>  <dd></dd>  <dt></dt>  <dd></dd></dl> 给一堆数据增加列表语义,先通过dt标签定义列表中的所有题目, 而后再通过dd标签给每个题目增加形容信息

2.表格标签:
一对table标签就是一个表格
一对tr标签就是表格中的一行
一对td标签就是一行中的一个单元格

<table>  <tr>    <td>须要展现的内容</td>  </tr>      </table>

留神留神留神留神留神留神留神留神:

-1表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认状况下这个属性的值是0, 所以看不到边框-2表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起呈现, 要么一起不呈现, 不会单个呈现-3能够给table标签和td标签应用  表格的宽高:默认是依照内容的尺寸来调整             table的width/height  单元格的宽高:td的widht/height(不会影响整个表格的宽度和高度)  行内款式:style="color:red;background-color:white"   优先级最高      -4表格内单元格的程度、垂直对齐  程度:align    table(表格程度对齐形式)                tr、td(以后单元格内容的程度对齐形式)  垂直:valign   tr、td(单元格中的内容在垂直方向的对齐形式)                    -5表格的内边距与外边距属性cellspacing外边距:单元格和单元格之间的间隔(默认2)cellpadding内边距:单元格的边框和文字之间的间隙(默认1)-6单元格合并colspan:程度方向上的单元格合并rowspan:垂直方向上的单元格合并

--表格的残缺构造

因为表格中存储的数据比较复杂, 为了方便管理和浏览以及晋升语义, 咱们能够对表格中存储的数据进行分类
表格中存储的数据能够分为4类

  • 表格的题目
  • 表格的表头信息
  • 表格的主体信息
  • 表格的页尾信息

    3.form表单
    表单元素肯定要写在表单中

    <form action="提交的服务器接口地址"></form>

    根本表单元素:
    -明文输入框

    <input type="text" name="account" placeholder="请输出用户名"> name:表单提交时,会作为参数的名称,联合输出的值进行匹配,组成参数名=参数值的构造 placeholder:提醒

    -暗文输入框

     <input type="password" name="password" placeholder="请输出明码">

    -输入框设置默认值

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

    -单选框

      <input type="radio" name="xx" value="xxx" checked>    checked 默认选中    互斥操作:name属性必须设置雷同的值

    -多选框

     <input type="checkbox" name="xxx" value="xxx">   多选框默认选中 checked

    -提交按钮

    <input type="submit">  作用: 将表单中曾经填写好的数据, 提交到近程服务器(action:指定须要提交到的服务器地址)  【留神留神留神留神】:若想将表单数据提交到后盾,表单元素须要有那么属性

    -一般按钮

     <input type="button" value="xxx">

    -图片按钮

     <input type="image" src="">

    -重置按钮

     <input type="reset" value="xx">  作用: 清空表单中曾经填写好的数据