前端学习day02

最新推荐文章于 2024-10-15 10:20:47 发布

周佳栋

最新推荐文章于 2024-10-15 10:20:47 发布

阅读量62

点赞数 2

文章标签：学习 html5

本文链接：https://blog.csdn.net/zhoujiadong001/article/details/130951648

版权

本文详细介绍了HTML中的列表标签（无序列表、有序列表和定义列表），表格的结构和属性，以及表单的构成和各种输入类型的用法。HTML5的新特性中，提到了datalist标签用于创建待选项，progress元素用于展示任务进度，以及新增的input类型如邮箱、域名、数字、时间和颜色。此外，还提供了一个个人简历的表格布局案例。

摘要由CSDN通过智能技术生成

一.学习内容:功能元素包括列表标签,表格标签,表单相关知识

二.1.列表标签

①无序列表ul li 属性disc实心圆(默认值),circle空心圆,square实习方块

②有序列表ol li 属性 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）

③定义列表dl dd dt

三.表格table

1.完整结构

①表格的标题 <caption>

②表格的表头信息<thead> 有默认高度

③表格的主体信息<tbody> 有默认高度

④表格的页尾信息<tfooter>

2.相关属性

border 设置表格边框

align水平对齐方式 left center right

valign垂直对齐方式 top middle bottom

cellspacing 单元格与单元格之间的距离(外边距)

cellpadding 单元格边框和文字的距离(内边距)

colspan 水平方向合并后需删除多余单元格

rowspan 竖直方向合并后需删除多余单元格

*特殊:细线表格

①给table标签设置bgcolor="black"，cellspacing = "1px"

②给tr标签设置bgcolor="white"

四.表单

1.格式

 <form action="提交的服务器接口地址">

            <表单元素>

        </form>

2.常见表单元素

2.1input标签

属性:①type 取值决定了input标签的功能和外观的不同

text:明文输入框

password:暗文输入框

radio:单选框

checkbox:复选框

submit:提交按钮

button:普通按钮(js)

image:图片按钮(js)

reset:重置按钮(用于清空表单中已经填写好的数据)

hidden:隐藏域(配合提交按钮将一些数据默默的悄悄的提交到服务器)

②select下拉列表

格式:

<select>

      <optgroup label="分组名称">

      <option>列表数据</option>

      </optgroup>

</select>

可以通过给option标签添加一个selected属性来指定列表的默认值,

可以通过给option标签添加一个selected属性来指定列表的默认值

③label点击文字对应输入框聚焦

格式:

将文字利用label标签包裹起来

给输入框添加一个id属性

在label标签中通过for属性和输入框中的id进行绑定即可

<label for="account">

          账号:

        </label>

        <input type="text" id="account">

④textarea 多行输入框

cols和rows来指定输入框的宽度和高度

⑤

fieldset组件

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

格式:

<form action="">

      <fieldset>

        <legend>请登录</legend>

        账号:<input type="text"><br>

        密码:<input type="password">

        <input type="submit">

      </fieldset>

  </form>

3.HTML5新增表单元素

3.1-datalist标签

①作用: 给输入框绑定待选项

<input type="text" list="xxx">

    <datalist id="xxx">

        <option>xxx</option>

    </datalist>

②datalist格式:

<datalist>

        <option>待选项内容</option>

    </datalist>

③如何给输入框绑定待选列表

1.搞一个输入框

2.搞一个datalist列表

3.给datalist列表标签添加一个id

4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

3.2progress进度条

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

progress表示任务的完成情况，常用于进度条

max 定义进度元素所要求的任务的工作量，默认值为1

value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。

3.3input新增type

①-邮箱

<input type="email">

可以自动校验输入的内容是否符合邮箱的格式

②-域名

<input type="url">

可以自动校验输入的内容是否是URL地址

③-数字

<input type="number">

输入框中只能输入数字

④-时间

<input type="date">

可以通过日历来选择时间

⑤-颜色

<input type="color">

可以通过取色板来选择颜色

五.相关案例

1.个人简历

<!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>
</head>
<style>
    .head td {
        width: 20%;
        height: 50px;
    }

    .center {
        text-align: center;
    }

    img {
        width: 160px;
        height: 200px;
    }
</style>

<body>
    <table align="center" border="1" width="800px" height="800px" cellspacing="0">
        <thead class="head">
            <tr>
                <td class="center">姓名</td>
                <td>周佳栋</td>
                <td class="center">性别</td>
                <td>男</td>
                <td rowspan="3"><img src="../img/001pic.jpg" alt=""></td>
            </tr>
            <tr>
                <td class="center">出生年月</td>
                <td>2002.05</td>
                <td class="center">籍贯</td>
                <td>山西</td>
                <!-- <td>222</td> -->
            </tr>
            <tr>
                <td class="center">政治面貌</td>
                <td>共青团员</td>
                <td class="center">名族</td>
                <td>汉</td>
                <!-- <td>222</td> -->
            </tr>
            <tr>
                <td class="center">通讯地址</td>
                <td colspan="4">太原市中北大学</td>
                <!-- <td></td> -->
                <!-- <td></td> -->
                <!-- <td></td> -->
            </tr>
            <tr>
                <td class="center">联系方式</td>
                <td></td>
                <td class="center">E-mail</td>
                <td colspan="2"></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td class="center">学历</td>
                <td></td>
                <td class="center">专业</td>
                <td colspan="2"></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td class="center">毕业学校</td>
                <td colspan="4"></td>
                <!-- <td></td> -->
                <!-- <td></td> -->
                <!-- <td></td> -->
            </tr>
            <tr>
                <td class="center">求职意向</td>
                <td colspan="4"></td>
                <!-- <td></td> -->
                <!-- <td></td> -->
                <!-- <td></td> -->
            </tr>
            <tr>
                <td class="center">主要课程</td>
                <td colspan="4"></td>
                <!-- <td></td> -->
                <!-- <td></td> -->
                <!-- <td></td> -->
            </tr>
            <tr>
                <td class="center">个人荣誉</td>
                <td colspan="4"></td>
                <!-- <td></td> -->
                <!-- <td></td> -->
                <!-- <td></td> -->
            </tr>
            <tr>
                <td class="center" rowspan="4">实习经历</td>
                <td class="center">起止时间</td>
                <td class="center">实习单位</td>
                <td class="center" colspan="2">岗位职责及表现</td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <!-- <td></td> -->
                <td>2020</td>
                <td></td>
                <td colspan="2"></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <!-- <td></td> -->
                <td>2020</td>
                <td></td>
                <td colspan="2"></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <!-- <td></td> -->
                <td>2020</td>
                <td></td>
                <td colspan="2"></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td class="center">证书</td>
                <td colspan="4"></td>
                <!-- <td></td> -->
                <!-- <td></td> -->
                <!-- <td></td> -->
            </tr>
            <tr>
                <td class="center">兴趣及爱好</td>
                <td colspan="4"></td>
                <!-- <td></td> -->
                <!-- <td></td> -->
                <!-- <td></td> -->
            </tr>
            <tr>
                <td class="center">个人评价</td>
                <td colspan="4"></td>
                <!-- <td></td> -->
                <!-- <td></td> -->
                <!-- <td></td> -->
            </tr>
        </thead>
    </table>
</body>

</html>

运行结果