【HTML5】html5开篇基础(4)

news2024/9/28 17:53:59

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋,这里是E绵绵呀✍️✍️。

如果你喜欢这篇文章,请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣,记得关注我👀👀以便不错过每一篇精彩。

当然,如果在阅读中发现任何问题或疑问,我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力,一起进步!

加油,一起CHIN UP!💪💪

🔗个人主页:E绵绵的博客
📚所属专栏:

1. JAVA知识点专栏

        深入探索JAVA的核心概念与技术细节

2.JAVA题目练习

        实战演练,巩固JAVA编程技能

3.c语言知识点专栏

        揭示c语言的底层逻辑与高级特性

4.c语言题目练习

        挑战自我,提升c语言编程能力

5.Mysql数据库专栏

        了解Mysql知识点,提升数据库管理能力

6.html5知识点专栏

         学习前端知识,更好的运用它

📘 持续更新中,敬请期待❤️❤️

2.无序列表 

<ul>标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用 <li>标签定义。无序列表的基本语法格式如下:

<u1>
<]>列表项1</1i>
<1i>列表项2</1i>
<1i>列表项3</1i>
</u1>

1.无序列表的各个列表项之间没有顺序级别之分,是并列的。
2.<ul> </u|> 中只能嵌套 <li></i>,直接在 <u|></ul> 标签中输入其他标签或者文字的做法是不被允许的。
3.<li>与 </i>之间相当于一个容器,可以容纳所有元素,如<P></P>
4.无序列表会带有自己的样式属性,但在实际使用时,我们会使用CSS 来设置将它不显示。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表示例</title>
</head>

<body>
    <h2>无序列表</h2>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
</body>

</html>

 


3.有序列表

有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义在 HTML 标签中,<ol>标签用于定义有序列表,列表排序以数字来显示,并且使用 <li>标签来定义列表项。有序列表的基本语法格式如下:

<o1>
<1i>列表项1</1i>
<1i>列表项2</1i>
<1i>列表项3</1i>
</o1>

1.<ol></ol>中只能嵌套<li></li>,直接在<o|></ol>标签中输入其他标签或者文字的做法是不被允许的。
2.<li>与 </i>之间相当于一个容器,可以容纳所有元素,如<P></P>

3.有序列表会带有自己样式属性,但在实际使用时,我们会使用CSS来设置将它不显示。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表示例</title>
</head>

<body>
    <h2>有序列表</h2>
    <ol>
        <li>第一步</li>
        <li>第二步</li>
        <li>第三步</li>
    </ol>
</body>

</html>

4.自定义列表 

自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何符号。(有序列表和无序列表都有特殊符号)

如上就是自定义列表。

在 HTML标签中,<dl>标签用于定义描述列表,该标签会与<dt>(定义项目)和<dd>(描述每一个项目)一起使用。其基本语法如下:

<d1>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</d1>


1.<dl></dl>里面只能包含<dt>和 <dd>
2.<dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>

3.<dt>与 </dt> 以及 <dd>与</dd>之间相当于一个容器,可以容纳所有元素,如<P></P>

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单个描述项列表</title>
</head>

<body>
    <h2>单个描述项示例</h2>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dd>用于定义网页的结构</dd>
        <dd>非常有用</dd>
    </dl>
</body>

</html>

如果想要达成网页一样的效果之后用css来修饰就行。 

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

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

相关文章

已解决:“ModuleNotFoundError:No module named apex”

首先遇到这个问题不可以直接简单粗暴的使用&#xff1a;“pip install apex”直接安装模块来解决&#xff0c;这样的话程序还是会继续报错“ModuleNotFoundError&#xff1a;No module named apex”&#xff0c;别问我怎么知道&#xff0c;问就是深受其害&#xff01; 去网上查…

Android实现图片滚动和页签控件功能的实现代码

首先题外话&#xff0c;今天早上起床的时候&#xff0c;手滑一下把我的手机甩了出去&#xff0c;结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了&#xff0c;于是我今天决定怒更一记&#xff0c;纪念我死去的爱机。 如果你是网购达人&#xff0c;你的手机上一定少不了淘宝…

热题系列章节21

补充题14. 阿拉伯数字转中文数字 补充题9. 36进制加法 85. 最大矩形 class Solution:def maximalRectangle(self, matrix: List[List[str]]) -> int:if not matrix:return 0m,nlen(matrix),len(matrix[0])# 记录当前位置上方连续“1”的个数pre[0]*(n1)res0for i in range…

带你0到1之QT编程:二十、QT与MySQL喜结连理,构建数据库应用开发

此为QT编程的第二十谈&#xff01;关注我&#xff0c;带你快速学习QT编程的学习路线&#xff01; 每一篇的技术点都是很很重要&#xff01;很重要&#xff01;很重要&#xff01;但不冗余&#xff01; 我们通常采取总-分-总和生活化的讲解方式来阐述一个知识点&#xff01; …

基于elasticsearch存储船舶历史轨迹

文章目录 引言轨迹文档定时创建索引手动添加索引并为索引添加别名POST请求批量插入文档数据查询文档数据引言 需求: 存储轨迹,提供站点查询显示 实现:每天创建索引,使用POST请求往Elasticsearch批量插入文档数据 依赖 <dependency><groupId>org.springframe…

JAVA红娘婚恋相亲交友系统源码全面解析

在数字化时代&#xff0c;红娘婚恋相亲交友系统成为了连接单身男女的重要桥梁。JAVA作为一种流行的编程语言&#xff0c;为开发这样的系统提供了强大的支持。编辑h17711347205以下是对JAVA红娘婚恋相亲交友系统源码的全面解析&#xff0c;以及三段示例代码的展示。 系统概述 …

Stable Diffusion绘画 | 插件-Deforum:动态视频生成

Deforum 与 AnimateDiff 不太一样&#xff0c; AnimateDiff 是生成丝滑变化视频的&#xff0c;而 Deforum 的丝滑程度远远没有 AnimateDiff 好。 它是根据对比前面一帧的画面&#xff0c;然后不断生成新的相似图片&#xff0c;来组合成一个完整的视频。 Deforum 的优点在于可…

DevExpress WPF中文教程:如何解决编辑单元格值的常见问题?

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

明达技术工业级边缘计算网关:智能制造的智慧纽带

在工业互联网的浪潮中&#xff0c;智能制造正引领着传统制造业的深刻变革&#xff0c;显著提升着生产效能与运营效率。在这场转型中&#xff0c;数据处理与分析能力成为了企业核心竞争力的重要一环。工业级边缘计算网关&#xff0c;作为连接工业设备与云端智能的桥梁&#xff0…

华为-单臂路由

1、什么是单臂路由 单臂路由&#xff08;Single-Arm Routing&#xff09;是一种网络架构和配置技术&#xff0c;它允许路由器通过一个物理接口来管理多个虚拟局域网&#xff08;VLAN&#xff09;之间的通信。 这个物理接口被配置为Trunk模式&#xff0c;以便能够传输来自不同VL…

完数因子输出-C语言

1.问题&#xff1a; 找出1000之内的所有完数&#xff0c;并输出其因子。 2.解答&#xff1a; 一个数如果恰好等于它的因子之和&#xff0c;这个数就称为完数。1不用判断&#xff0c;直接从2开始&#xff0c;因为1的因子只有1。 3.代码&#xff1a; #include<stdio.h>…

【文件增量备份系统】MySQL百万量级数据量分页查询性能优化

&#x1f3af; 导读&#xff1a;本文针对大数据量下的分页查询性能问题进行了深入探讨与优化&#xff0c;最初查询耗时长达12秒&#xff0c;通过避免全表计数及利用缓存保存总数的方式显著提升了浅分页查询速度。面对深分页时依然存在的延迟&#xff0c;采用先查询倒数第N条记录…

从信号量开始的里牛渴死生活

讲讲信号量 POSIX信号量 这个曾经在进程间通信提过一嘴但是没怎么细说&#xff0c;POSIX信号量和SystemV信号量都可用于同步达到无冲突的访问共享资源的目的&#xff0c;POSIX还可以用于线程间同步 初始化 #include <semaphore.h> int sem_init(sem_t *sem, int psh…

C++ 9.27

作业&#xff1a; 将之前实现的顺序表、栈、队列都更改成模板类 Stack #include <iostream> using namespace std; template <typename T> class Stack { private: T* arr; // 存储栈元素的数组 int top; // 栈顶索引 int capacity; // 栈的…

工程师 - Windows下使用WSL来访问本地的Linux文件系统

Access Linux filesystems in Windows and WSL 2 从 Windows Insiders 预览版构建 20211 开始&#xff0c;WSL 2 将提供一项新功能&#xff1a;wsl --mount。这一新参数允许在 WSL 2 中连接并挂载物理磁盘&#xff0c;从而使您能够访问 Windows 本身不支持的文件系统&#xff0…

【中医智慧解糖忧】血糖高?中医调理有妙招,自然平衡血糖不是梦!

在快节奏的现代生活中&#xff0c;高血糖已成为困扰许多人的健康难题。面对这一挑战&#xff0c;许多人第一时间想到的是西医的药物治疗&#xff0c;却往往忽略了中医这一博大精深的宝库。事实上&#xff0c;中医以其独特的理论体系和丰富的实践经验&#xff0c;在调理血糖方面…

千亿数据-异地容灾-查询打印——MySQL大数据优化

1. 数据备份策略 - 定期全量备份&#xff1a;制定周期性的全量数据备份计划&#xff0c;确保数据的完整性。 - 增量备份&#xff1a;在全量备份之间进行增量备份&#xff0c;减少备份时间和存储空间。 2. 数据存储 - 分布式存储&#xff1a;利用分布式存储系统来存…

极致cms使用多语言插件,如何修改默认主站语言为英文

jizhicms使用多语言插件&#xff0c;如何修改默认主站语言为英文 第一步&#xff1a;首先安装多语言插件 第二步配置多语言 第三步&#xff1a;极致cms默认的语言版本是中文的&#xff0c;需要修成英文要分三个步骤 1、修改前台&#xff0c;当url中不带语言的时候&#xff0c…

systemd使用入门

systemd负责管理整个操作系统&#xff0c;功能非常强大。我们在实际工作中&#xff0c;常常使用systemd来管理我们的服务。 &#xff08;1&#xff09;想要开机之后自动启动&#xff0c;从而不需要每次开机之后都手动启动进程&#xff0c;可以通过systemd来实现。 &#xff0…

酒水速送小程序开发制作方案

在餐饮娱乐领域&#xff0c;即时酒水配送服务逐渐成为市场新宠。开发一款集在线选购、快速配送、于一体的酒水配送小程序&#xff0c;以满足用户在家中、聚会场所或商业活动中即时获取各类酒水的需求&#xff0c;提升用户体验&#xff0c;拓宽酒水销售渠道。 目标用户 年轻消费…