HTML【重点标签】

news2024/11/23 12:51:04

一、列表标签

1.无序列表

父级别:

  • 无序列表的标题
----表示无序列表的整体,用于包裹li标签

子级别:

  • 无序列表一行的内容
  • ----表示无序列表的每一项,用于包含一行的内容

    语义:构建没有顺序的列表

    特点:列表的每一项前面默认显示黑色小圆点

    注意事项:

    • ul标签只允许包含li标签
    • li标签可以包含任何内容
        <ul>水果列表
            <li>榴莲</li>
            <li>哈密瓜</li>
        </ul>
    

    在这里插入图片描述

    2.有序列表

    父级别:

    1. 有序列表的标题
    —表示有序列表的整体,用于包裹li标签

    子级别:

  • 有序列表一行的内容
  • ----表示有序列表的每一项,用于包含一行的内容

    语义:构建有顺序的列表
    特点:列表中的每一项前面默认显示排列序号

    注意事项:

    • ol标签只允许包含li标签
    • li标签可以包含任何内容
    <ol>蔬菜列表
        <li>青菜</li>
        <li><a>白菜</a></li>
    </ol>
    

    在这里插入图片描述

    3.自定义列表

    相比于有序和无序,它提供了更简洁和带缩进的选择

    父级别:

    自定义列表的标题
    —表示自定义列表的整体,用于包裹dt和dd标签

    子级别:

    自定义列表一行的内容,默认不缩进 ----示自定义列表的每一项,用于包含一行的内容

    子级别:

    自定义列表一行的内容,默认缩进
    ----表示自定义列表的每一项,用于包含一行的内容

    兄弟级别:

    语义:构建自定义列表

    特点:dd前会默认显示缩进效果

    注意事项:

    • dl标签只允许包含dt和dd标签
    • dt/dd标签可以包含任何内容
    <dl>你需要?
        <dt>帮助中心</dt>
        <dt>客服信息</dt>
        <dd>账户管理</dd>
        <dd>订单操作</dd>
    </dl>
    

    在这里插入图片描述

    二、表格标签

    1.表格标签的组成

    父级别:

    --表格的整体,可用于包裹多个tr子级别: --表格每行,可用于包裹td

    子级别: 表格的标题 --表格 外 的大标题,

    自动表格头居中效果子子级别: 单元格内容 --表格单元格,可用于包裹内容,自带加粗居中效果–常作为表头

    子子级别: 单元格内容 --表格单元格,可用于包裹内容兄弟级别

    语义:构建表格
    特点:表格的形式呈现

    注意事项:标签的嵌套关系:table>tr=caption>th=tr

    <table>
        <caption>家庭</caption>
        <tr> 
            <th>直系</th>
            <td>大哥</td>   
            <td>小弟</td>
        </tr>
        <tr>
            <th>旁系</th>
            <td>朋友</td>  
            <td>兄弟</td> 
        </tr>
    </table>
    

    在这里插入图片描述

    2.表格标签的属性

    border=“” --控制表格 边框 的宽度
    width=“” --控制 表格 宽度
    height=“” --控制 表格 高度

    注意事项:实际开发针对样式效果以CSS为主

    <table border="3">
        <caption>植物</caption>
        <tr>
            <th>水果</th>
            <th>蔬菜</th>
        </tr>
        <tr>
            <td>苹果</td>
            <td>青菜</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>    
    

    2.合并单元格

    垂直合并(跨行合并)

    水平合并(跨列合并)

    合并单元格步骤:

    • 明确合并哪几个单元格

    • 通过左上原则,确定保留谁删除谁

    • 上下合并一只保留最上的,删除其他

    • 左右合并一只保留最左的,删除其他

    属性名:

    • rowspan(跨行合并)
    • colspan(跨列合并)

    属性值:

    • 合并单元格的个数
    • 合并单元格的个数

    说明:

    • 跨行合并,将多行的单元格垂直合并
    • 跨列合并,将多列的单元格水平合并

    注意事项:只有同一个结构标签中的单元格才能合并,不能跨结构标签合并 (不能跨: t-head、t-body、t-foot)

    三、表单标签

    1.表单标签的组成

    input系列标签:

    语义:构建表单

    特点:

    • input标签可以通过type属性值不同,来展示不同的效果
    • 单标签

    注意事项:相邻input标签没有换行

    2.表单的type属性

    属性值效果
    text文本框
    password密码框
    radio单选框
    checkbox多选框
    file文件上传框
    reset重置按钮
    submit提交按钮
    button按钮
    placeholder属性
    提示字属性,提示用户输入内容的文本
    <input type="text" name="" id="" placeholder="请输入">
    
    text值
    输入文本框
    <input type="text" placeholder="输入账户">注册
    
    password值
    输入密码框
    <input type="password" placeholder="输入密码">密码
    
    radio值
    多选一的单选
    常配合一起的属性:
    name:用于单选的分组,从而实现单选功能
    checked:默认提前选中
    温馨提示:
    具有相同name的单选框为一组,一组中只能有一个被选中,不同组之间可以多选
    <input type="radio" name="sex"><input type="radio" name="sex"><br>
    <input type="radio" checked>三1 
    <input type="radio">三2
    
    checkbox值
    实现多选
    常配合一起的属性:
    checked:默认提前选中
    <input type="checkbox" checked >香蕉  <input type="checkbox" >苹果
    
    file值
    实现上传文件
    常配合一起的属性:
    multiple:实现上传多个文件
    默认上传单个
    <input type="file" >上传单个文件
    <input type="file" multiple >上传多个文件
    
    reset值
    清空表单所填的内容
    <input type="reset" values="清空表单">
    
    submit值
    用于提交表单信息给数据库后台
    <input type="submit" values="提交">
    

    四、JS预留标签

    button 按钮标签:< button>按钮内的内容< /button>

    语义:普通按钮,默认无功能,一般配合js使用

    特点:双标签

    温馨提示:

    • 谷歌浏览器button默认是提交按钮
    • button是双标签,便于包裹其他内容:文字\图片等

    五、下拉菜单标签

    1.下拉菜单标签的组成

    < select >
    < option > < /option>

    ​ < option > < /option>

    </ select>

    父级别:select

    子级别:option

    特点:双标签

    2.下拉菜单标签的属性

    默认选中这个option

        <select>地址
            <option>上海</option>
            <!-- 默认选中 -->
            <option selected>广东</option> 
            <option>江西</option>
        </select>
    

    六、文本域标签

    1.文本域标签的组成

    < textarea >< /textarea>

    语义:提供可输入多行文本的表单控件

    特点:

    • 双标签
    • 可调整文本域大小

    注意事项:

    • 右下角拖拽可以改变大小
    • 实际开发以css来针对样式效果

    2.文本域标签的属性

    cols:控制文本域宽度
    rows:控制文本域高度

        <textarea rows="10"  cols="10"></textarea>
    

    七、范围之内选中标签

    < label > < /label>

    语义:提供可输入多行文本的表单控件

    特点:

    • 双标签
    • 可调整文本域大小

    注意:本质上就是转移点击对象,类似于超链接

    使用方法
    1.使用lableb标签把整个点击范围包裹起来,再使用for属性来指向选中谁
    2.直接整个包裹在lable里面
    <label for="da">男:</label>
    <input type="radio" name="" id="da">
     
    <label for="da">女:<input type="radio" name="" id="da"></label>
    
    <label for="da">ddddddddddddddd1</label>
    <button id="da">按钮</button>
    

    八、语义化标签

    1.没有语义化标签

    < div>< /div>

    < span>< /span>>

    作用:用于配合使用css进行网页布局

    使用两者区别:

    • div是独占一行的
    • span只占需要行
    <div>div</div>
    <div>div</div>
    <span>span</span>
    <span>span</span>
    

    2.有语义化标签

    空格字符
    &nbsp
    实现一个空格
    

    九、HTML5布局标签

    在这里插入图片描述

    十、文本显示

    在标签内写文本的时候,里面的换行和空格是会被显示出来的,而标签标签之间的空格和换行是不会显示的

    换行只有超出了盒子范围后,才会显示。否者是空格

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            p{
                width: 20px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            das  da 
            adasdasd
            <p>
                sssss
                ssssssssssss
                sssssssssssssssssssssssssssss
            </p>
            <span>       
                ggg
                gggggg
                ggggggggggg
            </span>
        </div>
    </body>
    <script>
    </script>
    </html>
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1869991.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

php聚合快递寄快递小程序

一、引言&#xff1a;告别传统寄件&#xff0c;拥抱便捷新选择 在数字化时代&#xff0c;我们越来越追求便捷和高效。传统的寄件方式已经无法满足现代人快速、便捷的需求。因此&#xff0c;一款聚合快递优惠寄件小程序应运而生&#xff0c;它集合了多家快递公司&#xff0c;为…

Linux高级编程——进程

1.进程的含义? 进程是一个程序执行的过程&#xff0c;会去分配内存资源&#xff0c;cpu的调度 PID, 进程标识符 当前工作路径 chdir umask 0002 进程打开的文件列表 文件IO中有提到 &#xff08;类似于标准输入 标准输出的编号&#xff0c;系统给0&#xff0c;1&#xf…

台灯的功能作用有哪些?分享好用的护眼灯!看完就知道台灯怎么选

在当今时代&#xff0c;学生们长时间地沉浸于平板、手机、电脑等电子设备中&#xff0c;这些设备的屏幕往往伴随着频闪和蓝光辐射&#xff0c;这无疑对视力健康构成了潜在威胁。家长们日益关注孩子的护眼养眼问题&#xff0c;因为视力疲劳和眼部疾病不仅会降低个体的生活质量&a…

Hyperf 在 NginxProxyManager 如何配置 websocket?

新建代理 填写域名等服务信息&#xff0c;选择支持WebSockets。 创建 SSL 编写nginx配置 location /message.io{proxy_pass http://<你的ip>:<对应端口号>;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "Upg…

VMware虚拟机三种网络模式设置 - Host-Only(仅主机模式)

一、前言 在之前的《Bridged&#xff08;桥接模式&#xff09;》、《NAT&#xff08;网络地址转换模式&#xff09;》中&#xff0c;我详细介绍了虚拟机网络模式设置中的桥接模式与网络地址转换模式。今天详细讲解一下Host-Only&#xff08;仅主机模式&#xff09;。 在VMware虚…

vue + Lodop 制作可视化设计页面 实现打印设计功能(二)

历史&#xff1a; vue2 Lodop 制作可视化设计页面 实现打印设计功能&#xff08;一&#xff09; 前言&#xff1a; 之前本来打算用直接拿之前做的vue2版本改改就发的&#xff0c;但考虑到现在主流都是vue3了&#xff0c;所以从这篇文章开始使用vue3来写&#xff0c;以及最后…

4年突破20亿,今麦郎如何持续策划凉白开极致产品力?

范总在方便面市场拥有30年的丰富经验&#xff0c;并曾创造过奇迹。1994年&#xff0c;他从冰糖生意进入方便面行业&#xff0c;创立今麦郎的前身华龙集团。当时&#xff0c;方便面市场已经进入红海阶段&#xff0c;市场上有上千家企业&#xff0c;康师傅和统一占据了80%的市场份…

Apple Intelligence,我们能得到什么?(上)

苹果公司WWDC 2024发布会&#xff0c;苹果AI成为最吸睛的焦点。不过&#xff0c;苹果的AI不是大家口中的AI&#xff0c;而是苹果独有的概念&#xff1a;Apple Intelligence&#xff0c;苹果智能。 所谓Apple Intelligence&#xff0c;被定义为iPhone、iPad和Mac的个人智能系统…

Arduino - 继电器

Arduino - 继电器 In a previous tutorial, we have learned how to turn on/off an LED. In this tutorial, we are going to learn how to turn on/off some kind of devices that use the high voltage power supply(such as a light bulb, fan, electromagnetic lock, lin…

Linux高并发服务器开发(五)终端和守护进程

文章目录 1 概念2 会话基本概念和API3 守护进程&#xff08;重点&#xff09;守护进程模型 4 获取当前系统时间 1 概念 终端 进程的集合叫进程组 也称为作业 是执行程序的过程 2 会话基本概念和API 进程组的集合 3 守护进程&#xff08;重点&#xff09; 独立于控制…

Linux内核中网络数据的流量控制(TC: Traffic control 和 QDISC)

(个人能力有限&#xff0c;本文如有错误之处&#xff0c;欢迎交流指正) 1 简介 在进行网络数据 接收 和 发送 过程中&#xff0c;网卡设备到L3(网络层) 中间会经历流量控制(Traffic control)。 《BPF之巅.洞悉Linux系统和应⽤性能》P413 qdisc这个可选层可以⽤来管理⽹络包的…

机器学习-数据预处理-聚类-回归-分类-单车数据集

机器学习-数据预处理-聚类-回归-分类-单车数据集 前言一、数据预处理1. 导入数据集2. 数据预处理3. 处理缺失值4. 生成特征用于后续进一步的分析 二、数据分布可视化1. 骑行时长分布2. 起始站和终点站分布可视化3. 高峰期与非高峰期骑行频次分布 三、聚类分析1. K-means聚类 四…

PostgreSQL 连接器:在 SeaTunnel 中的应用与优势

在现代企业中&#xff0c;数据已经成为核心资产&#xff0c;基于开源数据集成平台SeaTunnel&#xff0c;工程师如何高效地连接和管理这些数据源&#xff0c;直接关系到企业的竞争力和运营效率。 本文将给大家介绍如何通过 JDBC PostgreSQL 数据源连接器&#xff0c;在 SeaTunne…

240627_图像24位深度(RGB图)转为8位深度(单通道图)

240627_图像24位深度&#xff08;RGB图&#xff09;转为8位深度&#xff08;单通道图&#xff09; 在使用网络上下载下来的一部分图像分割数据集时&#xff0c;有些标签图你看着是一个黑白图&#xff0c;但是他还是有可能是一张RGB三通道图&#xff0c;具体怎么区分呢。右击图…

ARM芯片架构(RTOS)

前言&#xff1a;笔记韦东山老师的rtos教程&#xff0c;连接放在最后 #ARM介绍 arm芯片属于精简指令集risc&#xff0c;所用的指令比较简单&#xff0c;ARM架构是一种精简指令集&#xff08;RISC&#xff09;架构&#xff0c;广泛应用于移动设备、嵌入式系统、物联网等领域。AR…

英国国王座驾车标的逆向工程

多功能设计和制造解决方案为独特的挑战提供了引人注目的优势。Impossible Creations是一家来自英国的定制扫描、设计和建模公司&#xff0c;专门帮助客户完成无限制得创作任务。在他们最近接到的一个项目中&#xff0c;为了修复象征英国国王座驾的大英帝国吉祥物&#xff0c;Im…

【博士每天一篇文献-综述】Biological underpinnings for lifelong learning machines

阅读时间&#xff1a;2023-12-17 1 介绍 年份&#xff1a;2015 作者&#xff1a;Dhireesha Kudithipudi&#xff0c;Mario Aguilar-Simon&#xff0c;其中通讯作者Josh Bongard教授也是另一篇论文的通讯作者《Neural modularity helps organisms evolve to learn new skills …

widows下 vscode 的 terminal / powershell,ctrl+v失灵,输出^v

问题 原因 最近装了PSReadLine Import-Module PSReadLineSet-PSReadLineOption -PredictionSource History Set-PSReadLineOption -PredictionViewStyle InlineView Set-PSReadLineOption -EditMode Emacsvscode不兼容 解决方法 注释掉最后面的 Import-Module PSReadLineS…

Linux通过expect实现免交互

免交互 Here Document 用于将多行字符串直接传递给命令的方式&#xff0c;不需要人为交互命令界面&#xff0c;实现免交互 当使用Here Document操作文件时&#xff0c;需要借助一个文件结束符 EOF&#xff1a;文件结束符 示例 在脚本文件中写入以下内容 <<&#x…

RabbitMQ安装部署

简介 RabbitMQ一款知名的开源消息队列系统&#xff0c;为企业提供消息的发布、订阅、点对点传输等消息服务。 RabbitMQ在企业开发中十分常见&#xff0c;课程为大家演示快速搭建RabbitMQ环境。 安装 rabbitmq在yum仓库中的版本比较老&#xff0c;所以我们需要手动构建yum仓库…