WEB前端demo2

最新推荐文章于 2024-08-02 20:11:41 发布

云上空间

最新推荐文章于 2024-08-02 20:11:41 发布

阅读量817

点赞数 22

文章标签： html web3

本文链接：https://blog.csdn.net/m0_65348671/article/details/135261748

版权

文章目录

列表
表格
input标签
下拉菜单
label标签
文本域
按钮
无语义标签
字符实体
综合案例

列表

1.无序列表

（显示按行显示，每句话前面有小黑点）

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ul>

ul只能有li，而li可以包含任何东西

2.有序列表

（按行显示，每行前面有数字123）

<ol>

    <li>第一</li>

    <li>第二</li>

    <li>第三</li>

</ol>

ol只能有li，而li可以包含任何东西

3.定义列表

（例如网页下面的售后中心，联系我们等）

    <dt>列表标题</dt>

    <dd>信息1</dd>

    <dd>信息2</dd>

    .。。。。。

</dl> -->

dl只能包含dt和dd

表格

1.表格标签

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

    <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>98</td>
            <td>97</td>
            <td>195</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>99</td>
            <td>99</td>
            <td>198</td>
        </tr>

        <tr>
            <td>总结</td>
            <td>全国第一</td>
            <td>第一</td>
            <td>第一</td>
        </tr>

2.结构标签

thead	表格表头
tbody	表格主题
tfoot	表格总结

视觉无差异，只是对电脑本身有清楚结构，平时练习可忽略

3.合并单元格

跨行合并（删除重复的列）	colspan
跨列合并删除重复的行）	rowspan

  <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td rowspan="2">99</td>
            <td>97</td>
            <td>195</td>
        </tr>

        <tr>
            <td>李四</td>
            
            <td>99</td>
            <td>198</td>
        </tr>

        <tr>
            <td>总结</td>
            <td colspan="3">全国第一</td>
        </tr>

重复的数据保留第一行或第一列，其余要删除

input标签

1.文本框：

    文本框：<input type="text" placeholder="账号">

placeholder是占位标签。
2.password,密码框

    密码框：<input type="password" placeholder="密码">

同上，显示为****
3.单选框

<input type="radio">
性别:
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女

name绑定两个单选框，只能选其中一个，
checked表示默认选一个，优化用户体验
4.多选框

<input type="checkbox" name="babit"  checked>游泳
<input type="checkbox" name="babit" >划水
<input type="checkbox" name="babit" >下棋

同上

5.上传文件`

 上传文件<input type="file" multiple>

    **<!-- 上传多个文件     multiple -->**

下拉菜单

    城市:
    <select name="" id="">
        <option >上海</option>
        <option >北京</option>
        <option  selected>西安</option>
        <option >武汉</option>
    </select>

select只能有option
selected表示默认选中

label标签

用于扩大鼠标点击范围

 <!-- 第一种写法 -->
    <br>
    <br>
性别
    <input type="radio" id="man" name="gender1" checked><label for="man">男</label>
    <input type="radio" id="female" name="gender1" ><label for="female">女</label>

    <!-- name属性  两个单选框在一块
    id属性，与label的for属性一样，扩大点击范围 -->
    <br>
    <br>




    <!-- 第二种写法!!!     这个简单 -->
<br>
<br>
性别
        <label ><input type="radio" name="gender" checked>男</label>
        <label ><input type="radio" name="gender">女</label>

以上标签均可用。

文本域

    <textarea>提示文字</textarea>

按钮

<!-- form表单，配合使用
    action发送数据终端 -->

    
    <form action="">
    用户名:
    <input type="text" >
    <br>
    密码： 
    <input type="text" >
<br>






    重置按钮，清空
    <button type="reset" > 重置</button>
</form>



<br>
    普通按钮
    <button type="button">登录</button>
    
    <br>
    提交按钮，点击可以提交数据到后台（默认）
    <button type="submit" >登录</button>

无语义标签

div 独占一行
span 不换行

字符实体

多个空格，< > 的显示

    <!-- <p>怎末写 -->
<!-- 
        空格&nbsp;
        <  &lt;
        >  &gt; -->

    标签与&nbsp;&nbsp;予以


    &lt;p&gt;

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册信息</title>
</head>
<body>
    <h1>注册信息</h1>
    <h2>个人信息</h2>
    <form action="">
    姓名: <input type="text" placeholder="请输入真实姓名">
    <br><br>
    密码: <input type="password" placeholder="请输入密码">
    <br><br>
    确认密码: <input type="password" placeholder="请输入确认密码">
    <br><br>
    性别: <label><input type="radio" name="gender" checked>男</label>


        <label for=""><input type="radio" name="gender">女</label>
        <br><br>
    居住城市: <select name="city" id="">
        <option value="" selected>北京</option>
        <option value="">南京</option>
        <option value="">西京</option>
    </select>


    <h2>教育经历</h2>
    最高学历: <select name="de" id="">
        <option value=""selected>本科</option>
        <option value="">硕士</option>
        <option value="">博士</option>
    </select>
    <br><br>
    学校名称: <input type="text">
    <br><br>
    所学专业: <input type="text">
    <br><br>
    在校时间: <select name="time" id="">
        <option value="">2018</option>
        <option value="">2019</option>
        <option value="">2020</option>
        <option value="">2021</option>
        <option value="">2022</option>
        <option value="">2023</option>
    </select>
    --- <select name="time" id="">
        <option value="">2018</option>
        <option value="">2019</option>
        <option value="">2020</option>
        <option value="">2021</option>
        <option value="">2022</option>
        <option value="">2023</option>
    </select>
    <br><br>


    <h2>工作经历</h2>
    公司名称: <input type="text">
    <br><br>
    工作描述: <textarea name="" id="" cols="5" rows="2"></textarea>
    <br><br>

    <input type="checkbox">已同意以下协议

    <ul>
        <li> <a href="#">《用户服务协议》</a></li>
        <li> <a href="#">《隐私政策》</a></li>
    </ul>

    <br><br>
    <button type="submit">免费注册</button>
    <button type="reset">重新填写</button>
</form>





</body>
</html>