前端Html第四节记录

R3d.

已于 2024-01-10 19:23:18 修改

阅读量1.7k

点赞数 36

分类专栏：前端html 文章标签： html 前端 html5

于 2024-01-10 19:21:57 首次发布

本文链接：https://blog.csdn.net/fandi777/article/details/135509745

版权

前端html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

15、列表

作用：布局内容排列整齐的区域。

列表分类：无序列表、有序列表、定义列表。

----- 无序列表（<ul>） -----

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

*** ul 标签里面只能包裹 li 标签 ***

*** li 标签里面可以包裹任何内容 ***

----- 有序列表（<ol>） -----

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

作用：布局排列整齐的需要规定顺序的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

*** ol 标签里面只能包裹 li 标签 ***

*** li 标签里面可以包裹任何内容 ***

----- 定义列表（<dl>） -----

<dl>
    <dt></dt>
    <dd></dd>
</dl>

标签：dl 嵌套 dt 和 dd，

dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

*** dl 里面只能包含dt 和 dd ***

*** dt 和 dd 里面可以包含任何内容 ***

16、表格

网页中的表格与 Excel 表格类似，用来展示数据。

标签：

table 嵌套 tr

tr 嵌套 td / th


table	表格
tr	行
th	表头的单元格
td	内容的单元格

<table border="1">
    <tr>
        <th>一月份</th>
        <th>二月份</th>
        <th>三月份</th>
    </tr>
    <tr>
        <td>10</td>
        <td>20</td>
        <td>30</td>
    </tr>
    <tr>
        <td>40</td>
        <td>50</td>
        <td>60</td>
    </tr>
</table>

17、合并单元格

作用：将多个单元格合并成一个单元格，效果同Excel中的合并单元格。

-- 跨行合并，保留最上单元格，添加属性 rowspan

-- 跨列合并，保留最左单元格，添加属性 colspan

<table border="1">
        <tr>
            <th>一月份</th>
            <th>二月份</th>
            <th>三月份</th>
        </tr>
        <tr>
            <td rowspan="2">10</td>
            <td colspan="2">20</td>
            <!-- <td>30</td> -->
        </tr>
        <tr>
            <!-- <td>40</td> -->
            <td>50</td>
            <td>60</td> 
        </tr>
</table>

18、表单

作用：收集用户信息

使用场景：登录页面、注册页面、搜索区域。

input 标签

<input type="..." >

type 的属性值不同，则功能不同

    ----文本框效果----
    <br>
    <input type="text" placeholder="请输入文本">
    <br>
    ----密码框效果----
    <br>
    <input type="password" placeholder="请输入密码">
    <br>
    ----单选框效果----
    <br>
    <input type="radio">
    <br>
    ----多选框效果----
    <br>
    <input type="checkbox">
    <br>
    ----上传文件效果----
    <br>
    <input type="file">
    <br>

*** placeholder="..." 中的内容为占位文本，用于提示信息，文本框和密码框都可以使用 ***

    ----单选框----
    <br><br>
    <input type="radio" name="gender" checked> 男
    <input type="radio" name="gender"> 女
    <br><br>
    ----多选框----
    <br><br>
    <input type="checkbox" checked> 唱歌
    <input type="checkbox" > 打篮球
    <input type="checkbox" > 看书
    <br><br>
    ----下拉菜单----
    <br><br>
    <select>
        <option selected>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>        
    <br><br><br><br><br><br>
    ----文本域----
    <br><br>
    <textarea>请您为产品做出评价</textarea>
    <br><br>
    ----按钮----
    <br><br>
    <button type="">按钮</button>

*** "checked" 为单选、多选、下拉菜单中默认选项***

按钮的属性值：

    ----按钮属性值----
    <br><br>
    <!-- form 表单区域 -->
    <!-- action="" 发送数据的地址 -->
    <form action="#">
        用户名：<input type="text">
        <br><br>
        密&nbsp&nbsp&nbsp&nbsp码：<input type="password">
        <br><br>
        <!-- 如果省略 type 属性，功能为“提交” -->
        <br><br>
        ----submit 用于提交信息----
        <br><br>
        <button type="submit">提交信息</button>
        <br><br>
        ----reset 用于重置输入的信息----
        <br><br>
        <button type="reset">重置输入</button>
        <br><br>
        ----button 仅为普通按钮----
        <br><br>
        <button type="button">按钮</button>
    </form>