2020 June 17 HTML与CSS

HTML第三篇：HTML元素-列表、表格、表单

注意：当前的元素可以先学部分css然后回过头来看

列表

  1. HTML提供3组常用的用来显示列表的元素
    1. 有序列表：ol、li
    2. 无序列表：ul、li
    3. 定义列表：dl、dt、dd

有序列表ol、li

  1. ol（ordered list）:有序列表，直接子元素只能是li
  2. li（list item）: 列表中的每一项

无序列表ul、li

  1. ul（unordered list）:无序列表，直接子元素只能是li
  2. li（list item）
  3. 举例：列表中嵌套列表，li里面嵌套新的ul
<ul>
  <li>
       第一章
       <ul>
            <li>
                 第一节
                <ul>
                     <li>1233</li>
                     <li>2344</li>
                     <li>4444</li>
                </ul> 
            </li>
            <li>第二节</li>
       </ul>
  </li>
  <li>第二章</li>
  <li>第三章</li>
</ul>

定义列表：dl、dt、dd

  1. dl(definition list):定义列表，直接子元素只能是dt、dd
  2. dt(definition term):列表中每一项的项目名
  3. dd(definition description)
    1. 列表中每一项的具体描述，是对dt的描述、解释、补充
    2. 一个dt后面一般紧跟着1个或者多个dd
  4. dt、dd常见的组合
    1. 事物的名称、事物的描述
    2. 问题、答案
    3. 类别名、归属于这类的各种事物

  5. 代码举例：

     /* 取出margin */
 dd {
     margin: 0;
 }
 <!-- 
       项目1
       项目描述
       项目描述
       项目描述
 -->
 <dl>
      <!-- 项目名称：项目描述 -->
      <dt>项目1</dt>
      <dd>项目描述</dd>
      <dd>项目描述</dd>
      <dd>项目描述</dd>
    
      <!-- 类别名称：类别描述 -->
      <dt>SUV</dt>
      <dd>牧马人</dd>
      <dd>普拉多</dd>
      <dd>揽胜</dd>
 </dl>

列表相关的CSS属性

  1. 列表相关的常见的CSS属性有4个：list-style-type、list-style-image、list-style-postition、list-style
    1. 适用于display设置为list-item的元素，比如li元素
    2. 他们都可以继承，所以设置给ol、ul元素，默认也会应用到li元素
  2. list-style-type： 设置li元素左边标记的样式
    1. disc(实心圆)、circle(空心圆)、square(实心方块)
    2. decimal(阿拉伯数字)、lower-romah（小写罗马数字）、upper-roman（大写罗马数字）
    3. lower-alpha(小写英文字母)、upper-alpha（大写英文字母）
    4. none（什么也没有）
  3. list-style-image：设置某张图片为li元素前面的标记，会覆盖list-style-type的设置
  4. list-style-postition： 设置li元素前面标记的位置，可以取outside、inside2个值
  5. list-style：是list-style-type、list-style-image、list-style-postition的缩写属性

  6. 举例:

     li {
   /* li样式 */
   list-style-type: none;
   /* li左边图片 */
   list-style-image: url("");
   /* 缩写 */
   list-style: none inside;
 }

表格

常用元素

table:表格
tr: 表格中的行
td: 行中的单元格

元素常用的属性

  1. table常用属性

     border：边框宽度
 cellpadding：单元格内部的间距
 cellspacing：单元格之间的间距
 width：表格的宽度
 align：表格的水平对齐方式left、center、right

  2. th、td的常用属性

     valign：单元格的垂直对齐方式，top、middle、bottom、baseline
 align：单元格的水平对齐方式left、center、right
 width：单元格的宽度
 height：单元格的高度
 rowspan：单元格可横跨的行数
 colspan：单元格可横跨的列数

  3. tr的常用属性

     valign：单元格的垂直对齐方式，top、middle、bottom、baseline
 align：单元格的水平对齐方式left、center、right

  4. 举例：

     <table border="1" cellpadding="10" cellspacing="0" width="600" align="center">
     <tr align="center">
         <td>放映时间</td>
         <td>语言版本</td>
         <td>放映厅</td>
         <td>售价（元）</td>
         <td>选座购票</td>
     </tr>
     <tr align="center">
         <td align="center">13：15</td>
         <td>国语3D</td>
         <td>2号厅</td>
         <td>￥48</td>
         <td><input type="button" value="选座购票"></td>
     </tr>

     <tr align="center">
         <td>13：15</td>
         <td>国语3D</td>
         <td>2号厅</td>
         <td>￥48</td>
         <td><input type="button" value="选座购票"></td>
     </tr>
 </table>

细线表格的实现

  1. 上面用table实现的表格，默认每个item是有间距的，将cellspacing设置为0，但是每隔单元格的boder为1，2根boder线融合的，表格的线也很粗，那么如何实现细线表格呢？
  2. 方法1：(不常用)
    1. 表格的border为0（或者不设置border）
    2. 分别设置表格单元格的背景色
      1. 表格的背景色决定了表格线的颜色
    3. 设置cellspacing的值
      1. 决定了表格线的粗细

    4. 代码举例：

       <style>
      /* 2. 单元格的背景色 */
      td {
           background-color: #f00;
      }
      /* 3. 表格的背景色 */
      table{
           background-color: #000;
      }
 </style>
 <!-- 1. border="0" 或者直接不写 -->
 <table cellspacing="1" border="0">
     ...
 </table>
  3. 方法2：

    1. 只通过css属性设置

       <style>
     td {
         /*1.  设置单元格的边框 */
         border: 1px solid #000;
     }
     table{
         /* 2. 合并单元格的边框 */
         border-collapse: collapse;
     }
 </style>
 <table>
     ...
 </table>

其他元素

  1. tbody：表格的主体
  2. caption：表格的标题
  3. thead：表格的表头
  4. tfoot：表格的页脚
  5. th：表格的表头单元格

  6. 举例：

     <table  align="center">
      <!-- 表标题 -->
      <caption>欢迎光临万达影城</caption>
      <!-- 表头 -->
      <thead>
            <tr>
                 <!-- th:表头单元格，自动加粗 -->
                 <th>放映时间</th>
                 <th>语言版本</th>
                 <th>放映厅</th>
                 <th>售价（元）</th>
                 <th>选座购票</th>
            </tr>
      </thead>
         
      <!-- 表格的主体 -->
      <tbody>
            <tr>
                 <td >13：15</td>
                 <td>国语3D</td>
                 <td>2号厅</td>
                 <td>￥48</td>
                 <td><input type="button" value="选座购票"></td>
            </tr>

            <tr>
                 <td>13：15</td>
                 <td>国语3D</td>
                 <td>2号厅</td>
                 <td>￥48</td>
                 <td><input type="button" value="选座购票"></td>
            </tr>
      </tbody>
         
      <!-- 表格的页脚 -->
      <tfoot>
              
      </tfoot>

 </table>

    pic

单元格合并

  1. 通过使用rowspan、colspan属性来合并
  2. 合并要领
    1. 合并方向是向右、向下
    2. 手动删掉被覆盖掉的td元素，在第一个td元素上设置rowspan、colspan属性

  3. 举例：

     <style>
      td {
           border: 1px solid #000;
      }
      table {
           border-collapse: collapse;
      }
 </style>
  <!-- 合并左上角4个item -->
 <table>
      <tr>
           <td colspan="2" rowspan="2">td01</td>
           <!-- <td>td02</td> -->
           <td>td03</td>
           <td>td04</td>
           <td>td05</td>
      </tr>
      <tr>
           <!-- <td>td01</td>
           <td>td02</td> -->
           <td>td03</td>
           <td>td04</td>
           <td>td05</td>
      </tr>
      <tr>
           <td>td01</td>
           <td>td02</td>
           <td>td03</td>
           <td>td04</td>
           <td>td05</td>
      </tr>
 </table>

CSS属性 border-spacing/border-collapse

  1. border-spacing用于设置单元格之间的水平、垂直间距，比如：

     border-spacing: 10px 20px;

  2. border-collapse: collapse;:合并单元格的边框

表单

  1. 常用元素

     1. form: 表单，一般情况下其他表单相关的元素都是它的后代元素，意思就是说其他表单元素应该放到form元素内包裹
 2. input：单行文本输入框、单选框、复选框、按钮等元素
 3. textarea：多行文本框
 4. select、option: 下拉选择框
 5. button: 按钮
 6. label: 表单元素的标题
 7. fieldset: 表单元素组
 8. legend: fieldset的标题

  2. 为何其他表单要用form包裹？

    1. 一堆表单需要用一个元素包裹，form比较合适
    2. reset操作，只针对当前form内的元素有效
    3. submit操作，只针对当前form内的元素

input常用属性

  1. type：input的类型

     text：文本输入框（明文输入）
 password：文本输入框（密文输入）
 radio： 单选框
 checkbox： 复选框
 button: 按钮
 reset：重置
 submit：提交表单数据给服务器
 file：文件上传
 hidden：隐藏域
  2. maxlength： 允许输入的最大字数
  3. placeholder：占位文字
  4. readonly：只读,不允许编辑
  5. disabled：禁用，颜色变灰，禁止使用
  6. checked：默认被选中
    1. 只有type为radio或checkbox时可用
  7. autofocus：当页面加载时，自动聚焦
  8. name：名字
    1. 在提交数据给服务器时，可用于区分数据类型，就是传参字段名称
  9. value：取值
    1. 由于input是单标签，因此通过value设置内容
  10. form：设置所属的form元素（填写form元素的id）
    1. 一旦使用了此属性，input元素即使不写在form元素内部，它的数据也能够提交给服务器
注意：
  1. reset只针对放到当前form内的元素才有效
  2. submit：只提交当前form的表单数据 而且 只提交表单设置name值的数据
  3. 表单name属性设置的值由服务器开发人员决定
  4. 单选框radio、多选框checkbox除了要设置字段名称name外，还需要设置value值，因为多选的内容代表什么需要说明，value值也由服务器开发人员决定
  5. 单选框如何实现单选功能：n个单选框的name设置成一样即可
  6. input的value属性值总结
    1. 设置按钮的内容文字
    2. 设置radio、checkbox被选中时，发送给服务器的值
    3. 设置文本输入框的默认值
  7. readonly：不需要设置属性值，布尔属性
  8. 去除input的tab键选中效果
    1. 将input的tabindex属性设置为-1
布尔属性
  1. 布尔属性可以没有属性值，写上属性名就代表使用这个属性
  2. 常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected

  3. 如果要给布尔属性设值，值就是属性名本身

     <input type="text" readonly disabled>
 <input type="radio" checked>
隐藏域（type=hidden）
  1. 隐藏域不会显示到网页上面，但是提交表单数据的时候，它的name和value也会被提交给服务器
  2. 如果有些发送给服务器的数据，是不需要用户输入的，或者不希望在界面上显示出来，可以使用隐藏域
  3. 就是说想附加传一些参数，比如我们输入关键字搜索一些东西的时候，？后面拼接的参数不仅仅关键字一个，还有附加的一些其他参数，不是我们手动输入的。

  4. 举例：

     <!-- 隐藏域 -->
 <form action="https://www.baidu.com/">
     <input type="text" name="phone">
     <!-- 隐藏域，默认附加传参，偷偷传入密码 -->
     <input type="hidden" name="pwd" value="1">
     <button type="submit">提交</button>
 </form>

form的常用属性

  1. action：
    1. 用于提交表单数据的url，即网络请求的地址
  2. method
    1. 请求方法（get和post），默认是get
  3. target：
    1. 在什么地方打开url（参考a元素的target）
  4. enctype
    1. 规定了在向服务器发送表单数据之前如何对数据进行编码
    2. 取值3种:
      1. application/x-www-form-urlencoded:默认的编码方式
      2. multipart/form-data:文件上传时必须传这个值，并且method必须为post
      3. text/plain:普通文本传输
  5. accept-charset：规定表单提交时使用的字符编码
get和post
  1. 提交表单数据时，浏览器发送的事http请求，有2种请求方法可以选择
    1. get
      1. 在请求URL后面以？的形式跟上发给服务器的参数，多个参数之间用&隔开，比如https://www.baidu.com/?phone=112&pwd=sss&code=345
      2. 由于浏览器和服务器对URL的长度有限制，因此在URL后面附带的参数是有限制的，通常不超过1KB
    2. post
      1. 发送给服务器的参数全部放在请求体中
      2. 理论上来讲，post传递的数据量没有限制（具体还得看服务器的处理能力）
  2. 浏览器如何查看请求过程、结果
    1. 打开检查工具->Network
    2. Header:请求头、响应头内容
    3. Response：服务器响应结果
    4. 可以发现post的请求参数放在了请求体中(form data)

label元素

  1. label 元素一般跟input、textarea配合使用，用来表示input、textarea的标题
  2. label可以跟某个input、textareat绑定，点击label就可以激活（聚焦）对应的input、textarea
    1. input、textarea必须设置id属性
    2. label通过for属性值设置为input、textareat的id属性值，来绑定input、textarea
  3. 写法：

    1. 写法1：

       <!-- label要绑定的那个input必须加id属性，用for属性绑定 -->
 <label for="phone">手机：</label>
 <!-- name：提交服务器参数字段 -->
 <input id="phone" type="text" name="phone"><br>

    2. 写法2：

       <!-- label要绑定的那个input必须加id属性，用for属性绑定 -->
 <label for="phone">
     手机：
     <!-- name：提交服务器参数字段 -->
     <input id="phone" type="text" name="phone"><br>
 </label>

按钮

  1. 普通按钮（type=button）：使用value属性设置按钮文字
  2. 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
  3. 提交按钮（type= submit）：提交它所属form的所有表单数据给服务器（包括input、textarea、select）
  4. 默认情况下，敲回车键（enter）会自动提交表单数据给服务器
    1. 如需禁止此行为，需要编写相应的JavaScript代码

textarea

  1. textarea的常用属性
    1. cols行数
    2. rows列数
    3. 注意：通常不通过cols、rows来控制宽高，而是通过css的width、height来设置宽高
  2. 缩放的css设置
    1. 禁止缩放: resize:none
    2. 水平缩放: resize:horizontal
    3. 垂直缩放: resize:vertical
    4. 水平垂直缩放：resize:both

select和option

  1. option是select的子元素，一个option代表一个选项
  2. select常用属性（不常用）
    1. multiple：可以多选
    2. size：显示多少项
  3. option的常用属性
    1. selected：默认被选中

fieldset和legend

  1. 作用：将一块内容用一个框框起来，并设置标题

表单的具体使用，查看github上demo

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents