HTML表格

表格由 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签进行定义,在那一行加一格就用

标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border='1'>
  <tr>
    <th>name</th>
    <th>age</th>
  </tr>
  <tr>
    <td>jesse</td>
    <td>18</td>
  </tr>
  <tr>
    <td>tuco</td>
    <td>22</td>
  </tr>
</table>

如果不定义边框属性,表格将不显示边框,border表示的是边框,表格的表头使用

标签进行定义,每加一行就需要用
标签进行定义。

如果需要某个单元格跨两列可以加上 colspan="2" 来定义

<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

如果需要某个单元格跨两行可以加上 rowspan="2" 来定义

<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

列表

无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用

  • 标签,内部每加一条用
  • 标签来定义

    <ul>
    	<li>喂鱼</li>
    	<li>浇花</li>
      <li>遛狗</li>
    </ul>
    

    • 标签内定义 type="circle"可以将粗体圆点变为空心圆点

<ul type="cirle">
	<li>喂鱼</li>
	<li>浇花</li>
  <li>遛狗</li>
</ul>

有序列表

有序列表也是一列项目,列表项目使用数字进行标记。

无序列表使用

  1. 标签,内部每加一条用
  2. 标签来定义

    <ol>
      <li>喂马</li>
      <li>劈柴</li>
      <li>周游世界</li>
    </ol>
    

    1. 标签内部添加type="A"可以将数字标记变为字母标记,start="2"可以将起始项变为从第二项开始

    <ol type="A" start="2">
      <li>喂马</li>
      <li>劈柴</li>
      <li>周游世界</li>
    </ol>
    

    可以在CSS层叠样式表中设置列表样式,加入list-style:none;将列表前的标记清楚,再加入padding-left:0;可以去除列表符号占据的空间。

    自定义列表

    自定义列表不仅仅是一列项目,而是项目及其注释的组合。

    自定义列表以

    开始。每个自定义列表项的定义以
    开始。

    <dl>
      <dt>上午</dt>
      <dd>网球</dd>
      <dd>普拉提</dd>
      <dt>下午</dt>
      <dd>开会</dd>
      <dd>茶艺</dd>
      <dd>写日记</dd>
    </dl>
    

    列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

    form表单

    表单用于向服务器传输数据,从而实现用户与Web服务器的交互

    表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。

    表单还可以包含textarea、select、fieldset和 label标签。

    form表单中的标签必须要写在form标签内,否则不生效。

    form表单只能支持get和post请求。

    <from action=""></from>
    
    action:
       1. 什么都不写,意味着向当前地址提交   2. 写全路径,   3. /index/       自动拼接 ip:port/index/
    

    Input

    每个input标签都应该有一个name属性,name属性就相当于Python中的字典name的属性值相当于key,用户输入的值相当于vlaue。 元素会根据不同的 type 属性,变化为多种形态。

    type属性值 表现形式 对应代码
    text 单行输入文本 <input type=text" />
    password 密码输入框
    date 日期输入框
    checkbox 复选框
    radio 单选框
    submit 提交按钮
    reset 重置按钮
    button 普通按钮
    hidden 隐藏输入框
    file 文本选择框
    form表单中要想上传文件,必须修改enctype属性是一种编码方式    urlencoded, form-data, jsonenctype:    1.application/x-www-form-urlencoded (默认)    2.multipart/form-dataform表单只能提交urlencoded, form-data, json格式的数据不能提交,    1. ajax    2. 第三张工具 postman
    

    属性说明:

    • name:表单提交时的“键”,注意和id的区别
    • value:表单提交时对应项的值
      • type="button", "reset", "submit"时,为按钮上显示的文本年内容
      • type="text","password","hidden"时,为输入框的初始值
      • type="checkbox", "radio", "file",为输入相关联的值
    • checked:radio和checkbox默认被选中的项
    • readonly:text和password设置只读
    • disabled:所有input均适用

    select

    <form action="" method="post">  <select name="city" id="city">    <option value="1">北京</option>    <option selected="selected" value="2">上海</option>    <option value="3">广州</option>    <option value="4">深圳</option>  </select></form>
    

    属性说明:

    • multiple:布尔属性,设置后为多选,否则默认单选
    • disabled:禁用
    • selected:默认选中该项
    • value:定义提交时的选项值