鸿蒙应用开发-学习-第一章-HTML标签(二)

求求你别卷啦

已于 2024-01-12 20:36:57 修改

阅读量1.1k

点赞数 24

文章标签：学习 harmonyos 笔记 html 前端

于 2024-01-09 20:57:10 首次发布

本文链接：https://blog.csdn.net/weixin_50991227/article/details/135473604

版权

Tips：这个只是作者的学习笔记，仅作参考

一. 表格标签

1. 表格的基本标签

使用场景:在网页中使用行+列的单元格方式展示数据

基本标签:

标签名	说明
table	表格整体,包裹多个tr
tr	表格的行,包裹多个td
td	表格的单元格,包裹内容

代码格式: 快捷写法：table>tr*x(x行)>td*y(y行) +Tab键

 <!-- table表格整体标签 -->
<table>
     <!-- 行标签 -->
    <tr>
     <!-- 单元格标签 -->
        <td> </td>
    </tr>
</table>

2. 表格相关属性

使用场景;调整表格展示效果(写在标签里面,例如:<table bgcolor = "xxx"></table>)

<body>
    <!--  -->
    <!-- 
        table-表格整体
        tr-行
        td-列
        table>tr>td>任意
     -->

<!-- table内部不建议写div,浏览器会将其放置表格外面 -->
<!-- 
    table属性值:
        border - 边框
        width - 宽度
        height - 高度
        bordercolor - 边框颜色
        align - 表格整体水平对齐方式 - 取值:left(默认),center.,right
        cellspacing - 单元格之间的间距
        cellpadding - 单元格与内容之间的距离(值太大会挤压内容并撑大盒子)

    tr属性值:
        align - 行的内容水平对齐方式 - 取值:left(默认),center.,right
        valign - 行的内容垂直对齐方式 - 取值:center(默认),top,bottom
        height - 修改整一行的高度(可以比表格的设定高度高)
    td属性值:
        align - 单元格的内容水平对齐方式 - 取值:left(默认),center.,right
        valign - 单元格的内容垂直对齐方式 - 取值:center(默认),top,bottom
        width - 单元格宽度(同一列中任意单元格修改宽度,都会将整列宽度变为一样)
        height - 单元格高度(同一列中任意单元格修改高度,都会将整行高度变为一样)

    table/tr/td属性值:
        bgcolor - 背景颜色
        align - 水平对齐方式
        height - 高度

 -->
<!-- border=1(1像素边框) -->
    <!-- 三行三列 -->
    <table border="1" height="200px" width="200px" cellspacing="0">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</body>

Tips:实际开发中还是使用CSS设置偏多

3. 表格标题和表头单元格标签

使用场景:表格需要大标题以及小标题时

标签名	名称	说明
caption	大标题	独立于表格外,但仍然属于table内,加粗居中
th	小标题	替换首行td使用,表示小标题,文字默认居中表示

Tips:caption 写在table内部,th写在td标签内部(替换td使用)

4. 表格的结构标签

使用场景:用于区分表格的内容架构,突出其表格的结构,增加可读性

标签:

标签名	名称
thead	头部表格
tbody	主体表格
tfoot	底部表格

Tips:表格结构标签内部用于包裹tr标签

表格结构标签可不写

5. 合并单元格

使用场景:水平或垂直的多个单元格合并为一个

使用步骤:1.找到需要合并的格子

2.确认要保留的数据(左上原则:即垂直合并保留上面的数据,水平合并则保留左边的数据),不保留的删掉

3. 为需要合并的单元格设置水平(跨列)合并,垂直(跨行)合并,例如下:

<table width="400" heigh="400" border="1" cellspacing="0">
        <!-- caption为表格标题 -->
        <caption><strong>成绩单</strong></caption>
        <!-- 
            合并不能跨结构合并,比如thead没办法跨到tbody,tbody也不能跨到thead和tfood
         -->
        <!-- 表格头部 -->
        <thead>
            <tr>
                <!-- th用于替换td - 水平垂直内容正居中 - 加粗 -->
                <th>姓名</th>
                <th>成绩</th>
                <th>评级</th>
                <th>评语</th>
            </tr>
        </thead>
        <!-- 表格内容 -->
        <tbody>
            <tr>
                <!-- 合并单元格要先找到被合并的单元格并将其删除腾出空位,否则会导致整体布局出错
                合并讲究左上原则,即垂直合并保留上面的数据,水平合并则保留左边的数据
                -->
                <!-- rowspan-垂直合并 =2就是两行合并,=3就是三行合并-->
                <td rowspan="2">1</td>
                <!-- colspan-水平合并 使用方法与垂直合并相同 -->
                <td colspan="3">2</td>
                <!-- 删掉参与水平合并的单元格内容 -->                
                <!-- <td>3</td>
                <td>4</td> -->
            </tr>
            <tr>
                <!-- 删掉参与垂直合并的单元格内容 -->
                <!-- <td>5</td> -->
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
        </tbody>
        <!-- 表格底部 -->
        <tfoot>
            <tr>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
            </tr>
        </tfoot>
    </table>

效果如下:

6. 表格的CSS属性

使用场景:需要使用CSS实现更精细地调整展示效果

使用类型以及方式:

    <title>表格的CSS样式</title>
    <style>
        table,
        table td {
            border: 1px solid skyblue;
        }

        table {
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            /* 边框合二为一 */
            /* border-collapse: collapse; */
            /* 默认:边框分离 */
            border-collapse: separate;
            /* 单元格间距(仅用于边框分离模式) 第一个取值为水平方向 第二个取值为垂直方向 */
            /* border-spacing: 5px 20px; */
            /* 空单元格没有边框线(仅用于边框分离) */
            empty-cells: hide;
            /* 单元格宽度均分 */
            table-layout: fixed;
            /* 内容折行显示 */
            word-break: break-all;
            /* 水平对齐-left(默认)-right(右)-center(居中) */
            /* text-align: left; */
        }
        .t1 {
            /* 内容的垂直对齐 */
            vertical-align: top;
            vertical-align: middle;
            vertical-align: bottom;
        }
        /* .t1>td{
            width: 100px;
        }
        /* nth-child(1)意为第一个子集 */
        /* .t1>:nth-child(1){
            width: 200px;
        } */
    </style>

二. 表单标签

1. input系列标签

使用场景:当需要输入文本内容时

1.1 单一文本框

属性值:text

<!-- 单一文本框  placeholder:提示文本 -->
<input type="text" placeholder="请输入账号">

1.2 密码框

需要对输入文本进行隐藏时

属性值:password

<!-- 密码框  placeholder:提示文本 -->
<input type="password">

1.3 提交按钮

需要提交输入的内容

属性值:submit

<!-- 提交按钮 -->
<input type="submit" value="登录">

1.4 重置按钮

将输入的内容清空

属性值:reset

<!-- 重置按钮 -->
<input type="reset" vbalue="清空">

1.5 普通按钮

无特殊功能,需配合JS使用

属性值:button

<!-- 普通按钮 无特殊功能 -->
<input type="button" value="点击跳转">

1.6 单选框

多选一时使用

属性值:radio

<!-- 单选框 -->
性别:
<!-- 需要多个选项共用一个分类名字才可以实现单选 -->
<input name="sex" type="radio">男
<input name="sex" type="radio">女

1.7 复选框

需要多选多时使用

属性值:checkbox

 <!-- 复(多)选框 -->
爱好: 
<input type="checkbox">唱
<input type="checkbox">跳
<input type="checkbox">rap
<!-- 复选框-checked-默认选中 -->
<input checked type="checkbox">篮球

如果需要有某个选项固定必选,则可以在input中加一个checked ,例如

<!-- 复选框-checked-默认选中 -->
<input checked type="checkbox">篮球

1.8 文件选择(单个)

需要从电脑中获取文件时使用

属性值:file

<!-- 文件选择 -->
<!-- 单个 -->
<input type="file">

1.9 文件选择(多个)

需要同时上传多个文件时使用

<!-- 使用multiple可以实现同时上传多个 -->
<input type="file" multiple>

2. button按钮标签

2.1 提交按钮

对内容进行提交

属性值:submit

<!-- 当它的type是submit时，它就是提交按钮 -->
<button type="submit">提交</button>

2.2 重置按钮

对内容进行重置清空

属性值:reset

<!-- 重置按钮 -->
<button type="reset">重置</button>

2.3 普通按钮

和input的普通按钮一样,无特殊功能,但如果在谷歌浏览器算上那就是默认成提交按钮

<!-- 普通按钮 -->
<button type="button">普通</button>

2.4 图片按钮

将图片作为按钮

<button>
      <!-- button可包裹图片，包裹后该图片便拥有按钮功能 -->
      <img src="" alt="">
</button>

3. select下拉菜单标签

使用场景:需要下拉菜单实现选项展示并点击选择,例如下:

    <form action="">
        <!-- 下拉菜单（默认样式不常用） -->
        <!-- 
            name - 下拉菜单名字
            value - 下拉菜单的值
            multiple - 选择多个下拉项
            size - 显示多个下拉项
            selected - 默认选中
            
        -->
        <select name="selt" size="1">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州" selected>广州</option>
            <option value="深圳">深圳</option>
        </select>
        <button type="submit">提交</button>
    </form>

效果:

4. textarea文本域标签

类似于ppt中的文本框,常在CSS直接设置宽高

属性值:textarea

    <form action="">
        <!-- 
        cols-取值:数字,是一行能放的字符数(不建议用)
        rows-取值:数字,是行数(不建议用)
        常用样式控制宽高
     -->
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <br>
        <button>提交</button>
    </form>

通过CSS控制其样式

        textarea{
            width: 300px;
            height: 300px;
            /* 禁止拖拽 */
            resize: none;
        }

效果如下:

5. label标签

使用场景:当想点击其他内容也可以选中选项

<body>
    <!-- 此时必须点击框框才能选中 -->
    性别:
    <input type="radio">男
    <input type="radio">女
    <br>
    <!-- 
        label - 用于绑定表单和内容
     -->
    <!-- 
        方法一
        1.label将内容包裹起来
        2.为表单标签添加id属性
        3.label标签中的for属性设置与其对应的id属性值
     -->
    <label for="a">
        性别:
        <input id="a" type="radio" name="sex">男
    </label>

    <!-- 
        方法二
        1.使用label将内容包裹起来
        2.再把label标签中的for删掉
     -->
    <label>
        <input type="radio" name="sex">女
    </label>
    <!-- 此时点击文本or表单标签都可以选择到 -->
</body>

6. 字段集与字段集标题

字段集使用场景:某块区域添加边框,字段集可以嵌套多个字段集

标签名:fieldset

字段集标题使用场景:标题在边框上

标签名:legend

<fieldset class="two">
      <legend>爱好</legend>
      <input type="radio">唱
      <input type="radio">跳
      <input type="radio">rap
      <input type="radio">篮球
</fieldset>

效果如下:

可以通过CSS调整其样式:

        .one{
            width: 400px;
            border: 0;
            border-top: 2px solid orangered;
            margin: 50px 0;
        }
        .two{
            border: 0px;
            border-top:1px solid skyblue;
        }

HTML部分:

    <fieldset class="one">
        <legend>性别</legend>
        <input type="radio">男
        <input type="radio">女

        <fieldset class="two">
            <legend>爱好</legend>
            <input type="radio">唱
            <input type="radio">跳
            <input type="radio">rap
            <input type="radio">篮球
        </fieldset>
    </fieldset>

效果如下:

三. 字符实体

HTML中的空格合并现象

如果HTML代码中出现多个空格/换行/缩进,浏览器只会解析出一个空格/换行/缩进

所以需要在网页中展示符号效果时,需要用字符实体代替

    <div>空&nbsp;&nbsp;&nbsp;&nbsp;格</div>
    <div>小于号&lt;&lt;&lt;</div>
    <div>大于号&gt;&gt;</div>
    <div>和号&amp;</div>
    <div>引号&quot;</div>
    <div>撇号(单引号)&apos;</div>
    <div>元&yen;</div>
    <div>版权&copy;</div>

四. 综合案例

1.综合案例1-优秀学生信息表格

效果图:

个人做法:

第一步:看下所需标签以及数量:四行tr(其中第一行为th)四列td,一个表格标题caption,

第二步:明确被合并的单元格位置:第三行第一列,第四行第三四列

第三步:开始编写CSS部分:先给table划定大小范围,为表格标题caption设定margin-bottom

通过:nth-child()实现对第二第三行的tr子集进行高度设置,并垂直居中

        table{
            width: 400px;
            height: 405px;
        }
        caption{
            margin-bottom: 22px;
        }
        tr:nth-child(2),
        tr:nth-child(3){
            height: 169px;
            line-height: 169px;
        }

第四步:开始编写HTML部分:先为table设置边框,加粗caption标题,后续就是普通表格以及合并

    <table border="1">
        <caption><strong>优秀学生信息表格</strong></caption>
        <tr>
            <th>年级</th>
            <th>姓名</th>
            <th>学号</th>
            <th>班级</th>
        </tr>
        <tr>
            <td rowspan="2">高三</td>
            <td>张三</td>
            <td>110</td>
            <td>三年二班</td>
        </tr>
        <tr>
            <td>赵四</td>
            <td>120</td>
            <td>三年二班</td>
        </tr>
        <tr>
            <td>评语</td>
            <td colspan="3">你们都很优秀</td>
        </tr>
    </table>

效果如下:

2.综合案例2-会员注册表单

效果图:

个人做法:

CSS部分:

*{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 335px;
            width: 460px;
            /* background-color: antiquewhite; */
        }
        h1{
            font-size: 21px;
            margin-top: 18px;
            margin-left: 6px;
            padding-bottom: 16px;
        }
        .box2{
            margin-left: 6px;
            border-top: 1px solid grey;
            font-size: 12px;
            
        }
        .box2>input{
            margin-bottom: 15px;
            box-sizing: border-box;
        }
        .box2>select{
            margin-bottom: 15px;
            box-sizing: border-box;
        }
        textarea{
            width: 275px;
            height: 100px;
            margin-top: 15px;
            box-sizing: border-box;
        }
        h2{
            margin-top: 17px;
            font-size: 13px;
            box-sizing: border-box;
        }
        ul{
            margin-top: 13px;
            box-sizing: border-box;
        }
        ul>li{
            list-style-type: disc;
            margin-left: 25px;
            box-sizing: border-box;
        }
        button{
            font-size: 10px;
        }

HTML部分:

<body>
    <div class="box">
        <h1>青春不常在,抓紧谈恋爱</h1>
        <div class="box2">
            昵称: 
            <input type="text" placeholder="请输入昵称" style="margin-top:7px;">
            <br>
            性别: 
            <input type="radio" name="sex">男
                
            <input type="radio" name="sex">女
            <br>
            所在城市:
            <select name="city" id="1">
                <option value="北京">北京</option>
                <option value="上海" selected>上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
            </select>
            <br>
            婚姻情况: 
            <input type="radio" name="marry">未婚
            <input type="radio" name="marry">已婚
            <input type="radio" name="marry">保密
            <br>
            喜欢的类型:
            <input type="checkbox" name="like">可爱
            <input type="checkbox" name="like">性感
            <input type="checkbox" name="like">御姐
            <input type="checkbox" name="like">萝莉
            <input type="checkbox" name="like">小鲜肉
            <input type="checkbox" name="like">大叔
            <br>
            个人介绍:
            <br>
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <h2>我承诺</h2>
            <ul>
                <li>年满十八岁,单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚寻找另一半</li>
            </ul>
            <input type="checkbox" style="margin-top: 13px;">我同意所有条款
            <br>
            <button>免费注册</button>
            <button type="reset">重置</button>
        </div>
    </div>
</body>

效果如下: