day 3

定义列表

作用：定义一个标题和内容自定义的列表结构

由三个标签组成：dl，dt，dd

dl：英文：definition list 表示创建一个自定义列表结构

dt：英文： definition term 定义主题或者定义术语，表示一个列表的主题

dd：英文：definition description 定义解释项，表示解释和说明前面的主题内容

dl内部只能存放dt和dd，dt和dd是同级关系

基本使用：

 

 每个dt主题后面可以跟零或多个dd，每个dd解释的就是上一个最近的dt

如下：

 

 dt和dd都是容器级标签，在其内可以存放其他标签

如在dd内部存放多个p标签

 

使用场景：（如京东）

 

 通过查看京东网站的源码后发现，dl、dt和dd都是一套标签组成，一个页面有多个dl，并不是一个dl内部嵌套多个dd，原因是为了方便搭建布局。

如下：（工作中常用）

 

 

 

 

表格

表格基础：表格主要由三个标签组成

table：作用是定义了一个表格的结构

tr：英文 table rows ， 定义了表格的行

td：英文 table dock ， 定义了表格的单元格

关系：table里面放tr，tr里面放td

例如三行四列：tr*3>td*4 （>代表tr嵌套td）按tab，快速生成三行四列表格

 

 table标签上有两个属性，一个是 border=“1”，这个属性是用来设置表格的边框的，如果没有这个属性，边框不显示，第二个属性

 

 

是css样式，用来合并表格

如果表格需要设置表头，可以使用tr里面嵌套th使用

 

 

单元格的合并

一部分单元格需要进行跨行跨列的合并，可以给对应的td和th标签设置相关属性

rowspan：上下跨行合并

colspan：左右跨列合并

属性值是数字，数字是几就跨几行（列）

步骤：

确定一行有多少个td，一共有几行（最多的一行）

观察哪个单元有合并，设置对应属性

 

 

 

 

 

表格分区

一个完整的表格包含三个部分：

表格标题，表格表头和表格的主体

例：

 

 一个table内部实际由还有还有三个分区标签组成

caption：定义表格的主题

thead：定义表格的头部，内部嵌套tr和th

tbody：定义表格的主体，内部嵌套tr和td

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border-collapse:collapse;
        }
        td{
            width : 140px;
        }
    </style>
</head>
<body>
   <table border = "1">
       <!-- 主题分区 -->
       <caption>各地区资产投资情况</caption>
       <!-- 表头分区 -->
       <thead>
           <tr>
               <th rowspan = "2">地区</th>
               <th colspan = "2">按总量分</th>
               <th colspan = "2">按比重分</th>
           </tr>
           <tr>
               <th>自年初累计（亿元）</th>
               <th>去年同期增长（%）</th>
               <th>自年初累计（%）</th>
               <th>去年同期（%）</th>
           </tr>
       </thead>
       <!-- 主体分区 -->
       <tbody>
           <tr>
               <td>全国 </td>
               <td>2364 </td>
               <td>9.8  </td>
               <td>100.0</td>
               <td>100.0</td>
           </tr>
           <tr>
               <td>全国 </td>
               <td>2364 </td>
               <td>9.8  </td>
               <td>100.0</td>
               <td>100.0</td>
           </tr>
           <tr>
               <td>全国 </td>
               <td>2364 </td>
               <td>9.8  </td>
               <td>100.0</td>
               <td>100.0</td>
           </tr>
           <tr>
               <td>全国 </td>
               <td>2364 </td>
               <td>9.8  </td>
               <td>100.0</td>
               <td>100.0</td>
           </tr>
           <tr>
               <td>全国 </td>
               <td>2364 </td>
               <td>9.8  </td>
               <td>100.0</td>
               <td>100.0</td>
           </tr>
       </tbody>
   </table>
</body>
</html>
效果：

 

 

表单元素

表单元素是网页中提供给用户进行点击或者输入的控件

 

form标签：

容器级标签，内部存放可输入的控件。如果输入的表单需要提交到数据库，所有的控件需要被form表单包裹

method:方法的意思，指的是数据提交的方法，属性值分别是post和get

action:数据提交的位置

 

 

 

input标签：

input标签是输入框的一种，但是不仅仅只有输入框，通过type属性可以拓展多功能

换言之，input的type属性非常丰富

输入框：

 

输入框有两个重要属性，一个是value,一个是placeholder

value的作用是默认显示的内容，属性值为自定义的内容

例如

 

 

 

 

placeholder：属性作用是如果没有value的时候提示用户的文字占位符

例如

 

 

type还可以设置暗文（密码）

通过type属性password设置的

显示效果是输入后通过掩码形式显示的

例如

 

 

 

单选框

通过type属性值为radio设置的

单选按钮都是成组出现的

要想实现一组单选按钮的互斥，需要设置相同的name属性

 

 

 

 

 

复选框

也叫多选框，通过type值为checkbox设置

可以通过对自身进行多次点击实现选择或者取消（单选框没有这种特性）

多选框可以选择一个或者多个，建议同一组设置同一个name属性

例如：

 

 单选框和多选框都有一个默认被选择的功能，需要给input标签添加一个checked="checked"

例如：

 

 

 

如果点击文字是不能触发对应的单选或者多选框对应的事件，所以需要label标签去扩大触发范围

 

 此时点击文字就可以选中所对应的选项了

 

 文本域

标签是textarea

之前学习的input的是单行输入框，只能输入单行文本，如果需要使用多行文本，就是用textarea标签

textarea是一个双标签，是一个文本级标签

属性值rows和cols

rows：定义文本域可视区域有几行，单位是数字

cols：当前行显示的字节数量，单位是数字（以字母为基准）

placeholder：占位符

 

 我们发现textarea默认是可以通过拖动右下角实现放大活着或者缩小文本域，如果我们不希望缩放文本，则需要设置style里面的resize属性，值为none，去掉可拖拽区域

 

 

 

 

下拉菜单

需要一组标签进行制作

select:搭建下拉项

option:英文是选项的意思，表示搭建下拉项

关系：select>option

例子：

 

 

，现在默认的第一个是显示的北京，并不是默认被选中的，如果需要默认选中的是广州，则需要在option内写入selected=“selected”属性，如下：

 此时默认选中广州

 

 

 

 

 

 

posted @ 2021-03-04 20:31  Viper7  阅读(165)  评论(0)    收藏  举报