HTML CSS

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. 标签来定义

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

     在

     标签内部添加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：定义提交时的选项值