当前位置： 首页 > news >正文

web前端开发第3次Dreamweave课堂练习/html练习代码《网页设计语言基础练习案例》

news 2025/12/30 20:09:04

目标图片：

文字素材：


    网页设计语言基础练习案例


        ——几个从语义上和文字相关的标签

  * h标签（h1~h6）：用来定义网页的标题，成对出现。
  * p标签：用来设置网页的段落，成对出现。
  * br标签：换行符，单独出现。
  * 列表标签：成对、成组出现。
      o 无序列表：ul　 和　 列表项：li
      o 有序列表：ol　 和　 列表项：li
      o 定义列表：dl　和　定义术语：dt　和　定义描述：dd
  * span标签：无意义标签，成对出现

h标签(h1~h6)
    h是header的首字母缩写，后面的数字表示标题的级别。
    默认自带效果：加粗，自带间距，且独立成行。

p标签
    p是paragraph的首字母缩写，用来设置段落文本。
    默认自带效果：段间距，且独立成行。

br标签
    换行符，只回一行，行间距较小时可以使用，且不够精确。
    默认自带效果：换行。

列表标签
    无序列表，默认列表符为实心圆点，有左填充，嵌套子列表的列表符会发生变化。
    有序列表，默认列表符为阿拉伯数字，有左填充。
    定义列表，没有列表符，dl后面要跟着dt和dd，一个dt可以和多个dd搭配，其
    中dd默认带左间距
    列表元素是块级元素，能独立成行，一般不单独使用，因为单独的元素不能表
    达完整的语义，且有可能在样式的呈现上回出现意想不到的问题。
    列表元素能够实现网页当中的结构化信息，如需要排列显示的导航菜单、新闻
    信息等。

span标签
    span无实际意义，没有固定样式，是行级元素
    一般作为部分文本定义特殊样式时使用，完善排版。

图片素材：

Dreamweave-html运行代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<h1>
<h1 align="center">
网页设计语言基础练习案例</h1>
<hr below style="border:3px dashed #FFCC00;">
<h3>
<h3 align="center">
——几个从语义上和文字相关的标签</h3><ul>
<li style="disc;">
<img src="practice3.jpg"style="float:right;margin-right:130px; width="91" height="135" />
<b style="color:red;">h标签（h1~h6）：</b>用来定义网页的标题，成对出现。</li>
<li><b style="color:red;">p标签:</b>用来设置网页的段落，成对出现。</li>
<li><b style="color:red;">br标签:</b>换行符、单独出现。</li>
<li><b style="color:red;">列表标签:</b>成对、成组。</li>
<li><b style="color:red;">span标签:</b>无意义标签，成对出现。</li>
</ul>
<div>
<div align="center">
<div style="border:1px dashed #000;width:500px;height:80px;">
<div style="text-align:left;width:480px;height:70px;background-color:#FC9;color:black;font-size:16px;padding-left:20px;padding-top:10px;">
<li>无序列表：ul　 和　 列表项：li</li>
<li>有序列表：ol　 和　 列表项：li</li>
<li>定义列表：dl　和　定义术语：dt　和　定义描述：dd</li>
<ul></div><dl><div>
<div style="border:1px solid #000;width:500px;height:90px;border-radius:20px;">
<dl style="text-align:left;width:470px;color:black;font-size:16px;">
<dt>h标签(h1~h6)</dt>
<dd>h是header的首字母缩写，后面的数字表示标题的级别。</dd>
<dd>默认自带效果：加粗，自带间距，且独立成行。</dd>
</div></dl>
<dl><div>
<div style="border:1px solid #000;width:500px;height:90px;border-radius:20px;">
<dl style="text-align:left;width:470px;color:black;font-size:16px;">
<dt>p标签</dt>
<dd>p是paragraph的首字母缩写，用来设置段落文本。</dd>
<dd>默认自带效果：段间距，且独立成行。</dd>
</div></dl>
<dl><div>
<div style="border:1px solid #000;width:500px;height:90px;border-radius:20px;">
<dl style="text-align:left;width:470px;color:black;font-size:16px;">
<dt>br标签</dt>
<dd>换行符，只回一行，行间距较小时可以使用，且不够精确。</dd>
<dd>默认自带效段:换行。</dd>
</div></dl><div style="border:1px solid #000;width:500px;height:220px;border-radius:20px;">
<dl style="text-align:left;width:470px;color:black;font-size:16px;">
<dt>列表标签</dt>
<dd>无序列表，默认列表符为实心圆点，有左填充，嵌套子列表的列表符会发生变化。</dd>
<dd>有序列表，默认列表符为阿拉伯数字，有左填充。</dd>
<dd>定义列表，没有列表符，dl后面要跟着dt和dd，一个dt可以和多个dd搭配，其中dd默认带左间距。</dd>
<dd>列表元素是块级元素，能独立成行，一般不单独使用，因为单独的元素不能表达完整的语义，且有可能在样式的呈现上回出现意想不到的问题。</dd>
<dd列表元素能够实现网页当中的结构化信息，如需要排列显示的导航菜单、新闻信息等。</dd>
</div></dl><dl style="border:1px solid #000;width:500px;height:90px;border-radius:20px;">
<dl style="text-align:left;width:470px;color:black;font-size:16px;">
<dt>span标签</dt>
<dd>span无实际意义，没有固定样式，是行级元素。</dd>
<dd>一般作为部分文本定义特殊样式时使用，完善排版。</dd>
</div></dl></body>
</html>

Edge浏览器运行截图：

Goole浏览器运行截图：

相关文章：

web前端开发第3次Dreamweave课堂练习/html练习代码《网页设计语言基础练习案例》

目标图片&#xff1a; 文字素材&#xff1a; 网页设计语言基础练习案例 ——几个从语义上和文字相关的标签 * h标签&#xff08;h1~h6&#xff09;&#xff1a;用来定义网页的标题&#xff0c;成对出现。 * p标签&#xff1a;用来设置网页的段落&#xff0c;成对出现。 * b…...

编程日记 2023/11/14 1:45:52

APP备案获取安卓app证书公钥获取方法和签名MD5值

前言 在开发和发布安卓应用程序时&#xff0c;了解应用程序证书的公钥和签名MD5值是很重要的。这些信息对于应用程序的安全性和合规性至关重要。现在又因为今年开始APP必须接入备案才能在国内各大应用市场上架&#xff0c;所以获取这两个值成了所有开发者的必经之路。本文将介…...

编程日记 2023/11/14 1:44:51

cefsharp 93.1.140 如何在js中暴露c#类

从cefsharp79版本开始&#xff0c;旧的RegisterJsObject方法被删除了。 也就是说想使用79以后的版本&#xff0c;就必须更新js暴露c#对象的方法了。由于79之前的注册方法是不需要在js中进行注册的&#xff0c;在93版本上如何在不改动前端页面的基础上实现内核升级咧&#xff0c…...

编程日记 2023/11/14 1:43:50

同一台Linux同时安装MYSQL5.7和MYSQL8（第一篇）

在一台Linxu上面同时安装mysql5.7和mysql8.0的步骤&#xff0c;记录一下&#xff0c;方便后续回顾&#xff0c;后续文章之后会接着介绍搭建两台虚拟机一主一从的架构。 其中配置的文件名称、目录、端口号、IP地址要根据自己电脑的实际情况进行更改。 安装完成后效果 [rootzong…...

编程日记 2023/11/14 1:42:49

【CSS】解决上层盒子遮挡下层图片点击事件的三种方法

1. Pointer Events 属性 CSS 的 pointer-events 属性是一个强大的工具&#xff0c;可以控制元素是否接收用户的交互事件。通过将上层盒子的 pointer-events 设置为 none&#xff0c;我们可以确保它不会阻止下层图片的点击事件。 .upper-box {z-index: 999; /* 设置更高的 z-i…...

编程日记 2023/11/14 1:41:48

力扣每日一题 ---- 2906. 构造乘积矩阵

这题很简单(一下就能想到是前缀和的提米)&#xff0c;但是在处理12345上面需要仔细一点&#xff0c;本来我最开始想到的时候全部累乘在除掉当前数&#xff0c;但是这样就没有把12345考虑进去&#xff0c;如果他本身是12345的话&#xff0c;那么除他以外的乘积并不一定是0&#…...

编程日记 2023/11/14 1:40:46

Tomcat学习

一、入门 在webapp里面必须先创建一个文件夹&#xff0c;文件夹里面放的内容&#xff0c;才会被访问到。 创建一个javaweb项目后 二、servlet 1.概述 2.servlet生命周期 3.servlet实例的创建时机 4.Servlet实例的初始化参数 5.HTTP状态码 6.servelet返回JSON数据 7.服务端设置…...

编程日记 2023/11/14 1:39:45

Linux系统上搭建高可用Kafka集群（使用自带的zookeeper）

本次在CentOS7.6上搭建Kafka集群 Apache Kafka 是一个高吞吐量的分布式消息系统&#xff0c;被广泛应用于大规模数据处理和实时数据管道中。本文将介绍在CentOS操作系统上搭建Kafka集群的过程&#xff0c;以便于构建可靠的消息处理平台。 文件分享&#xff08;KafkaUI、kafka…...

编程日记 2023/11/14 1:38:43

WebSocket在node端和客户端的使用

摘要 如果想要实现一个聊天的功能&#xff0c;就会想到使用WebSocket来搭建。那如果没有WebSocet的时候&#xff0c;我们会以什么样的思路来实现聊天功能呢&#xff1f; 假如有一个A页面 和 B页面进行通信&#xff0c;当A发送信息后&#xff0c;我们可以将信息存储在文件或者…...

编程日记 2023/11/14 1:37:42

ENVI IDL：如何将txt文本文件转化为GeoTIFF文件？

01 前言 此处的文本文件形式如下&#xff1a; 里面包含了众多点位信息&#xff08;不是站点数据&#xff09;&#xff0c;我们需要依据上述点的经纬度信息放到对应位置的像素点位置&#xff0c;放置完后如下&#xff1a; 可以发现&#xff0c;还存在部分缺失值&#xff0c;我们…...

编程日记 2023/11/14 1:36:40

北邮22级信通院数电：Verilog-FPGA（9）第九周实验（2）实现下降沿触发的JK触发器（带异步复位和置位功能）

北邮22信通一枚~ 跟随课程进度更新北邮信通院数字系统设计的笔记、代码和文章 持续关注作者 迎接数电实验学习~ 获取更多文章&#xff0c;请访问专栏&#xff1a; 北邮22级信通院数电实验_青山如墨雨如画的博客-CSDN博客 JK.v module JK (input clk,input J,input K,input…...

编程日记 2023/11/14 1:35:40

pyqt5UI同步加载

问题记录&#xff1a;pyqt5 怎样实现修改ui而不改变py代码&#xff0c;例如一个文件存入ui代码&#xff0c;另一个文件引入ui代码 起因&#xff1a;由于在写一个漏扫工具&#xff0c;由于ui的平频繁改动导致主体代码结构变动&#xff0c;所以先有没有方法能够不改变主题代码&am…...

编程日记 2023/11/14 1:34:39

CentOS 7 安装 Redis 5 （单机 6379）

CentOS 7 安装 Redis 5 &#xff08;单机 6379&#xff09; 自己准备好 Redis 5 的安装包并上传至 /opt/ 下的 redis 文件夹下&#xff1a; cd /opt mkdir redis cd redis准备好 Redis 所需的编译环境&#xff1a; yum -y install gcc yum -y install gcc-c解压上传的 Redis…...

编程日记 2023/11/14 1:33:38

sqlplus set参数大区

通过设置不同的SET参数&#xff0c;可以定制SQLPlus的行为和输出格式&#xff1a; SET 参数描述SET AUTOTRACE显示SQL语句的执行计划和统计信息&#xff0c;用于性能优化。SET FEEDBACK控制是否显示SQL语句执行的行数&#xff0c;可提高结果可读性。SET LINESIZE设置每行的最大…...

编程日记 2023/11/14 1:32:37

从0到0.01入门React | 006.精选 React 面试题

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…...

编程日记 2023/11/14 1:31:36

GeoTools实战指南: 处理矢量文件中多多边形的MultiPolygon空洞问题

目录 GeoTools实战指南: 处理矢量文件中多多边形的MultiPolygon空洞问题背景思路分析代码实现引入依赖读取并遍历矢量文件处理并“缝合”一个多边形的内外环结果保存到新的矢量文件中完整代码效果展示仓库代码地址GeoTools实战指南: 处理矢量文件中多多边形的MultiPolygon空洞问…...

编程日记 2023/11/14 1:30:35

javaSE学习笔记（五）集合框架-Collection，List，Set，Map，HashMap，Hashtable，ConcurrentHashMap

目录 四、集合框架 1.集合概述 集合的作用 集合和数组的区别 集合继承体系 数组和链表 数组集合 链表集合 2.Collection 方法 集合遍历 并发修改异常 3.List List集合的特有功能&#xff08;核心是索引&#xff09; 集合遍历 并发修改异常产生解决方案ListItera…...

编程日记 2023/11/14 1:29:34

web3 React dapp项目通过事件从区块链中拿到 已取消 已完成 和所有的订单数据 并存入redux中

好 上文web3通过antd 在React dapp中构建订单组件基本结构我们算是把一个基本的订单组件展示做出来了 然后 我们继续 起一下环境先 ganache 终端运行 ganache -dMetaMask 登录一下 然后 打开项目 发布一下合约 truffle migrate --reset然后 运行一下 测试脚本 转入交易所 E…...

编程日记 2023/11/14 1:28:33

25、Flink 的table api与sql之函数(自定义函数示例)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…...

编程日记 2023/11/14 1:27:32

MybatisPlus —注解汇总

本文将介绍 MybatisPlus 注解包相关类详解&#xff08;更多详细描述可点击查看源码注释&#xff09; 注解类包源码&#xff1a;&#x1f449; mybatis-plus-annotation(opens new window) 一、#TableName(opens new window) 描述&#xff1a;表名注解&#xff0c;标识实体类对…...

编程日记 2023/11/14 1:26:29

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/12/14 13:08:55

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/11/25 5:13:22

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/12/19 10:39:38

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/12/6 22:50:48

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/11/13 13:42:14

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2025/12/29 10:56:52

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/12/15 13:27:34