前端HTML学习笔记二

前端HTML学习笔记二

1、列表标签

1、无序列表(ul)

无序列表的作用是将数据添加列表语义，并且这些数据中都没有先后之分

无序列表的格式：

<ul>
  <li>需要显示的条目内容</li>
</ul>
<ul type="square">
    <li>苹果</li>
    <li>香蕉</li>
    <li>榴莲</li>
</ul>

另外可以修改无序列表的样式，修改type值

disc 默认 实心圆

circle 空心圆

square 实心方块

注意：ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用

2、有序列表(li)

有序列表的作用是给数据添加列表语义，并且这些数据中的所有数据都有先后之分

有序列表的格式：

<ol>
    <li></li>
</ol>
<ol type="I">
    <li>中国</li>
    <li>美国</li>
    <li>日本</li>
</ol>

另外可以修改有序列表的样式，修改type值

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）

3、定义列表

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

定义列表的格式：

<dl>
    <!-- 标题 -->
    <dt>windows</dt>
    <!-- 标题表述 -->
    <dd>微软公司推出的操作系统</dd>
    <dt>MacOS</dt>
    <dd>苹果公司推出的操作系统</dd>
</dl>

注意：和ul/ol一样, dl和dt/dd是一个整体, 所以他们一般情况下不会单独出现, 都是一起出现

4、表格列表

表格标签作用: 用来给一堆数据添加表格语义，其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式。

表格列表的格式：

 <!-- table标签就是一个表格 -->
    <table border="1" width="500px" height="200px" align="center" cellspacing="0" cellpadding="20">
        <!-- 每个tr标签就是一行 -->
        <tr>
            <!-- th 标签文字居中加粗 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>身高</th>
        </tr>
        <tr align="center">
            <!-- 每个td标签就是每一行中的一个单元格 或者 一列 -->
            <td width="300px" align="left" valign="top">张三</td>
            <td>18</td>
            <td>1.80</td>
        </tr>
    </table>

注意：

• 表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
• 表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现

1、水平对齐和垂直对齐

水平对齐可以给table标签和tr标签和td标签使用，而垂直标签只能给tr标签和td标签使用。

水平对齐通过设置align属性来控制在水平方向的对齐方式

align：left、center、right

垂直对齐通过设置valign属性来控制在垂直方向的对齐方式

valign: top、mid、bottom

2、外边距和内边距

设置外边距和内边距只能给table标签使用

• cellspacing外边距就是单元格和单元格之间的距离, 我们称之为外边距
  默认情况下单元格和单元格之间的外边距的距离是2px
• cellpadding内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距
  默认情况下内边距是1

3、表格的完整结构

一个完整地表格应该包含：表格的标题、表格的头部信息、表格的主体信息、表格的尾部信息。

 <table border="1" align="center" width="200">
        <!-- 标题 -->
        <caption>个人信息</caption>
        <!-- 表头信息 -->
        <thead>
            <!-- 千万别忘记加tr -->
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>身高</td>
            </tr>
        </thead>
        <!-- 表体信息 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>19</td>
                <td>1.78</td>
            </tr>
        </tbody>
        <!-- 表尾信息 -->
        <tfoot></tfoot>
    </table>

5、form表单

表单就是专门来收集用户信息的，表单元素是HTML中的一些标签，不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能

表单的格式：

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

 <!-- 表单元素的基本使用 -->
    <form action="test.php">
        <!-- 明文输入框 -->
        账号:<input type="text" name="account"><br>

        <!-- 暗文输入框 -->
        密码:<input type="password" name="pwd"><br>

        <!-- 单选按钮 -->
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女<br>

        <!-- 提交按钮 -->
        <!-- 当我们点击sumit按钮时，收集当前表单元素中的所有表单的值 进行参数传递 传递给action中服务器接口地址 -->
        <input type="submit" value="提交">

        <!-- 重置按钮 -->
        <input type="reset" value="重置">

        <!-- 隐藏域 -->
        <input type="hidden" name="userid" value="1234567890">
    </form>

常见的表单元素

1、input标签

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

明文输入框

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

暗文输入框

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

单选框

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

注意：默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值。

多选框

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

提交按钮

<input type="submit">

注意:
要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件
1、需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址
2、需要给需要提交到服务器的表单元素添加一个name属性

图片按钮

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

重置按钮

作用：用于清空表单中已经填好的数据

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

2、label标签

label标签是可以让输入框和文字绑在一起。

绑定的格式是：

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

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

3、select标签

作用：用于定义下拉列表

<!-- select下拉列表 -->
    <select name="" id="">
        <optgroup label="水果">
            <option value="">苹果</option>
            <option value="">香蕉</option>
            <option value="">榴莲</option>
        </optgroup>
        <optgroup label="粉">
            <option value="">螺蛳粉</option>
            <option value="">老友粉</option>
            <option value="">桂林米粉</option>
        </optgroup>
    </select><br>

注意：

1、下拉列表不能输入内容, 但是可以直接在列表中选择内容
2、 可以通过给option标签添加一个selected属性来指定列表的默认值
3、可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类