html基础02

html基础02

列表

无序列表（unordered list）

给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分。无序列表是我们平常用的最多的。

有序列表的格式是：

一个ul标签，包裹着很多了li标签，例如：

 <ul type="circle">
        <li>上海</li>
        <li>北京</li>
        <li>柳州</li>
    </ul>

type属性

其中 type=circle 表示将无序列表中默认的实心圆圈变成空心圆圈，此外还有：
disc 默认值 实心圆
circle 空心圆
square 实心方块

注意点：

1、一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给它们添加小圆点的。
2、ul标签和li标签是搭配使用的，一般情况下ul标签和li标签不会单独出现并使用。
3、ul标签里面一般只包含有li标签，不推荐在ul标签里面插入其他标签，但是可以在li标签中插入其他标签完成想要的页面效果。
4、ul标签和li标签属于块级元素。

无序列表应用场景:

​ 1.新闻列表
​ 2.商品列表
​ 3.导航条

有序列表（ordered list）

有序列表顾名思义就是有顺序的，数据有先后之分的。有序列表的作用: 给一堆数据添加列表语义, 并且这一堆数据中所有的数据都有先后之分。

无序列表的格式是：

一个ol标签里面包裹着多个li标签，例如：

       <!-- 有序列表 ol li 块级元素-->
        <ol type="1">
            <li>螺蛳粉</li>
            <li>老友粉</li>
            <li>桂林米粉</li>
        </ol>

type属性

其中type=1，表示有序列表的样式，即为 1、2、3。其他的样式还有：

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）

定义列表（definition list）

给一堆数据添加列表语义，先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息。

定义列表的格式为：

先有一个dl标签作为一个列表，再在里面包裹一个dt标签作为标题，一个dd标签，用来描述标题的具体内容。

 <!-- 定义列表 dl dt dd块级元素-->
    <dl>
        <dt>一级标题</dt>
        <dd>内容</dd>
    </dl>

定义列表的使用场景：

做网站尾部的相关信息
​ 做图文混排

定义列表的注意点：

1、和ul/ol标签一样，dl标签和dt/dd标签也是同时出现的，一般不会单独出现使用。
2、一个dd标签可以没有dt标签，一个dt标签也可以有多个dd标签。
3、dd标签不是包裹在dt标签里面，而是同时存在dl标签中。

表格

表格的格式：

 <table >
        <tr >      
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>17</td>
            <td>男</td>
        </tr>
    </table>

其中table为表格标签，一对table标签表示一个表格。
tr标签表示行数，一对tr标签表示一行。
th，td标签表示一列里面的一个单元格，不同的是：th内部的文本通常会呈现为居中的粗体文本，适用于表格的标题单元格，而td元素内的文本通常是左对齐的普通文本，适用于数据单元格。

完整的表格格式：

<!-- 完整的一个表格结构 -->
    <table border="1">
        <!-- 表格的标题标签 默认居中 -->
        <caption align="left">个人信息</caption>
        <!-- 表头标签 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <!-- 表体标签 tbody标签如果没写 浏览器会自动补全-->
        <tbody>
            <tr>
                <td>张三</td>
                <td>17</td>
                <td>男</td>
            </tr>
        </tbody>
        <!-- 表底标签 -->
        <tfoot></tfoot>
    </table>

表格的相关属性：

width、height：给整个表格增加宽度

 <table width="100px" height="200px">
        <tr >
            <td>11</td>
            <td>22</td>
            <td>33</td>
        </tr>
        <tr>
            <td>44</td>
            <td>55</td>
            <td>66</td>
        </tr>
    </table>

width、height属性一般给整个table表格添加而不给tr标签和td标签添加。
width属性给td标签添加才生效，而height属性给tr标签添加才生效。

border属性：给表格添加边框

 <table width="100px" height="200px" border="1">
        <tr >
            <td>11</td>
            <td>22</td>
            <td>33</td>
        </tr>
        <tr>
            <td>44</td>
            <td>55</td>
            <td>66</td>
        </tr>
    </table>

border属性一般给table表格添加。

align属性：设置水平对齐

left 靠左对齐
right 靠右对齐
center 居中对齐

<table width="100px" height="200px" border="1" align="center">
        <tr >
            <td>11</td>
            <td>22</td>
            <td>33</td>
        </tr>
        <tr>
            <td>44</td>
            <td>55</td>
            <td>66</td>
        </tr>
    </table>

整个表格居中对齐，align属性一般给tr标签设置，让文本在单元格中居中显示，给table标签设置，会让整个表格在页面中居中显示。

valign属性：设置垂直对齐

top  顶部对齐
bottom 靠底部齐
mid 居中对齐

细线表格：

细线表格：

<table bgcolor="black" cellspacing="1">
        <tr bgcolor="white">
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr bgcolor="white">
            <td>李四</td>
            <td>17</td>
            <td>男</td>
        </tr>
    </table>

合并单元格：

列合并 colspan=“合并单元格数值”
行合并 rowspan=“合并单元格数值”
例如：

colspan=“3”  合并三列
rowspan=“3” 合并三行

注意：
要将已经合并的单元格给删除掉，否则会导致挤压其他未合并的单元格。

Form表单

表单就是专门用来收集用户输入的信息

表单的格式：

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

注意：表单元素要写在表单中

常见的表单元素

input标签：

input标签有一个type属性, 这个属性有很多类型的取值,取值的不同就决定了input标签的功能和外观的不同。

1、name属性，value属性
name 提交给服务器的键 value提交给服务器的值

2、placeholder属性，readonly属性， disable属性
placeholder是表示输入框的的输入提示信息
readonly表示该输入框只读，不能进行写的操作
disable表示该输入框为禁用状态

3、明文输入框
属性type的值为text
例如：

input type="text" name="account" placeholder="请输入用户名">

4、暗文输入框
属性type的值为password
例如：

<input type="password" name="password" placeholder="请输入密码">

5、单选框
属性type的值为radio
例如：

<input type="radio" name="xx" value="xxx">

注意：
5.1、默认情况下单选框不会互斥，要想单选框互斥那么就必须每一个单选框标签都设置一个name属性，然后name属性的值要一致。
5.2、要单选框有一个默认选项，那么就可以给该选项的input标签，添加一个checked属性
5.3、单选框的value值，才是我们最终需要的值，并不是单选框显示的值。

6、多选框
属性type的值为checkbox
例如：

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

多选默认选中，添加checked属性

7、提交按钮
属性type的值为submit
例如：

<input type="submit">

作用：将用户已经填好的表单值提交到远程服务器
注意：要想完成表单提交到远程服务器中，要具备以下两个条件
7.1需要给表单添加一个action属性，通过这个action属性指定需要提交到的服务器地址
7.2需要给提交到服务器的表单元素添加一个name属性

表单还具有的属性：enctype

      两个属性值：
            application/x-www-form-urlencoded   
            	查询字符串，在发送前编码所有字符（默认），转换为?a=a&b=b&c=c

            multipart/form-data 
              不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

8、附件上传
属性type的值为file
例如：

<input type="file">

9、普通按钮
属性type的值为button
例如：

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

可以通过value属性来给按钮添加文字
作用: 配合JS完成一些操作

10、图片按钮
属性type的值为image
例如：

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

11、重置按钮
属性type的值为reset
例如：

<input type="reset" value="xx">

作用: 用于清空表单中已经填写好的数据
注意点:
如果想想改重置按钮默认的按钮标题可以通过value属性来修改

12、隐藏域
属性type的值为hidden
例如：

<input type="hidden" name="xx" value="xxx">

作用 : 将表单的某个输入不显示在网页上，配合提交按钮将一些数据默默的悄悄的提交到服务器。

13、label标签
默认情况下文字和输入框是没有关联关系的，也就是说点击文字，无法聚焦到输入框，如果想要点击文字，可以聚焦到输入框，那么就需要让文字和输入框进行绑定，这就需要使用label标签。

格式：

1、将文字利用label标签包裹起来
2、给输入框添加一个id属性
3、在label标签中通过for属性和输入框中的id进行绑定即可

例如：

<label for="account">
          账号:
        </label>
        <input type="text" id="account">

14、select标签
作用：用于定义下拉列表
例如：

<select>
      <optgroup label="分组名称">
          <option>列表数据</option>
      </optgroup>
  </select>

15、多行文本框
格式：

 <textarea>
  </textarea>

注意点:

1.默认情况下输入框可以无限换行
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下 输入
4.默认情况下输入框是可以手动拉伸的

16、fieldset组件
fieldset组件用于在一个web表单中对多个控件和标签进行分组
格式：

<form action="">
      <fieldset>
        <legend>请登录</legend>
        账号:<input type="text"><br>
        密码:<input type="password">
        <input type="submit">
      </fieldset>
  </form>

html5新增表单元素

1、datalist标签
作用：给输入框绑定待选项
格式：

<input type="text" list="xxx">
    <datalist id="xxx">
        <option>xxx</option>
    </datalist>

注意：要将id的属性值赋给list的属性值。

2、进度条
格式:

<progress value="70" max="100">70%</progress>

progress表示任务的完成情况，常用于进度条
max 定义进度元素所要求的任务的工作量，默认值为1
value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。

3、

邮箱 <input type="email">
    可以自动校验输入的内容是否符合邮箱的格式

-域名 <input type="url">
    可以自动校验输入的内容是否是URL地址

-数字 <input type="number">
    输入框中只能输入数字

-时间 <input type="date">
    可以通过日历来选择时间

-颜色 <input type="color">
    可以通过取色板来选择颜色