前端自学day 3 --总结

洋洋拯救世界

已于 2022-03-20 13:49:29 修改

阅读量249

点赞数 1

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

于 2022-03-20 13:47:18 首次发布

本文链接：https://blog.csdn.net/weixin_45762791/article/details/123590737

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.列表标签

无序列表：ul 表示无序列表的整体 li 每一项

有序列表： ol 表示有序列表的整体 li 每一项

自定义列表 dl是整体包裹dt/dd dt是自定义列表主题 dd针对主题中的每个内容

3. button按钮双标签与input效果一样

一.列表标签

无序列表：ul 表示无序列表的整体 li 每一项

·苹果

·香蕉

有序列表： ol 表示有序列表的整体 li 每一项

1、80

2、79

3、78

自定义列表 dl是整体包裹dt/dd dt是自定义列表主题 dd针对主题中的每个内容

有一个标题（dt）下面是内容(dd)

<dl>
        <dt>帮助中心</dt>
        <dd>g购物指南</dd>
        <dd>小米之家</dd>
        <dd>维修热线</dd>
        <!-- 有默认缩进，需要CSS 修饰 -->
        <!-- dl只允许写dt/dd dt/dd里面可以任意内容 -->
    </dl>

二、表格

1.table >tr> td

table 表格整体 tr 行 td 单元格

属性：border 边框宽度 width 表格宽度 height 表格高度

 <table border="1" width="800" height="800"> 
       <tr>
           <td>姓名</td>
           <td>成绩</td>
           <td>评语</td>
       </tr>
       <!--第一行格子里面包含着三个格子，表格呢 得加html属性 -->
       <tr>
        <td>花泽类</td>
        <td>100分</td>
        <td>小哥哥真帅</td>
    </tr>
    <tr>
        <td>杉菜</td>
        <td>100分</td>
        <td>小姐姐真漂亮</td>
    </tr>
    <tr>
        <td>总结</td>
        <td>郎才女貌</td>
        <td>好般配</td>
    </tr>
    </table>

。2.表格标题 caption 默认居中在table中与tr并列双标签可加strong

表头单元格标签 th 一列小标题默认通常用于第一行

默认内部文字加粗并居中 th在tr内部用于替换td

<table border="1">
        <caption> <strong>成绩单</strong></caption>
        <tr>
            <!-- <td></td> -->
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        
    </table>

3.表格结构标签

thead 表格头部

tbody 表格主体

tfoot 表格底部

表格内部标签包裹tr

<body>
    <table border="1">
        <caption> <strong>成绩单</strong></caption>
        <thead>
            <tr>
                <!-- <td></td> -->
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
      </thead>
      <tbody>
            <tr>
                <td>zs</td>
                <td rowspan="2">100</td>
                <td>好般配</td>
            </tr>
            <tr>
                <td>信息</td>
                <!-- <td >100</td> -->
                <td>好般配</td>
            </tr>
      </tbody>
      <tfoot>
            <tr>
                <td>总结</td>
                 <td colspan="2">郎才女貌</td>
                <!-- <td>好般配</td> -->
            </tr>
       </tfoot>
       <!-- 加之后执行效果一样，但是浏览器执行效果变快 -->
    </table>

没有啥特殊效果，就是令结构清晰，便于浏览器加速。

shift+Tab 向前对齐

Ctrl+X 剪切

4.合并：将水平垂直多个单元格合到一起

1.明确合并几个 2.左上原则保留左上 3. 跨行合并 rowspan 跨列合并colspan

注意

只有同一个结构标签单元格才能合并，不能跨结构标签合并。

不能跨 thead tbody tfoot

三.表单标签: 登录注册搜索

1.input标签通过type 属性不同展示不同的效果

        text 普通文本框，用于输入单行文字
        password 密码框

        radio 单选框选项必须有相同的Name属性值，value属性设置实际提交的值。男或女
        checkbox 复选框，选项必须有相同的name属性值，value属性设置实际提交的值，爱好选      之类的
        search 可清除文本框

        file 文件上传框

submit 提交按钮

reset 重置按钮

 文本框： <input type="text"> <br><br>
    <!-- 文本框  写什么就显示什么 -->
    密码框：<input type="password"><br><br>
    <!-- 密码框:书写的内容都是小点点 -->
    单选框：<input type="radio"><br><br>
    <!-- 单选框 只能选一个男或女 -->
    多选框:<input type="checkbox"><br><br>
    <!-- 爱好等可以多选 -->
    上传文件: <input type="file" name="" id="">
    <!-- 上传文件; 微信上传头像 -->

button 普通按钮默认无功能配合js

placeholder 占位符。提示用户输入内容文本

   <input type="text" placeholder="请输入用户名"> <br><br>
   <input type="password" placeholder="请输入密码"> <br><br>

name属性值 name="gender" 拥有同一个name值为一组就表示性别组只能选择一个

checked 默认选中一开始默认选中一个

    <!-- 性别:<input type="radio" >男 <input type="radio" >女 -->
    <!-- 都选中了 -->
    性别:<input type="radio"name="gender" >男 <input type="radio" name="gender"  checked>女 <br><br>
    <!-- 加gender 变为同一组 只能选一个 -->
    默认选 多选框<input type="checkbox" checked>

2.按钮

在外面加form标签，才知道数据要发到哪里，数据才可以重置说不清楚，看代码吧。

submit reset button

<form action="">
    请输入用户名: <input type="text" placeholder="请输入用户名">
    <br>
    <br>
    请输入密码: <input type="password"placeholder="请输入密码" >
    <br>
    <br>
    性别: <input type="radio" name="sex">男 <input type="radio" name="sex">女
    <br>
    <br>
    爱好: <input type="checkbox">说唱 <input type="checkbox">韩剧 <input type="checkbox">买买买
    <br>
    <br>
    上传头像文件: <input type="file" multiple>
    <br>
    <br>
    提交数据: <input type="submit" value="免费注册">
    <br>
    <br>
    重置数据: <input type="reset">
    <!--能用得有附级标签  form -->
    <br>
    <br>
    普通数据: <input type="button" value="普通按钮">
    <br>
    <br>
</form>

value 属性给按钮显示文字

普通数据: <input type="button" value="普通按钮">

3. button按钮双标签与input效果一样

<button >
        我是按钮
    </button>
    <br>
    <button type="submit">
        我是提交按钮
    </button>
    <br>
    <button type="reset" >
        我是重置按钮
    </button>
    <br>
    <button type="button" >
        我是普通按钮
    </button>

submit reset button

button中间夹着按钮上的文字