首页 > 其他分享 >前端技术对html中块级元素的学习

前端技术对html中块级元素的学习

时间:2024-11-11 19:20:23浏览次数:5  
标签:HTML 序列表 标签 前端 无序 列表 html 中块级 定义

块级元素


目录

列表元素

有序列表

在 HTML 中,

    标签用来表示有序列表。有序列表之间的内容有先后顺序之分,例如菜谱中的一系列步骤,这些步骤需要按顺序完成,这时就可以使用有序列表。

    我们来看一个简单的实例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML有序列表</title>
    </head>
    <body>
        <p>煮米饭的步骤:</p>
        <ol>
            <li>将水煮沸</li>
            <li>加入一勺米</li>
            <li>搅拌均匀</li>
            <li>继续煮10分钟</li>
        </ol>
    </body>
    </html>
    

    在浏览器中运行效果如图所示:

    图1:HTML 有序列表演示

    有序列表需要使用

    1. 标签:

        1. 是 order list 的简称,表示有序列表,它可以为列表的每一项进行编号,默认从数字 1 开始。
        2. 是 list item 的简称,表示列表的每一项,
            中有多少个
          1. 就表示有多少条内容。列表项中可以包含文本、图片、链接等,甚至还可以是另外一个列表。

      注意,

        一般和
      1. 配合使用,不会单独出现,而且不建议在
          中直接使用除
        1. 之外的其他标签。

          无序列表

          HTML 使用

            标签来表示无序列表。无序列表和有序列表类似,都是使用
          • 标签来表示列表的每一项,但是无序列表之间的内容没有顺序。例如,早饭的种类不需要表明顺序,这时就可以使用无序列表。

            我们来看一个简单的例子:

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>HTML无序列表</title>
            </head>
            <body>
                <p>早餐的种类:</p>
                <ul>
                    <li>鸡蛋</li>
                    <li>牛奶</li>
                    <li>面包</li>
                    <li>生菜</li>
                </ul>
            </body>
            </html>
            

            浏览器运行结果如图所示:

            图2:HTML 无序列表演示

            无序列表需要使用

            • 标签:

                • 是 unordered list 的简称,表示无序列表。
                    1. 中的
                    2. 一样,都表示列表中的每一项。默认情况下,无序列表的每一项都使用`●`符号表示。

                  注意,

                    一般和
                  • 配合使用,不会单独出现,而且不建议在
                      中直接使用除
                    • 之外的其他标签。

                      自定义列表

                      在 HTML 中,

                      标签用于创建定义列表。定义列表由标题(术语)和描述两部分组成,描述是对标题的解释和说明,标题是对描述的总结和提炼。

                      定义列表具体语法格式如下:

                      标题1
                      描述文本2
                      标题2
                      描述文本2
                      标题3
                      描述文本3

                      定义列表需要使用

                      标签:

                      • 是 definition list 的简称,表示定义列表。
                      • 是 definition term 的简称,表示定义术语,也就是我们说的标题。
                      • 是 definition description 的简称,表示定义描述 。

                      可以认为

                      定义了一个概念(术语),
                      用来对概念(术语)进行解释。

                      注意,

                      是同级标签,它们都是
                      的子标签。一般情况下,每个
                      搭配一个
                      ,一个
                      可以包含多对

                      我们来看一个简单的例子:

                      <!DOCTYPE html>
                      <html lang="en">
                      <head>
                          <meta charset="UTF-8">
                          <title>HTML定义列表</title>
                      </head>
                      <body>
                          <dl>
                              <dt>HTML</dt>
                              <dd>HTML 是一种专门用来开发网页的标记语言,您可以转到《<a href="http://c.biancheng.net/html/" target="_blank">HTML教程</a>》了解更多。</dd>
                              <dt>CSS</dt>
                              <dd>CSS 层叠样式表可以控制 HTML 文档的显示样式,用来美化网页,您可以转到《<a href="http://c.biancheng.net/css3/" target="_blank">CSS教程</a>》了解更多。</dd>
                              <dt>JavaScript</dt>
                              <dd>JavaScript 简称 JS,是一种用来开发网站(包括前端和后台)的脚本编程语言,您可以转到《<a href="http://c.biancheng.net/js/" target="_blank">JS教程</a>》了解更多。</dd>
                          </dl>
                      </body>
                      </html>
                      

                      浏览器运行效果如下图:

                      图3:HTML 定义列表演示

                      虽然是同级标签,但是它们的默认样式不同,
                      带有一段缩进,而
                      顶格显示,这样层次更加分明。

标签:HTML,序列表,标签,前端,无序,列表,html,中块级,定义
From: https://www.cnblogs.com/BingBing-8888/p/18540379

相关文章

  • 前端笔记1-vue:路由相关内容
    文章目录文章目录文章目录前言一、路由器工作模式1、hash模式2、history模式二、to的两种写法及命名路由1、to的写法1:字符串形式2、to的写法2:对象形式3、命名路由三、嵌套路由四、路由传参1、查询参数(query)(1)、在组件中接收参数(2)、使用<......
  • 前端笔记1-vue:状态管理库-Pinia
    这里写目录标题前言一、Pinia的主要特点1、类型安全2、模块化设计3、简洁的API4、热重载支持5、插件系统二、Pinia的使用1、基本用法(1)、安装Pinia(2)、创建Store(3)、注册Store(4)、在组件中使用Store2、storeToRefs的使用使用步骤storeToRefs与toRefs的区别3、$su......
  • 【原创】基于 face-api.js 的HTML,PHP人脸识别系统实现
    声明:本程序仅仅只是实现了PHP、HTML页面拉取手机/电脑摄像头,进行实时拍照获取人脸,可根据你的开发需求进行进一步的实现所需功能。使用截图电脑我没装摄像头,所以就是能调取提示,其他不演示了手机端如图技术栈前端:HTML5,JavaScript人脸识别:face-api.js视频流处......
  • apachectl——Apache服务器前端控制工具
    转自于:https://github.com/jaywcjlove/linux-command,后不赘述apachectlApache服务器前端控制工具补充说明apachectl命令是Apache的Web服务器前端控制工具,用以启动、关闭和重新启动Web服务器进程。语法apachectl(参数)参数configtest:检查设置文件中的语法是否正确;ful......
  • HTML实现二级导航的制作
    源文件在上面。。。一级导航:    首先想要做二级导航那必然是要先做完一级导航。一级导航非常简单,简单分析一下:首先导航是可以点击的所以本身是个a标签其次导航是多个的所以通常将a标签套在一个列表下的li标签里。<divclass="box"><ul><li><imgsrc......
  • 堪称2025最强前端面试场景题,这下不慌了...
    前言2025年的春季招聘还有三个月就即将到来,很多同学开始思考前端面试中场景题的重要性。这里我提供一些见解和建议来帮助大家准备即将到来的面试。首先,理解面试中场景题的必要性是至关重要的。与算法或理论问题不同,场景题更贴近实际工作中可能遇到的具体情况,能更好地评估应聘......
  • 2024年前端面试高频题(一)
    1.什么是事件冒泡和事件捕获事件流有三个阶段:事件捕获、事件目标、事件冒泡。在事件捕获阶段,事件从文档的根节点向下传播到目标元素;在事件冒泡阶段,事件从目标元素向上传播到文档的根节点。事件冒泡与事件捕获的区别事件捕获:事件从document→parent→child(从外到内)事......
  • 2024中高级前端面试真题解析
    我是一名本科毕业的前端程序媛,工作5年了,周末双休待遇还不错。公司最近要搬迁新地址,业务要整合到一起,所以最近比较清闲,天天上班摸鱼,闲着没事,整理了以前面试时用的资料文档有945道:JavaScript(323题)CSS(61题)HTML(57题)React(83题)Vue(80题)算法(19题)计算机网络(71题)Node.js(2......
  • Excel.Application使用手册(摘自:https://www.cnblogs.com/codingking/p/6484461.html)
    定制模块行为(1)OptionExplicit'强制对模块内所有变量进行声明  OptionPrivateModule'标记模块为私有,仅对同一工程中其它模块有用,在宏对话框中不显示  OptionCompareText'字符串不区分大小写  OptionBase1'指定数组的第一个下标为1(2)OnErrorResumeNe......
  • 【前端】JSX 中事件处理详解
    在React和JSX中,处理事件是构建交互式用户界面的重要部分。通过合理地处理事件,可以实现用户与应用的互动,从而提升用户体验。本文将详细说明如何在JSX中处理事件,包括类组件和函数组件中的不同方法,并提供示例代码和最佳实践。1.事件处理的基本概念在React中,事件处......